google-analytics
GA4 analytics for Next.js, React, and React Native (Firebase). Covers setup, page views, custom events, e-commerce tracking, and event design. Use when implementing user behavior analytics.
When & Why to Use This Skill
This Claude skill provides a comprehensive framework for implementing Google Analytics 4 (GA4) across Next.js, React, and React Native platforms. It streamlines the integration process by offering standardized code patterns for event tracking, e-commerce funnels, and user identification. By enforcing best practices like centralized analytics modules, snake_case naming conventions, and GDPR-compliant consent modes, it ensures high-quality data taxonomy and robust user behavior insights for developers and growth teams.
Use Cases
- Next.js GA4 Integration: Implementing optimized tracking using @next/third-parties to maintain high Core Web Vitals scores.
- Centralized Analytics Architecture: Creating a unified 'Analytics' module to prevent scattered tracking calls and ensure consistent data across web and mobile apps.
- E-commerce Funnel Tracking: Setting up standard GA4 schemas for 'view_item', 'add_to_cart', and 'purchase' events to monitor conversion rates.
- GDPR & Privacy Compliance: Configuring Consent Mode to dynamically manage analytics storage permissions based on user preferences.
- Cross-Platform Event Design: Designing a consistent event taxonomy for React web and React Native (Firebase) applications using snake_case parameters.
| name | google-analytics |
|---|---|
| description | | |
| Use when | implementing analytics, tracking user events, e-commerce tracking. |
| Do not use for | general performance optimization (use performance-patterns skill). |
| Workflow | Set up after core features are built. |
Google Analytics (GA4)
For Nextjs with GA4, see NextjsGA4 docs.
Setup
For setup instructions:
- Next.js: See @next/third-parties docs
- ExpoReact Native: See @expo/react-native-google-analytics
Event Naming
Rule: Use snake_case for all event names and parameters.
// ✅ Good
{ event: 'add_to_cart', item_id: 'SKU123' }
// ❌ Bad
{ event: 'AddToCart', itemId: 'SKU123' }
Event Taxonomy
Wrap analytics calls in a centralized module:
// lib/analytics.ts
export const Analytics = {
// Auth
signUp: (method: string) => track('sign_up', { method }),
login: (method: string) => track('login', { method }),
// E-commerce
viewItem: (item: Item) => track('view_item', {
currency: 'USD',
value: item.price,
items: [{ item_id: item.id, item_name: item.name, price: item.price }],
}),
addToCart: (item: Item, quantity: number) => track('add_to_cart', {
currency: 'USD',
value: item.price * quantity,
items: [{ item_id: item.id, item_name: item.name, quantity }],
}),
purchase: (txId: string, value: number, items: Item[]) => track('purchase', {
transaction_id: txId,
value,
currency: 'USD',
items: items.map(i => ({ item_id: i.id, item_name: i.name, price: i.price })),
}),
// Engagement
search: (term: string) => track('search', { search_term: term }),
};
Rule: Never call tracking functions directly in components. Use centralized Analytics object.
E-commerce Flow
Standard GA4 e-commerce funnel:
view_item → add_to_cart → begin_checkout → purchase
Rule: Mark conversions in GA4 Admin → Events → Toggle "Mark as conversion"
User Tracking
| Action | Event/Config |
|---|---|
| Set user ID | config with user_id after login |
| User properties | set with user_properties |
Consent Mode (GDPR)
| State | Action |
|---|---|
| Before consent | consent: 'default' with analytics_storage: 'denied' |
| After consent | consent: 'update' with analytics_storage: 'granted' |
Quick Checklist
- GA4 measurement ID configured
- Events use snake_case naming
- Centralized Analytics module (not scattered tracking calls)
- Conversions marked in GA4 Admin
- E-commerce events follow standard schema
- Consent mode implemented (if GDPR applies)