Teste A/B em TypeScript: como não adivinhar na borra de café

A vida antes dos testes A/B: por que a intuição falha

Você já discutiu com um designer sobre qual botão é melhor — vermelho ou azul? Ou com um gerente sobre qual título atrairá mais cliques? Antes, essas disputas eram resolvidas com voz alta ou posição hierárquica. Hoje, temos o teste A/B em TypeScript — um método científico que transforma suposições em dados.

Imagine: você lança uma loja online. Parece que adicionar avaliações na página do produto aumentará as vendas. E se remover o carrossel de imagens e deixar apenas uma foto grande? Sem o teste de divisão, você nunca saberá a verdade. É aqui que o TypeScript entra em cena — a tipagem forte e as ferramentas modernas tornam os testes A/B confiáveis e práticos.

O que é teste A/B em termos simples

O teste A/B (também chamado de teste de divisão) é um experimento no qual dois grupos de usuários veem versões diferentes de um mesmo elemento. O grupo de controle (A) vê a versão atual, o grupo experimental (B) vê a versão modificada. Em seguida, comparamos métricas: conversão, tempo no site, cliques.

Por que isso é importante? Porque mesmo gerentes de produto experientes erram em 70% dos casos. O teste de hipóteses com testes A/B permite tomar decisões baseadas em dados, e não na intuição. O TypeScript adiciona segurança de tipos e facilidade de desenvolvimento a isso.

Como funciona o teste A/B em aplicações TypeScript

Em aplicações TypeScript, o teste A/B geralmente é implementado através de:

• Distribuição de usuários — qual variante mostrar para um usuário específico
• Rastreamento de eventos — coleta de dados sobre as ações do usuário
• Análise de resultados — cálculo da significância estatística

Vamos analisar cada etapa com um exemplo. Suponha que queremos testar um novo título na página de login. Veja como fica no código:

// Definindo tipos para o experimentotype ExperimentVariant = 'control' | 'variant';type ExperimentConfig = {  id: string;  variants: ExperimentVariant[];  weights: number[]; // a soma deve ser 100};

// Configuração do teste A/Bconst headlineExperiment: ExperimentConfig = {  id: 'headline_test_2024',  variants: ['control', 'variant'],  weights: [50, 50] // 50% veem o título antigo, 50% veem o novo};

// Função de distribuição aleatóriafunction assignVariant(config: ExperimentConfig): ExperimentVariant {  const random = Math.random() * 100;  let cumulativeWeight = 0;    for (let i = 0; i < config.variants.length; i++) {    cumulativeWeight += config.weights[i];    if (random < cumulativeWeight) {      return config.variants[i];    }  }    return config.variants[0]; // fallback}

// Usoconst userVariant = assignVariant(headlineExperiment);console.log(`O usuário receberá a variante: ${userVariant}`);

Segmentação de usuários: para evitar confusão

É importante que um mesmo usuário veja sempre a mesma variante. Caso contrário, os dados serão corrompidos. Para isso, usamos o identificador do usuário ou cookies:

function getStableVariant(  userId: string,   config: ExperimentConfig): ExperimentVariant {  // Usamos um hash do userId para distribuição determinística  const hash = simpleHash(userId + config.id);  const normalizedHash = hash % 100;    let cumulativeWeight = 0;  for (let i = 0; i < config.variants.length; i++) {    cumulativeWeight += config.weights[i];    if (normalizedHash < cumulativeWeight) {      return config.variants[i];    }  }    return config.variants[0];}

function simpleHash(str: string): number {  let hash = 0;  for (let i = 0; i < str.length; i++) {    const char = str.charCodeAt(i);    hash = ((hash << 5) - hash) + char;    hash |= 0; // Conv