Boas Práticas

Se [MUDARMOS X]
Então [ESPERAMOS Y]
Porque [ACREDITAMOS Z]

Se mudarmos o CTA de "Comece Grátis" para "Experimente Agora"
Então esperamos um aumento de 15% na taxa de conversão
Porque "Experimente" transmite menos compromisso e remove fricção

Vamos testar um botão diferente para ver se converte mais

// ✅ BOM - Testa apenas o texto do CTA
const { variant } = useExperiment('cta-text-test');

const buttonText = variant === 'variant-b' 
  ? 'Experimente Agora' 
  : 'Comece Grátis';

return (
  <button className="btn-primary" onClick={handleClick}>
    {buttonText}
  </button>
);

// ❌ RUIM - Muda texto + cor + tamanho + posição
if (variant === 'variant-b') {
  return (
    <button className="btn-large btn-green text-center">
      Experimente Agora
    </button>
  );
} else {
  return (
    <button className="btn-small btn-blue text-left">
      Comece Grátis
    </button>
  );
}

Variante B ganhou com 20% mais conversões!

Mas foi por causa de:
- Texto diferente? 🤔
- Cor verde? 🤔
- Tamanho maior? 🤔
- Posição centralizada? 🤔

Resposta: Você nunca saberá.

Amostra Mínima = 16 × (σ² / Δ²)

Onde:
σ = desvio padrão (geralmente ~0.5 para conversão)
Δ = diferença mínima detectável (ex: 0.05 para 5%)

Exemplo:
Para detectar diferença de 5% com 95% de confiança:
16 × (0.5² / 0.05²) = 1.600 visitantes por variante

// 1. HIPÓTESE (documentada no código)
/**
 * Experimento: Hero CTA Text
 * 
 * Hipótese: 
 * Se mudarmos "Comece Grátis" para "Experimente Agora"
 * Então teremos mais cliques (meta: +15%)
 * Porque "Experimente" sugere menos compromisso
 * 
 * Data de início: 2024-01-15
 * Tráfego alvo: 5.000 visitantes
 * Duração esperada: 2 semanas
 */

export function HeroSection() {
  const { variant, loading, error, convert } = useExperiment('hero-cta-text');

  // 2. FALLBACK (sempre!)
  if (loading) return <HeroSkeleton />;
  if (error) {
    console.error('Experiment error:', error);
    return <HeroDefault />; // Versão que sempre funciona
  }

  // 3. LÓGICA CLARA
  const ctaText = variant === 'variant-b' 
    ? 'Experimente Agora' 
    : 'Comece Grátis';

  // 4. CONVERSÃO BEM DEFINIDA
  const handleCTA = () => {
    convert('hero_cta_clicked'); // Nome descritivo
    window.location.href = '/signup';
  };

  // 5. IMPLEMENTAÇÃO LIMPA
  return (
    <section className="hero">
      <h1>Transforme seu produto com dados</h1>
      <button onClick={handleCTA} className="btn-primary">
        {ctaText}
      </button>
    </section>
  );
}

Experimento: Hero CTA Text
Duração: 14 dias
Tráfego: 10.000 visitantes

Variante A (Controle):
- 5.000 visitantes
- 250 conversões
- Taxa: 5.0%

Variante B:
- 5.000 visitantes
- 325 conversões
- Taxa: 6.5%

Resultado: +30% de melhoria
Significância: 97%
Decisão: ✅ Implementar Variante B

❌ Apenas 3 dias de teste
❌ Apenas 50 conversões por variante
❌ Significância de 85% (abaixo de 95%)
❌ Taxa oscila muito (um dia +20%, outro dia -10%)

// Experimentos independentes na mesma página
function LandingPage() {
  const heroTest = useExperiment('hero-headline');
  const pricingTest = useExperiment('pricing-layout');
  const ctaTest = useExperiment('footer-cta');

  return (
    <>
      <Hero variant={heroTest.variant} />
      <Pricing variant={pricingTest.variant} />
      <Footer variant={ctaTest.variant} />
    </>
  );
}

