Claude Code के साथ Analytics कैसे Implement करें

Analytics Implementation की Challenges

User behavior measurement product improvement की नींव है, लेकिन multiple analytics services के साथ compatibility, privacy considerations, और performance पर impact को ध्यान में रखकर implementation करना आसान नहीं है। Claude Code से extensible analytics infrastructure जल्दी बनाई जा सकती है।

Unified Event Tracking Layer

> Multiple analytics providers को support करने वाला unified tracking layer बनाओ।
> Google Analytics, Mixpanel, और custom API पर simultaneously send कर सको।

interface TrackingEvent {
  name: string;
  properties?: Record<string, any>;
  timestamp?: Date;
}

interface AnalyticsProvider {
  name: string;
  track(event: TrackingEvent): void;
  pageView(path: string, title: string): void;
  identify(userId: string, traits?: Record<string, any>): void;
}

class AnalyticsManager {
  private providers: AnalyticsProvider[] = [];
  private queue: TrackingEvent[] = [];
  private isReady = false;

  addProvider(provider: AnalyticsProvider) {
    this.providers.push(provider);
  }

  track(name: string, properties?: Record<string, any>) {
    const event: TrackingEvent = { name, properties, timestamp: new Date() };

    if (!this.isReady) {
      this.queue.push(event);
      return;
    }

    this.providers.forEach((p) => {
      try { p.track(event); }
      catch (e) { console.warn(`${p.name} tracking error:`, e); }
    });
  }

  pageView(path: string, title: string) {
    this.providers.forEach((p) => p.pageView(path, title));
  }

  identify(userId: string, traits?: Record<string, any>) {
    this.providers.forEach((p) => p.identify(userId, traits));
  }

  flush() {
    this.isReady = true;
    this.queue.forEach((event) => this.track(event.name, event.properties));
    this.queue = [];
  }
}

export const analytics = new AnalyticsManager();

Google Analytics Provider

class GAProvider implements AnalyticsProvider {
  name = 'Google Analytics';

  track(event: TrackingEvent) {
    window.gtag?.('event', event.name, event.properties);
  }

  pageView(path: string, title: string) {
    window.gtag?.('event', 'page_view', { page_path: path, page_title: title });
  }

  identify(userId: string) {
    window.gtag?.('set', { user_id: userId });
  }
}

React Hooks में उपयोग

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export function usePageTracking() {
  const location = useLocation();

  useEffect(() => {
    analytics.pageView(location.pathname, document.title);
  }, [location.pathname]);
}

export function useTrackEvent() {
  return (name: string, properties?: Record<string, any>) => {
    analytics.track(name, properties);
  };
}

// Usage example
function ProductPage({ product }: { product: Product }) {
  const trackEvent = useTrackEvent();

  const handleAddToCart = () => {
    trackEvent('add_to_cart', {
      productId: product.id,
      price: product.price,
      category: product.category,
    });
  };

  return <button onClick={handleAddToCart}>Cart में Add करें</button>;
}

Privacy Compliance (Consent Management)

class ConsentManager {
  private consent: Record<string, boolean> = {};

  setConsent(category: string, allowed: boolean) {
    this.consent[category] = allowed;
    localStorage.setItem('analytics_consent', JSON.stringify(this.consent));
  }

  isAllowed(category: string): boolean {
    return this.consent[category] ?? false;
  }

  loadSavedConsent() {
    const saved = localStorage.getItem('analytics_consent');
    if (saved) this.consent = JSON.parse(saved);
  }
}

Summary

Claude Code का उपयोग करके, multiple providers के लिए unified tracking, React hooks, और privacy compliance तक analytics infrastructure consistently बनाई जा सकती है। A/B testing integration के लिए A/B Testing Implementation Guide देखें, और performance measurement के लिए Performance Optimization देखें।

Google Analytics setup के बारे में GA4 Official Documentation देखें।