← ClaudeAtlas

ga4-tracking-wiringlisted

Wire GA4 event tracking (CTA clicks, outbound links, scroll depth, read completion) into a Next.js App Router project. Scaffolds a typed gtag wrapper, four event helpers, and four drop-in client components. Battle-tested on miyakodeit.com (PR
suirindo/netsujo-aio-seo · ★ 0 · Web & Frontend · score 70
Install: claude install-skill suirindo/netsujo-aio-seo
# GA4 Tracking Wiring Production-ready GA4 event wiring for Next.js App Router. Generates a typed `window.gtag` wrapper, four event helpers (`trackCTAClick` / `trackOutboundLink` / `trackScrollDepth` / `trackReadComplete`), and four client components that fire them at the right moment. ## What it does 1. **Generates a typed gtag wrapper** at `lib/analytics/ga4.ts` (SSR-safe, no-op when `window` undefined) 2. **Generates four event helpers** at `lib/analytics/events.ts` with strict TypeScript signatures 3. **Generates four client components** under `components/analytics/` (CTAButton, OutboundLink, ScrollDepthTracker, ReadCompleteTracker) 4. **Patches `app/layout.tsx`** to mount `<ScrollDepthTracker />` site-wide (optional, opt-out via flag) 5. **Protects existing files**: writes `.new` siblings and prints a merge guide when conflicts are detected ## When to use - User says "GA4 tracking", "wire gtag", "trackCTAClick", "scroll depth", "outbound link tracking" - New Next.js project that has `GA4_MEASUREMENT_ID` but no event helpers - Standardizing tracking across Netsujo properties (miyakodeit / netsujo / soba-takahashi) - Before launching a content site where read-through and CTA performance need measurement ## Events covered | Helper | GA4 event name | Required params | Fires from | |---|---|---|---| | `trackCTAClick(label, position)` | `cta_click` | `event_label`, `cta_position` | `<CTAButton />` onClick | | `trackOutboundLink(url, domain)` | `outbound_click` | `link_u