Skip to content

feat: add Google Analytics 4 #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MinitJain merged 2 commits into from
Apr 21, 2026
Merged

feat: add Google Analytics 4 #31

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f33d37
feat: add Google Analytics 4 via @next/third-parties
MinitJain Apr 21, 2026
a154631
fix: address CodeRabbit review findings from PR #31
MinitJain Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .env.local.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Random secret for Vercel cron authentication — set same value in Vercel env vars
CRON_SECRET=your-random-secret

# Google Analytics 4 Measurement ID (format: G-XXXXXXXXXX)
# Get from analytics.google.com -> Admin -> Data Streams -> your stream -> Measurement ID
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-CCRK2NRGSL
Comment on lines +17 to +19
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Don't ship a real-looking Measurement ID in the example file.

G-CCRK2NRGSL reads like a real GA4 stream ID rather than a placeholder. Anyone cloning/forking without overriding .env.local will pollute your GA property with their dev traffic (and you'll inherit their PII-adjacent data). The comment on line 17 already specifies the placeholder format — use it.

🔧 Proposed fix 
-NEXT_PUBLIC_GA_MEASUREMENT_ID=G-CCRK2NRGSL
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

If G-CCRK2NRGSL is indeed your production stream, consider rotating it and scrubbing git history since .env.local.example is public.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# Google Analytics 4 Measurement ID (format: G-XXXXXXXXXX)
# Get from analytics.google.com -> Admin -> Data Streams -> your stream -> Measurement ID
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-CCRK2NRGSL
# Google Analytics 4 Measurement ID (format: G-XXXXXXXXXX)
# Get from analytics.google.com -> Admin -> Data Streams -> your stream -> Measurement ID
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.env.local.example around lines 17 - 19, Replace the real-looking GA4
Measurement ID in the example env variable NEXT_PUBLIC_GA_MEASUREMENT_ID with a
neutral placeholder (e.g., G-XXXXXXXXXX or an empty placeholder) so the example
file does not contain an actual stream ID; if the current value is a production
ID, rotate the ID and remove it from history.

4 changes: 4 additions & 0 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next'
import { DM_Sans, Plus_Jakarta_Sans, JetBrains_Mono } from 'next/font/google'
import { ThemeProvider } from 'next-themes'
import { Analytics } from '@vercel/analytics/next'
import { GoogleAnalytics } from '@next/third-parties/google'
Comment thread
coderabbitai[bot] marked this conversation as resolved.
import { FaviconInit } from '@/components/ui/FaviconInit'
import './globals.css'

Expand Down Expand Up @@ -118,6 +119,9 @@ export default function RootLayout({
<FaviconInit />
{children}
<Analytics />
{process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} />
)}
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Privacy policy is now out of sync — GA4 uses cookies.

app/privacy/page.tsx still tells users "Analytics are provided by Vercel Analytics (privacy-friendly, no cookies)." Enabling GA4 introduces cookie-based tracking (_ga, _ga_*) and sends IPs/client IDs to Google — that statement becomes false and a potential GDPR/CCPA disclosure defect the moment NEXT_PUBLIC_GA_MEASUREMENT_ID is set in prod. Update the disclosure to name Google Analytics, describe cookie usage, and (ideally) add a consent gate before loading <GoogleAnalytics> for EU visitors (Google Consent Mode v2).

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/layout.tsx` around lines 122 - 124, The privacy page disclosure is
inaccurate once GA4 is enabled via NEXT_PUBLIC_GA_MEASUREMENT_ID and you must
update both the text and loading behavior: update app/privacy/page.tsx to
explicitly state that Google Analytics (GA4) is used when
NEXT_PUBLIC_GA_MEASUREMENT_ID is set, mention that GA4 sets cookies (e.g., _ga,
_ga_*) and transmits IPs/client IDs to Google, and add a consent gate around the
GoogleAnalytics component (or wrap its loading in a consent-aware loader/Google
Consent Mode v2 integration) so the <GoogleAnalytics> script only loads after
user consent (optionally scoped to EU visitors). Ensure references to
NEXT_PUBLIC_GA_MEASUREMENT_ID and the GoogleAnalytics component are used to
conditionally render after consent and update the privacy text accordingly.

</ThemeProvider>
</body>
</html>
Expand Down
20 changes: 20 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"test:watch": "vitest"
},
"dependencies": {
"@next/third-parties": "^16.2.4",
"@react-three/fiber": "^8.18.0",
"@supabase/ssr": "^0.5.0",
"@supabase/supabase-js": "^2.45.0",
Expand All @@ -34,6 +35,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/three": "^0.184.0",
"@vitejs/plugin-react": "^6.0.1",
"autoprefixer": "^10.0.1",
"eslint": "^8",
Expand All @@ -42,7 +44,6 @@
"postcss": "^8",
"tailwindcss": "^3.4.0",
"typescript": "^5",
"vitest": "^4.1.4",
"@types/three": "^0.184.0"
"vitest": "^4.1.4"
}
}