Add google analytics

filecoin-project · Nov 21, 2024 · 2dd9fde · 2dd9fde
1 parent d369ea9
commit 2dd9fde
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/.env.prod.template b/.env.prod.template
@@ -10,4 +10,5 @@ NEXTAUTH_SECRET=
 NEXTAUTH_URL=
 GITHUB_ID=
 GITHUB_SECRET=
-NEXT_PUBLIC_IS_TESTNET=
+NEXT_PUBLIC_IS_TESTNET=
+NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=
diff --git a/.github/workflows/build-docker-image.yml b/.github/workflows/build-docker-image.yml
@@ -65,6 +65,7 @@ jobs:
           echo "NEXT_PUBLIC_DMOB_API_URL='${{ vars.NEXT_PUBLIC_DMOB_API_URL }}'" >> .env
           echo "NEXT_PUBLIC_GLIF_URL='${{ vars.NEXT_PUBLIC_GLIF_URL }}'" >> .env
           echo "NEXT_PUBLIC_IS_TESTNET='${{ vars.NEXT_PUBLIC_IS_TESTNET }}'" >> .env
+          echo "NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID='${{ vars.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID }}'" >> .env
           echo "NEXTAUTH_URL='${{ vars.NEXTAUTH_URL }}'" >> .env
           echo "NEXTAUTH_SECRET='placeholder'" >> .env
           echo "GITHUB_ID='placeholder'" >> .env

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,6 +11,8 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import Analytics from '@/components/Analytics'
+import Head from 'next/head'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -26,6 +28,9 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
+      <Head>
+        <Analytics />
+      </Head>
       <body className={inter.className + ' h-screen'}>
         <ReactQueryProvider>
           <ToastContainer position="top-right" autoClose={10000} />

diff --git a/src/components/Analytics.tsx b/src/components/Analytics.tsx
@@ -0,0 +1,21 @@
+import Script from 'next/script'
+import { config } from '@/config'
+
+const Analytics: React.FC = () => {
+  return (
+    <>
+      <Script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${config.gaTrackingId}`}
+      ></Script>
+      <Script id="ga-script">
+        {`window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '${config.gaTrackingId}');`}
+      </Script>
+    </>
+  )
+}
+export default Analytics
diff --git a/src/config.ts b/src/config.ts
@@ -25,6 +25,7 @@ const localConfig = {
   glifNodeUrl:
     process.env.NEXT_PUBLIC_GLIF_URL ?? 'https://api.node.glif.io/rpc/v1',
   isTestnet: process.env.NEXT_PUBLIC_IS_TESTNET ?? 'true',
+  gaTrackingId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID ?? '',
 }
 
 const prodConfig = {
@@ -51,6 +52,7 @@ const prodConfig = {
   dmobApiKey: process.env.NEXT_PUBLIC_DMOB_API_KEY ?? '',
   glifNodeUrl: process.env.NEXT_PUBLIC_GLIF_URL ?? '',
   isTestnet: process.env.NEXT_PUBLIC_IS_TESTNET ?? 'false',
+  gaTrackingId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID ?? '',
 }
 
 export const config =