feat: add trackers (#383)

* feat: add trackers 1. add twitter tracker 2. add google analytics tracker * refactor: uglify twitter.js
Magickbase · Nov 14, 2023 · 15a6cf2 · 15a6cf2 · vercel · Nov 14, 2023
1 parent 5ccb76b
commit 15a6cf2
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -18,10 +18,10 @@ const config = {
   rules: {
     'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
     'import/newline-after-import': 'error',
-    'eol-last': ["error", "always"],
+    'eol-last': ['error', 'always'],
   },
   // This is because `next.config.mjs` is excluded from tsconfig.
-  ignorePatterns: ['next.config.mjs', 'next-i18next.config.js'],
+  ignorePatterns: ['next.config.mjs', 'next-i18next.config.js', 'public/scripts/*'],
 }
 
 module.exports = config
diff --git a/public/scripts/google-analytics.js b/public/scripts/google-analytics.js
@@ -0,0 +1,7 @@
+window.dataLayer = window.dataLayer || []
+function gtag() {
+  dataLayer.push(arguments)
+}
+gtag('js', new Date())
+
+gtag('config', 'G-WVH440CNZ3')
diff --git a/public/scripts/twitter.js b/public/scripts/twitter.js
@@ -0,0 +1,4 @@
+!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
+},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js',
+a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
+twq('config','o6uy5');
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -1,9 +1,9 @@
-import { useEffect } from 'react'
 import { type AppType } from 'next/app'
+import { useEffect } from 'react'
 import Head from 'next/head'
 import { appWithTranslation } from 'next-i18next'
 import localFont from 'next/font/local'
-import { api } from '../utils/api'
+import { IS_PROD, api } from '../utils'
 import 'swiper/css'
 import '../styles/globals.scss'
 
@@ -29,6 +29,13 @@ const App: AppType = ({ Component, pageProps }) => {
       <Head>
         <title>Nervos Network</title>
         <link rel="icon" type="image/svg" href="/favicon.svg" />
+        {IS_PROD ? (
+          <>
+            <script async src="https://www.googletagmanager.com/gtag/js?id=G-WVH440CNZ3" />
+            <script async src="/scripts/google-analytics.js" />
+            <script async src="/scripts/twitter.js" />
+          </>
+        ) : null}
       </Head>
       <main
         // Here as redundancy in server-side rendering.

diff --git a/src/utils/env.ts b/src/utils/env.ts
@@ -1,5 +1,6 @@
-// https://github.com/vercel/vercel/discussions/5230
-// VERCEL_URL doesn't work on custom domains, so we need NEXT_BASE_URL
-
-const DOMAIN = process.env.NEXT_BASE_URL || process.env.VERCEL_URL
-export const BASE_URL = DOMAIN ? `https://${DOMAIN}` : '/'
+// https://github.com/vercel/vercel/discussions/5230
+// VERCEL_URL doesn't work on custom domains, so we need NEXT_BASE_URL
+
+const DOMAIN = process.env.NEXT_BASE_URL || process.env.VERCEL_URL
+export const IS_PROD = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+export const BASE_URL = DOMAIN ? `https://${DOMAIN}` : '/'
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -34,6 +34,7 @@ export function mouseEventOffset(ev: { clientX: number; clientY: number }, targe
   return { x: cx - rect.left, y: cy - rect.top }
 }
 
+export * from './env'
 export * from './markdownToHtml'
 export * from './api'
 export * from './number'