Internal

    Dev Notes

    A running log of fixes, improvements, and the Claude Code prompts used to build them.

    Google Analytics 4 Integration

    2026-10-15

    Fixed

    Problem

    GA4 property (G-G3MX9X9R36) was created in Google Analytics but the tracking script was never added to the website. The GA dashboard showed "No data received from your website yet."

    Root Cause

    No <script> tag or gtag() call existed anywhere in the Next.js codebase.

    What Was Changed

    1. Created src/components/GoogleAnalytics.tsx — a server-safe component that uses next/script with strategy="afterInteractive" to load the GA4 gtag.js library and initialise it.
    2. Imported <GoogleAnalytics /> into src/app/layout.tsx so it fires on every page automatically.

    Files Touched

    • src/components/GoogleAnalytics.tsx (new)
    • src/app/layout.tsx (updated)

    Claude Code Prompts Used

    Prompt 1 — Diagnose the GA4 issue
    Search the entire codebase for any reference to Google Analytics, gtag, GA4, or the string "G-". Tell me what files contain them and show the relevant lines.
    Prompt 2 — Add GA4 to Next.js App Router
    Add Google Analytics 4 tracking to this Next.js 14 App Router project.
Measurement ID: G-G3MX9X9R36

Requirements:
- Use next/script with strategy="afterInteractive"
- Create a standalone GoogleAnalytics component in src/components/GoogleAnalytics.tsx
- Import it in src/app/layout.tsx so it loads on every page
- Do not use any third-party analytics library
Show me the exact file changes.
    Prompt 3 — Verify the fix works
    After deploying, how do I confirm that Google Analytics is now receiving data?
Walk me through:
1. Checking the GA4 Realtime report
2. Using browser DevTools Network tab to confirm the gtag request fires
3. Any common mistakes that could still block data (CSP headers, ad-blockers, etc.)