add GA

fpgmaas · Jun 23, 2024 · ad429e8 · ad429e8
1 parent 1656ad3
commit ad429e8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -55,3 +55,4 @@ jobs:
           tags: pypiscoutacr.azurecr.io/pypi-scout-frontend:latest
           build-args: |
             NEXT_PUBLIC_API_URL=https://pypiscout.com/api
+            NEXT_PUBLIC_GA_TRACKING_ID=${{ secrets.NEXT_PUBLIC_GA_TRACKING_ID }}
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -13,11 +13,11 @@ RUN npm install
 # Copy the rest of the application code to the container
 COPY . .
 
-# Build argument to accept the API URL during build time
+# Add build arguments to environment
 ARG NEXT_PUBLIC_API_URL
-
-# Set environment variable within the container
+ARG NEXT_PUBLIC_GA_TRACKING_ID
 ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ENV NEXT_PUBLIC_GA_TRACKING_ID=${NEXT_PUBLIC_GA_TRACKING_ID}
 
 # Build the Next.js application
 RUN npm run build

diff --git a/frontend/app/components/GoogleAnalytics.tsx b/frontend/app/components/GoogleAnalytics.tsx
@@ -0,0 +1,29 @@
+// app/components/GoogleAnalytics.tsx
+"use client";
+
+import { useEffect } from "react";
+
+const GoogleAnalytics = () => {
+  useEffect(() => {
+    const trackingId = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+    if (trackingId) {
+      const script1 = document.createElement("script");
+      script1.async = true;
+      script1.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
+      document.head.appendChild(script1);
+
+      const script2 = document.createElement("script");
+      script2.innerHTML = `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${trackingId}');
+      `;
+      document.head.appendChild(script2);
+    }
+  }, []);
+
+  return null;
+};
+
+export default GoogleAnalytics;
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import GoogleAnalytics from "./components/GoogleAnalytics";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <GoogleAnalytics />
+        {children}
+      </body>
     </html>
   );
 }