A/B 테스트로 전환율 올리기

❌ 나쁨: "버튼 색을 빨간색으로 바꾸면 클릭이 늘 것이다"
✅ 좋음: "현재 CTA 버튼이 페이지 색과 비슷해서 잘 안 보인다.
        대비를 높이면 (3:1 → 7:1) 클릭률이 30% 오를 것이다"

const A_B_TEST = {
  primaryMetric: '결제 페이지 도달률',  // 0.05 → 0.07 목표
  secondaryMetrics: ['CTA 클릭률', '체류 시간', '바운스율'],
  guardrails: ['총 매출은 감소하지 않을 것'],
};

// 통계적 유의성을 위한 최소 표본 수
function calculateSampleSize(baselineRate, mde, alpha = 0.05, power = 0.8) {
  // baselineRate: 현재 전환율 (0.05 = 5%)
  // mde: 최소 감지 효과 (0.01 = 1%p 차이를 감지하고 싶음)
  const z_alpha = 1.96;  // 95% 신뢰구간
  const z_beta = 0.84;   // 80% 검정력

  const p = baselineRate;
  const sigma = Math.sqrt(2 * p * (1 - p));
  const n = Math.ceil(Math.pow((z_alpha + z_beta) * sigma / mde, 2));
  return n;  // 변형당 최소 표본 수
}

console.log(calculateSampleSize(0.05, 0.01));  // ≈ 7,663명/변형

// app/components/ABTestProvider.tsx
'use client';
import { useEffect, useState } from 'react';

type Variant = 'A' | 'B';

export function useABTest(experimentId: string): Variant {
  const [variant, setVariant] = useState<Variant>('A');

  useEffect(() => {
    const stored = localStorage.getItem(`ab_${experimentId}`);
    if (stored === 'A' || stored === 'B') {
      setVariant(stored);
      return;
    }

    // 50:50 균등 분할 — userId 해시 기반 (재방문 시 일관)
    const userId = localStorage.getItem('userId') || crypto.randomUUID();
    localStorage.setItem('userId', userId);

    const hash = userId.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0);
    const v: Variant = hash % 2 === 0 ? 'A' : 'B';

    setVariant(v);
    localStorage.setItem(`ab_${experimentId}`, v);

    // GA4 이벤트로 변형 추적
    window.gtag?.('event', 'experiment_impression', {
      experiment_id: experimentId,
      variant: v,
    });
  }, [experimentId]);

  return variant;
}

// 사용
export function CTAButton() {
  const variant = useABTest('cta_button_2026_04');

  if (variant === 'A') {
    return <button className="bg-indigo-500">시작하기</button>;
  }
  return <button className="bg-emerald-500">무료로 시작하기 →</button>;
}

// Z-test for proportions
function zTestProportions(
  conversionsA: number, totalA: number,
  conversionsB: number, totalB: number,
): { pValue: number; significant: boolean; lift: string } {
  const pA = conversionsA / totalA;
  const pB = conversionsB / totalB;
  const pPooled = (conversionsA + conversionsB) / (totalA + totalB);

  const se = Math.sqrt(pPooled * (1 - pPooled) * (1/totalA + 1/totalB));
  const z = (pB - pA) / se;
  const pValue = 2 * (1 - normalCDF(Math.abs(z)));

  return {
    pValue: Number(pValue.toFixed(4)),
    significant: pValue < 0.05,  // 95% 신뢰
    lift: ((pB - pA) / pA * 100).toFixed(1) + '%',
  };
}

function normalCDF(x: number): number {
  // 표준 정규 분포 CDF 근사
  const a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741;
  const a4 = -1.453152027, a5 = 1.061405429, p = 0.3275911;
  const sign = x < 0 ? -1 : 1;
  x = Math.abs(x) / Math.sqrt(2);
  const t = 1 / (1 + p * x);
  const y = 1 - (((((a5*t + a4)*t) + a3)*t + a2)*t + a1)*t * Math.exp(-x*x);
  return 0.5 * (1 + sign * y);
}

// 예시
const result = zTestProportions(100, 1000, 130, 1000);
console.log(result);
// { pValue: 0.0489, significant: true, lift: '30.0%' }

const COMMON_MISTAKES = {
  earlyStop: {
    bad: '3일 만에 통계적으로 유의해 보이면 중단',
    fix: '최소 1주 이상 + 표본 수 계산값 도달 후 판단',
  },
  multipleTesting: {
    bad: '한 번에 5개 변경사항 동시 테스트',
    fix: 'A/B/C 다변량 테스트는 표본 수 폭증 — 일대일 비교 권장',
  },
  goodhartLaw: {
    bad: '클릭률만 최적화 → 매출은 오히려 감소',
    fix: '주 지표(매출) + 보조 지표(클릭률) + 가드레일(이탈율) 동시 추적',
  },
};