ga4
Made by JeffConfigure GA4 + GTM for Next.js SaaS: funnel tracking, scroll depth, CTA clicks, conversions, feature usage. Use when setting up analytics, tracking conversions, or implementing A/B tests.
Works With
Quality and Utility come from canonical skill metadata. Community ratings appear separately as stars when subscriber reviews exist.
Subscribe to download
Public previews are available, but downloads, CLI sync, and premium content require an active subscription.
Sign In to Subscribe- Full skill content with deterministic versioning
- CLI sync + local search index
- Access to Jeffrey’s premium library
Save to your account
Saved skills live in your cloud list. Run jsm sync on each machine to pull them locally.
What's New with this Skill
2Updates, enhancements, and release notes for this skill.
Updated: ga4, A/B statistics that count visitors correctly, with realistic sample sizes
The conversion queries counted events rather than visitors, and the sample-size table understated the traffic needed about fivefold. Both are fixed. The A/B proxy now also writes a new variant onto the request, so Route Handlers, the Pages Router and Next.js 14.2.7 and earlier see it on the first visit; cookies() in Next.js 15 and later (and 14.2.8+) already did. The Google Tag Manager and GA4 setting names were brought up to date.
- The proxy writes a new variant onto the request too, so Route Handlers, the Pages Router and Next.js 14.2.7 and earlier see it on the first visit
- Conversion queries count visitors, not events, and only conversions after exposure
- Sample-size table corrected: about 31,000 per variant for a 10% lift at a 5% baseline, not 6,000
- Landing-page conversion query credits each user's first page view
- GTM and GA4 names updated: Google Tag, key events, Consent Mode v2 parameters
- First-visit variant. The proxy now writes a new variant onto the incoming request as well as the response and forwards it with
NextResponse.next({ request: { headers } }). Next.js 15 and later (and 14.2.8+) already copy proxy-set cookies intocookies()for the same render, so App Router Server Components were fine there; the change covers Route Handlers readingrequest.cookies, the Pages Router and Next.js 14.2.7 and earlier.
New: GA4 + GTM for Next.js SaaS, covering funnel tracking, scroll depth, and conversions with no extra subscriptions
GA4 alone is rigid; GTM alone is overhead. Together they make a free analytics stack for a Next.js SaaS. GTM is the central tag hub (configure tracking in the web interface instead of redeploying for every change), GA4 is the analytics destination, and @next/third-parties/google is the Next.js integration that loads them. A dataLayer push pattern unifies every event, from CTA clicks to scroll depth to sign-up conversions.
- Next.js wiring is one component: <GoogleTagManager gtmId="GTM-XXXXXXX" /> in app/layout.tsx. GTM then loads GA4 through a GA4 Configuration tag; later tracking changes need no code deploy
- dataLayer push pattern unifies every event: a trackEvent helper calls window.dataLayer.push({ event, ...params }), and GTM triggers route the push to GA4
- Six funnel steps: page_view, scroll_depth (25/50/75/90% via GTM, since GA4 only records 90%), section_view, cta_click, sign_up (method, user_id), and feature_use (feature_name)
- A/B testing without Google Optimize: push experiment_view with experiment_name and experiment_variant; GA4 audiences segment users by variant. Composes with the ab-testing skill
- Validation before ship: GTM Preview Mode (tag fires), GA4 DebugView (event and parameters arrive), GA4 Realtime (live traffic). Three independent confirmations
- Why GTM with GA4: configure tracking in the web interface, test in Preview mode before publishing, and keep the Next.js code free of scattered analytics calls
Wiring is one component: <GoogleTagManager gtmId="GTM-XXXXXXX" /> in app/layout.tsx. GTM then loads GA4 through a GA4 Configuration tag, and any tracking change after that happens in the GTM web interface without a code deploy. The dataLayer is the universal bus: every meaningful event pushes a typed object ({ event: 'cta_click', cta_text: 'Get Started', cta_position: 'hero' }) and GTM triggers route it to GA4.