Claude Codeでアナリティクスを実装する方法

アナリティクス実装の課題

ユーザー行動の計測はプロダクト改善の土台ですが、複数のアナリティクスサービスへの対応、プライバシー配慮、パフォーマンスへの影響を考慮した実装は簡単ではありません。Claude Codeなら、拡張性のあるアナリティクス基盤を素早く構築できます。

統一的なイベントトラッキング層

> 複数のアナリティクスプロバイダに対応した統一トラッキングレイヤーを作って。
> Google Analytics、Mixpanel、独自APIに同時送信できるようにして。

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}のトラッキングエラー:`, 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プロバイダ

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フックでの活用

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

// 使用例
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}>カートに追加</button>;
}

プライバシー対応（同意管理）

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

まとめ

Claude Codeを使えば、複数プロバイダへの統一トラッキング、Reactフック、プライバシー対応までアナリティクス基盤を一貫して構築できます。A/Bテストとの連携はA/Bテスト実装ガイドを、パフォーマンス計測はパフォーマンス最適化を参照してください。

Google Analyticsの設定についてはGA4公式ドキュメントをご覧ください。