How to Do Google Analytics Integration on Claude Code

5 min read
In this article

You can add Google Analytics 4 (GA4) to a web project using Claude Code in under 10 minutes. Give Claude your framework (Next.js, React, plain HTML), your Measurement ID, and a list of events to track — it handles script injection, custom event helpers, and consent mode stubs automatically. Best for developers who want analytics wired up without context-switching into docs. Main trade-off: Claude Code consumes usage tokens on your Claude Pro or Max plan, so running several integration tasks back-to-back can trigger a 5-hour usage lockout at a bad time.

  • GA4 replaced Universal Analytics in July 2023 — all new implementations use the gtag.js or the @analytics/google-analytics SDK (Google).
  • Claude Code works inside your terminal, reads your file tree, and writes framework-aware code — no copy-paste between a chat window and your editor.
  • The /usage command in Claude Code shows your remaining session tokens before you start a long integration task.

What is Google Analytics integration in the context of Claude Code?

Claude Code is Anthropic's agentic CLI that operates directly on your local codebase. When you ask it to "integrate Google Analytics," it reads your existing project structure, installs the required packages, injects the tracking snippet into the correct layout or entry file, and generates typed event-helper functions — all without you leaving the terminal.

The integration covers three layers:

  • Script loading — adding gtag.js (or the npm package equivalent) to your app's HTML head or root layout.
  • Page-view tracking — hooking into your router (Next.js App Router, React Router, etc.) so every navigation fires a page_view event automatically.
  • Custom event tracking — generating wrapper functions like trackSignup() or trackPurchase() that map to GA4's recommended event schema.

How to set up GA4 with Claude Code: step-by-step

Step 1 — get your GA4 Measurement ID

Log into Google Analytics, navigate to Admin, and copy your Measurement ID (format: G-XXXXXXXXXX). You will pass this directly to Claude Code as a prompt variable — no need to manually edit any config file.

Step 2 — check your usage before starting

Run /usage inside Claude Code to confirm you have enough headroom. Wiring up GA4 with custom events typically takes 3-6 agentic steps. If you are near your limit, finishing mid-integration leaves broken imports. You can also check your balance at claude.ai/settings/usage — or keep Usagebar open in your macOS menu bar to see live token consumption without switching windows.

Step 3 — give Claude Code a clear integration prompt

Specificity produces better output. A prompt like the one below covers the full scope in one shot:

Add Google Analytics 4 to this Next.js 14 App Router project.
Measurement ID: G-XXXXXXXXXX
Requirements:
- Load gtag.js in the root layout without blocking render
- Track page_view on every route change
- Create a typed analytics.ts helper with trackEvent(), trackSignup(), and trackPageView()
- Add a consent-mode stub (denied by default) ready for a cookie banner
- Store the Measurement ID in .env.local as NEXT_PUBLIC_GA_MEASUREMENT_ID
Do not modify any existing components.

Step 4 — review the diff before accepting

Claude Code shows you each file it intends to modify. Check that:

  • The Script component (Next.js) uses strategy="afterInteractive" — not "beforeInteractive" — to avoid Core Web Vitals regressions.
  • The .env.local file was created (not .env) so the key is gitignored by default.
  • No console.log debug statements were left in the event helpers.

Step 5 — verify events in GA4 DebugView

Start your dev server, open the GA4 DebugView in Google Analytics (Admin › DebugView), and trigger a page navigation. Events should appear within seconds. If page_view is missing, ask Claude Code: "The page_view event is not firing on route change in Next.js App Router — fix the router integration."

Step 6 — add custom events incrementally

Once baseline tracking works, extend it with targeted prompts:

  • "Add a trackButtonClick(label: string) event to analytics.ts and wire it to the primary CTA in components/Hero.tsx."
  • "Track form submissions in ContactForm.tsx using GA4's generate_lead event schema."
  • "Add scroll depth tracking at 25%, 50%, 75%, and 100% thresholds."

Framework-specific considerations

FrameworkRecommended approachWhat to tell Claude Code
Next.js (App Router)next/script with afterInteractive"Use the Next.js Script component, not a raw script tag"
Next.js (Pages Router)_app.tsx + router.events"Hook into router.events for client-side navigation"
React (Vite/CRA)react-ga4 npm package"Use react-ga4, initialize in main.tsx"
Plain HTMLInline gtag.js snippet"Add the standard gtag snippet to index.html head"
Astro@astrojs/partytown for offthread loading"Use Partytown integration to run GA4 in a web worker"

Using Claude Code slash commands during integration

Claude Code's slash commands are useful checkpoints during multi-step integrations:

  • /usage — check remaining session tokens mid-task, especially before asking for a large refactor.
  • /clear — reset the conversation context if you are starting a new integration task in the same session, which keeps token usage lean.
  • /review — ask Claude Code to audit the analytics code it just wrote for privacy compliance or performance issues.

See also: Claude Code usage statistics command for a deeper look at interpreting /usage output.

Common mistakes Claude Code helps you avoid

  • Double-firing page views — easy in SPAs when both the script tag and a router hook both fire page_view. Specify "single source of truth for page_view" in your prompt.
  • Exposing the Measurement ID in git — Claude Code correctly places it in .env.local when you ask, keeping it out of version control.
  • Blocking Core Web Vitals — requesting afterInteractive loading strategy explicitly avoids LCP/FID regressions.
  • Missing consent mode — GDPR-regulated sites need consent signals before GA4 collects data. Ask Claude Code to add a consent stub from the start, rather than retrofitting it later.

How to avoid mid-integration lockouts with Usagebar

Claude Pro and Max plans enforce 5-hour rolling usage windows (Anthropic support). Starting a GA4 integration at 80% usage and hitting the cap mid-task means broken imports and a stalled deploy.

Usagebar sits in your macOS menu bar and shows a live percentage of your Claude Code usage without any context switching. Smart alerts fire at 50%, 75%, and 90% so you can decide whether to start a new integration task or wait for the window to reset. Credentials are stored in macOS Keychain — never in plain text. It is available on a pay-what-you-want model, with a free tier for students.

Related: when does Claude Code usage reset and how to check Claude Code usage limits.

If you are running similar third-party integrations, see also:

Key takeaways

  1. Copy your GA4 Measurement ID from Google Analytics Admin before starting.
  2. Run /usage or check Usagebar to confirm you have enough token headroom.
  3. Write a single, specific prompt covering script loading, router integration, typed helpers, and consent mode.
  4. Review the diff — especially loading strategy and .env placement — before accepting.
  5. Verify in GA4 DebugView before shipping; use targeted follow-up prompts for custom events.
  6. Use /clear between unrelated tasks to keep context lean and tokens efficient.

Ready to keep your workflow unblocked? Get Usagebar — instant download, pay what you want, free for students.

Sources

Never Get Locked Out Mid-Task Again

Never hit your usage limits unexpectedly. Usagebar lives in your menu bar and shows your 5-hour and weekly limits at a glance.

Get Usagebar

$9 — one-time, lifetime updates