ga4

Files (6)

• SKILL.md
• AB-TESTING.md · references/
• DEBUGGING.md · references/
• EVENTS.md · references/
• FUNNEL-ANALYSIS.md · references/
• GTM-TAGS.md · references/

SKILL.md (first lines)

# GA4 + GTM for Next.js SaaS

> **Stack**: Next.js 16 App Router + @next/third-parties + Supabase Auth + GA4 + GTM (all free)

## Table of Contents
- [Quick Start](#quick-start) | [Why GTM + GA4](#why-gtm-with-ga4) | [Workflow](#workflow)
- [Funnel Events](#funnel-events) | [dataLayer Push](#datalayer-push-pattern) | [GTM Tags](#gtm-tag-configurations)
- [Sign-up Conversion](#sign-up-conversion-tracking) | [Feature Usage](#in-app-feature-usage)
- [A/B Testing](#ab-testing-no-google-optimize) | [Validation](#validation) | [References](#references)

---

## Quick Start

```tsx
// app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoogleTagManager gtmId="GTM-XXXXXXX" />
      </body>
    </html>
  )
}
```

Then in GTM: Create GA4 Configuration tag with `G-XXXXXXXXXX` Measurement ID, trigger "All Pages".

## Why GTM with GA4

GTM is a **centralized hub** for all tracking. Benefits:

| Without GTM | With GTM |
|-------------|----------|
| Hardcoded analytics calls | Configure in web interface |
| Redeploy to change tracking | Update without code deploys |
| Testing in production | Preview mode before publish |
| Scattered event code | Unified dataLayer pattern |

GTM "listens" to dataLayer and routes events to GA4. Your Next.js code stays clean.

## Workflow

- [ ] 1. Create GTM container → note `GTM-XXXXXXX`
- [ ] 2. Add `<GoogleTagManager>` to root layout
- [ ] 3. Create GA4 Config tag in GTM (Measurement ID + All Pages trigger)
- [ ] 4. Publish GTM, verify in GA4 Realtime
- [ ] 5. Add funnel events (scroll, CTA, sign_up, feature_use)
- [ ] 6. Register custom parameters in GA4 Admin > Custom Definitions
- [ ] 7. Mark `sign_up` as conversion in GA4 Admin > Events
- [ ] 8. Configure User-ID for cross-session tracking (optional)
- [ ] 9. Build funnel exploration in GA4 Explore

## Funnel Events

| Step | Event | Parameters | How |
|------|-------|------------|-----|
| 1. Landing | `page_view` | (automatic) | GA4 Config tag |
| 2. Scroll | `scroll_depth` | `scroll_percent` | GTM Scroll trigger (25/50/75/90%) |
| 3. Section View | `section_view` | `section_name` | GTM Element Visibility trigger |
| 4. CTA Click | `cta_click` | `cta_text`, `cta_position` | GTM Click trigger or dataLayer |
| 5. Sign-up | `sign_up` | `method`, `user_id` | dataLayer on Supabase auth |
| 6. Feature Use | `feature_use` | `feature_name` | dataLayer on action |

**Note**: GA4 Enhanced Measurement auto-tracks scroll at 90% only. Use GTM for granular 25/50/75/90%.

## dataLayer Push Pattern

```tsx
// Declare type for TypeScript
declare global {
  interface Window { dataLayer: Record<string, any>[]; }
}

// Generic push helper
function trackEvent(event: string, params: Record<string, any>) {
  window.dataLayer?.push({ event, ...params });
}

// Examples
trackEvent('cta_click', { cta_text: 'Get Started', cta_position: 'hero' });
trackEvent('feature_use', { feature_name: 'export_report' });
```

## GTM Tag Configurations

### Scroll Depth (25/50/75/90%)

1. **Variables** > Built-in: Enable `Scroll Depth Threshold`, `Scroll Depth Units`, `Scroll Direction`
2. **Trigger** > Scroll Depth: Vertical, Percentages: `25,50,75,90`
3. **Tag** > GA4 Event: `scroll_depth`, param `scroll_percent` = `{{Scroll Depth Threshold}}`

### Section Visibility

Track which landing page sections users actually see (not just scroll past):

```tsx
// Add to section elements
<section className="ga-section-tracking" data-section-name="features">
  {/* content */}
</section>
```

1. **Variable** > Auto-Event Variable: Element Attribute `data-section-name`
2. **Trigger** > Element Visibility: CSS `.ga-section-tracking`, 50% visible, once per element
3. **Tag** > GA4 Event: `section_view`, param `section_name` = `{{AEV - section-name}}`

### CTA Click (Two Methods)

**Method A: No-Code (GTM only)**
```html
<button class="cta-signup" data-cta_text="Sign Up" data-cta_position="hero">
  Create Account
</button>
```

From danzam98/claude-skills-toolkit, MIT.

More from danzam98/claude-skills-toolkit