菜单
Configure 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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/lev-os/agents --skill ga4命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | ga4 |
| description | Configure 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. |
Stack: Next.js 16 App Router + @next/third-parties + Supabase Auth + GA4 + GTM (all free)
// 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".
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.
GTM-XXXXXXX<GoogleTagManager> to root layoutsign_up as conversion in GA4 Admin > 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%.
// 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' });
Scroll Depth Threshold, Scroll Depth Units, Scroll Direction25,50,75,90scroll_depth, param scroll_percent = {{Scroll Depth Threshold}}Track which landing page sections users actually see (not just scroll past):
// Add to section elements
<section className="ga-section-tracking" data-section-name="features">
{/* content */}
</section>
data-section-name.ga-section-tracking, 50% visible, once per elementsection_view, param section_name = {{AEV - section-name}}Method A: No-Code (GTM only)
<button class="cta-signup" data-cta_text="Sign Up" data-cta_position="hero">
Create Account
</button>
.cta-signup, attribute data-cta_textClick Classes contains cta-signupMethod B: dataLayer (more reliable for dynamic content)
<button onClick={() => trackEvent('cta_click', { cta_text: 'Sign Up', cta_position: 'hero' })}>
Create Account
</button>
cta_clickSince you use Supabase + Google OAuth, fire sign_up after auth confirms:
// In your auth provider or layout
useEffect(() => {
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN' && session?.user) {
window.dataLayer?.push({
event: 'sign_up', // GA4 recommended event name
method: 'google', // Auth method
user_id: session.user.id // For User-ID tracking
});
}
});
return () => subscription.unsubscribe();
}, []);
Alternative: Trigger on redirect page (e.g., /dashboard or /auth/callback) if that's where new users land.
Critical: Mark sign_up as conversion in GA4 Admin > Events > Toggle "Mark as conversion".
Track what paid users do after sign-up:
// Strategy: Single event + feature_name parameter (scales better than separate events)
function useFeature(featureName: string) {
trackEvent('feature_use', {
feature_name: featureName,
feature_category: 'reports' // optional grouping
});
}
// Usage
useFeature('generate_report');
useFeature('export_csv');
useFeature('invite_team_member');
Why single event? GA4 limits unique event names (~500). Using feature_use with a feature_name dimension scales indefinitely.
Google Optimize sunset Sept 2023. DIY approach with cookies:
Next.js 16: Use
src/proxy.tsand exportproxy()instead ofmiddleware.ts. Next.js <=15: Usemiddleware.tsand exportmiddleware().
// src/proxy.ts - Assign variant server-side (prevents flicker)
import { NextResponse } from 'next/server'
export async function proxy(request) {
const response = NextResponse.next()
if (!request.cookies.get('exp_hero_cta')) {
const variant = Math.random() < 0.5 ? 'A' : 'B'
response.cookies.set('exp_hero_cta', variant, { maxAge: 60 * 60 * 24 * 30 })
}
return response
}
// Track with variant in all relevant events
const variant = cookies().get('exp_hero_cta')?.value || 'A'
trackEvent('cta_click', {
cta_text: variant === 'A' ? 'Start Trial' : 'Get Started',
experiment_variant: variant
});
Analyze: GA4 Explore > Create segments for experiment_variant = A vs B, compare conversion rates.
| Step | Tool | What to Check |
|---|---|---|
| 1 | GTM Preview | Tags fire at correct moments, parameters populated |
| 2 | GA4 DebugView | Events arrive with all params, correct names |
| 3 | GA4 Realtime | Live traffic appears within 30s |
| 4 | GA4 Reports | Data in standard reports (24-48h delay) |
Critical checks:
sign_up fires exactly once per conversioncta_text/cta_position| Topic | Reference |
|---|---|
| Event schemas & naming | EVENTS.md |
| Complete GTM configs | GTM-TAGS.md |
| Funnel analysis in GA4 | FUNNEL-ANALYSIS.md |
| DIY A/B testing | AB-TESTING.md |
| Troubleshooting | DEBUGGING.md |
sign_up, login, purchase) for default reports