From 862a2b98446bac1ea8dea713281a78a6f52594e4 Mon Sep 17 00:00:00 2001 From: Alchie Tagudin Date: Mon, 1 Sep 2025 10:39:23 +0800 Subject: [PATCH 1/5] feat: add Google Analytics and Tag Manager integration with Next.js --- .github/workflows/firebase-hosting-merge.yml | 2 + .../firebase-hosting-pull-request.yml | 2 + package.json | 3 +- pages/_app.tsx | 4 + src/utils/constant/general.ts | 2 + yarn.lock | 124 ++++++++++-------- 6 files changed, 80 insertions(+), 57 deletions(-) create mode 100644 src/utils/constant/general.ts diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml index 9420738..879aaa5 100644 --- a/.github/workflows/firebase-hosting-merge.yml +++ b/.github/workflows/firebase-hosting-merge.yml @@ -31,6 +31,8 @@ jobs: NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ vars.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }} NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }} NEXT_PUBLIC_USER_ACCOUNT_ENABLED=${{ vars.NEXT_PUBLIC_USER_ACCOUNT_ENABLED }} + NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=${{ vars.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=${{ vars.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID }} EOF - name: Cache Next.js build diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml index 45f17e4..7e714b8 100644 --- a/.github/workflows/firebase-hosting-pull-request.yml +++ b/.github/workflows/firebase-hosting-pull-request.yml @@ -33,6 +33,8 @@ jobs: NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ vars.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }} NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }} NEXT_PUBLIC_USER_ACCOUNT_ENABLED=${{ vars.NEXT_PUBLIC_USER_ACCOUNT_ENABLED }} + NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=${{ vars.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=${{ vars.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID }} EOF - name: Cache Next.js build diff --git a/package.json b/package.json index 29c99d9..d89e811 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@apollo/client": "^3.13.9", + "@next/third-parties": "^15.5.2", "@portabletext/react": "^3.2.1", "@radix-ui/react-dialog": "^1.1.14", "@sanity/client": "^7.8.1", @@ -32,7 +33,7 @@ "graphql": "^16.11.0", "graphql-request": "^7.2.0", "graphql-tag": "^2.12.6", - "next": "^15.1", + "next": "^15.5.2", "next-sitemap": "^4.2.3", "react": "^19", "react-dom": "^19", diff --git a/pages/_app.tsx b/pages/_app.tsx index b17c171..a567041 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,8 @@ import Footer from "@/components/Footer"; import SEO from "@/components/SEO"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { AuthProvider } from "@/context/AuthContext"; +import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google' +import { GOOGLE_ANALYTICS_ID, GOOGLE_TAG_MANAGER_ID } from "@/utils/constant/general"; // Support for per-page layout export type NextPageWithLayout = NextPage & { @@ -28,6 +30,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
{getLayout()} + {GOOGLE_ANALYTICS_ID && } + {GOOGLE_TAG_MANAGER_ID && }