Avenmia/add google analytics (#206)

* Adding google analytics * Updating README for google analytics * Fixing errors
CodeWithAloha · Apr 27, 2024 · 65f307f · 65f307f
1 parent 92d47a4
commit 65f307f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
+    "@types/gtag.js": "^0.0.19",
     "@types/leaflet": "^1.9.0",
     "@types/node": "^18.11.18",
     "@types/prettier": "^2.7.2",

diff --git a/src/README.md b/src/README.md
@@ -195,6 +195,16 @@ npx prisma db push
 
 > Note: The demographic questions will not populate because they are hard-coded in the SQL migrations.
 
+# Add Google Analytics Environment variable
+
+- In the .env file add
+
+```
+NEXT_PUBLIC_GA_ID = {MyGoogleAnalyticsID}
+```
+
+- This will enable google analytics on the site
+
 # Working with prisma
 
 When the data model changes, run the following to update your local database with the latest migrations

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,32 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+// Importing the Google Analytics Measurement ID from the environment variable
+const gaTag = process.env.NEXT_PUBLIC_GA_ID ?? "";
+const gtag = `https://www.googletagmanager.com/gtag/js?id=${gaTag}`;
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Google Analytics Measurement ID*/}
+          <script async src={gtag} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gaTag}', {
+                  page_path: window.location.pathname
+                });
+              `,
+            }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}