google-analytics

zzoohub's avatarfrom zzoohub

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.

0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026

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.
namegoogle-analytics
description|
Use whenimplementing analytics, tracking user events, e-commerce tracking.
Do not use forgeneral performance optimization (use performance-patterns skill).
WorkflowSet up after core features are built.

Google Analytics (GA4)

For Nextjs with GA4, see NextjsGA4 docs.


Setup

For setup instructions:


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)