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 Hook에서 활용

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 Hook, 프라이버시 대응까지 애널리틱스 인프라를 일관되게 구축할 수 있습니다. A/B 테스트와의 연동은 A/B 테스트 구현 가이드를, 성능 측정은 성능 최적화를 참고하세요.

Google Analytics 설정에 대해서는 GA4 공식 문서를 확인하세요.