Comment implementer des analytics avec Claude Code

Defis de l’implementation des analytics

La mesure du comportement des utilisateurs est la base de l’amelioration du produit, mais implementer le support de plusieurs services d’analytics, la prise en compte de la vie privee et l’impact sur les performances n’est pas une tache facile. Avec Claude Code, vous pouvez construire rapidement une infrastructure d’analytics extensible.

Couche de tracking d’evenements unifiee

> Cree une couche de tracking unifiee compatible avec plusieurs fournisseurs d'analytics.
> Elle doit pouvoir envoyer simultanement a Google Analytics, Mixpanel et une API personnalisee.

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(`Erreur de tracking pour ${p.name} :`, 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();

Fournisseur Google Analytics

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 });
  }
}

Utilisation avec les hooks React

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);
  };
}

// Exemple d'utilisation
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}>Ajouter au panier</button>;
}

Gestion de la vie privee (gestion du consentement)

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

Avec Claude Code, vous pouvez construire de maniere integrale une infrastructure d’analytics comprenant le tracking unifie vers plusieurs fournisseurs, les hooks React et la gestion de la vie privee. Pour l’integration avec les tests A/B, consultez le guide d’implementation des tests A/B ; pour la mesure des performances, consultez l’optimisation des performances.

Pour la configuration de Google Analytics, consultez la documentation officielle de GA4.