Skip to content

fix(ga4): fix gtag.js dataLayer integration and consent defaults#11

Merged
tyssejc merged 5 commits intomainfrom
feature/ga4-demo-integration
Mar 24, 2026
Merged

fix(ga4): fix gtag.js dataLayer integration and consent defaults#11
tyssejc merged 5 commits intomainfrom
feature/ga4-demo-integration

Conversation

@tyssejc
Copy link
Copy Markdown
Owner

@tyssejc tyssejc commented Mar 24, 2026

Summary

  • Fixed gtag stub using Array instead of Arguments object — The gtag stub was an arrow function with rest params, pushing plain Arrays to dataLayer. gtag.js silently ignores array entries and expects the arguments object. Switched to a named function declaration matching Google's official snippet.
  • Added consent mode defaultsgtag("consent", "default", {...}) now fires before gtag("config", ...) when consentMode: true, so gtag.js knows consent mode is active.
  • Wired up real GA4 destination in demo app — Replaced the simulated no-op GA4 destination with the real @junctionjs/destination-ga4 package, gated on NEXT_PUBLIC_GA4_MEASUREMENT_ID env var.

Test plan

  • Verified gtag.js script loads in <head>
  • Verified collect?v=2 network requests fire after granting consent
  • Verified event names map correctly (page_view, view_item, select_item, etc.)
  • Verified consent gating: events queue before grant, flush after
  • TypeScript compiles clean
  • Biome lint/format passes
  • Verify events appear in GA4 Realtime / DebugView

🤖 Generated with Claude Code

tyssejc and others added 5 commits March 23, 2026 16:14
Replace simulatedGA4 no-op with the real @junctionjs/destination-ga4 package.
GA4 is conditionally enabled via NEXT_PUBLIC_GA4_MEASUREMENT_ID env var.
When the env var is absent, the demo works as before (demo sink only + simulated vendors).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two bugs fixed:

1. gtag stub used arrow function with rest params, pushing Arrays to
   dataLayer. gtag.js silently ignores array entries — it expects the
   Arguments object. Switched to `function() { dataLayer.push(arguments) }`
   matching Google's official snippet.

2. When consentMode is enabled, gtag("consent", "default", {...}) must
   fire before gtag("config", ...) so gtag.js knows consent mode is
   active. Without this, consent state was never communicated to Google.
Arrow functions don't have their own `arguments` object, which breaks
the gtag dataLayer integration. Added biome-ignore for both
useArrowFunction and noArguments rules.
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
junctionjs Ready Ready Preview, Comment Mar 24, 2026 0:00am

@tyssejc tyssejc merged commit 7c8cb06 into main Mar 24, 2026
6 checks passed
@tyssejc tyssejc deleted the feature/ga4-demo-integration branch March 24, 2026 12:06
@github-actions github-actions bot mentioned this pull request Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant