ga4-tracking-wiringlisted
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