diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 737c04c..cddcca7 100644 --- 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 index ac7d507..0f346a5 100644 --- 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 new file mode 100644 index 0000000..617fe3c --- /dev/null +++ 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 index cb39f81..6a9c932 100644 --- 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 ( - {children} + + + {children} + ); }