// NÃO faça isso - testa o mesmo elemento
const test1 = useExperiment('cta-text');      // Testa texto
const test2 = useExperiment('cta-color');     // Testa cor
const test3 = useExperiment('cta-position');  // Testa posição

// Resultado: Confusão! Qual mudança causou a diferença?

❌ RUIM:
Dia 1: Variante B está ganhando! (75% vs 55%)
Dia 3: Variante A recuperou! (60% vs 62%)
Dia 5: Empate técnico... (58% vs 58%)
Dia 7: Variante B na frente! Vamos implementar! (61% vs 58%)

✅ BOM:
Defina duração ANTES: 14 dias
Aguarde até o fim
Analise com significância estatística
Tome decisão baseada em dados completos

❌ RUIM:
Semana 1: Testando "Comece Grátis" vs "Experimente Agora"
Semana 2: Hmm, vou adicionar um emoji 🚀 na Variante B
Resultado: Dados invalidados

✅ BOM:
Defina as variantes ANTES
Não mude nada durante o teste
Se precisar mudar, crie um NOVO experimento

❌ RUIM:
Segunda-feira: Iniciou teste
Sexta-feira: Variante B ganhando!
Implementar agora!

Problema: Comportamento varia por dia da semana

✅ BOM:
Rode pelo menos 1 semana COMPLETA
Melhor ainda: 2 semanas completas
Capture todos os dias da semana

Você roda 20 testes A/B.
Por pura chance estatística, 1 vai mostrar "melhoria" de 50%.
Mas quando você implementa, o efeito desaparece.

✅ SOLUÇÃO:
- Espere significância ≥95%
- Tenha tamanho de amostra adequado
- Teste novamente para confirmar (se possível)

# Experimento: Hero CTA Text

## Hipótese
Se mudarmos o CTA de "Comece Grátis" para "Experimente Agora"
Então esperamos +15% de conversão
Porque "Experimente" reduz percepção de compromisso

## Setup
- **ID**: `hero-cta-text`
- **Página**: Homepage
- **Início**: 2024-01-15
- **Fim**: 2024-01-29
- **Tráfego alvo**: 5.000 visitantes

## Variantes
- **Controle**: "Comece Grátis"
- **Variante B**: "Experimente Agora"

## Resultados
- **Controle**: 5.000 visitantes, 250 conversões (5.0%)
- **Variante B**: 5.000 visitantes, 325 conversões (6.5%)
- **Melhoria**: +30%
- **Significância**: 97%

## Decisão
✅ Implementar Variante B

## Aprendizados
- Copy que reduz compromisso performa melhor
- Efeito foi consistente em mobile e desktop
- Maior impacto em usuários novos (vs recorrentes)

## Próximos Passos
- Testar variação "Teste Grátis por 14 Dias"
- Aplicar aprendizado em outras CTAs do site

📊 Experimentos Testly

🟢 Ativos
├─ Hero CTA Text (2 semanas restantes)
└─ Pricing Layout (4 semanas restantes)

⏸️ Em Análise
└─ Footer Social Proof (aguardando significância)

✅ Completos
├─ Homepage Headline → Variante B venceu (+25%)
├─ Signup Form Fields → Empate (sem mudança)
└─ Trial Duration Copy → Variante C venceu (+18%)

❌ Invalidados
└─ Mobile Menu (erro técnico, reiniciar)

Experimento: Pricing Layout

Métricas Primárias:
✅ Conversão: +15% (variante B vence)

Métricas Secundárias:
⚠️ Valor médio do pedido: -8% (variante B)
⚠️ Taxa de cancelamento: +12% (variante B)

Decisão: ❌ NÃO implementar
Razão: Apesar de mais conversões, usuários escolhem planos mais baratos e cancelam mais

Prioridade 1: Signup flow
Prioridade 2: Pricing page
Prioridade 3: Homepage hero
Prioridade 4: Onboarding

Prioridade 1: Product page CTAs
Prioridade 2: Checkout flow
Prioridade 3: Homepage offers
Prioridade 4: Category pages

Prioridade 1: Newsletter signup placement
Prioridade 2: Article headlines
Prioridade 3: Social share buttons
Prioridade 4: Related content