A/B test em landing pages: guia técnico

O A/B test errado piora o SEO e engana a análise. Isso não é exagero — existe uma forma específica de implementar split testing que o Google detecta e pode penalizar como cloaking (mostrar conteúdo diferente para o bot do que para o usuário). E existe uma forma de declarar vencedor antes da amostra ser suficientemente grande que resulta em decisões baseadas em ruído estatístico, não em dados.

A maioria dos tutoriais de A/B test aborda o lado de marketing da equação: o que testar, como formular hipóteses, como interpretar resultados. Poucos entram na implementação técnica — que é onde os erros acontecem. Este artigo cobre a implementação correta de A/B tests em landing pages modernas, com foco em Next.js e Vercel, mas com princípios aplicáveis a qualquer stack estática.

Flicker Effect: Como Evitar o Flash de Conteúdo

O flicker effect (também chamado de FOOC — Flash of Original Content) é o fenômeno visual onde o usuário vê brevemente a versão original da página antes de ser redirecionado para a variante. Acontece quando o split test é implementado no lado do cliente (JavaScript rodando no browser após o carregamento inicial).

O Google recomenda explicitamente contra A/B tests com flicker: além de degradar a experiência do usuário, o bot do Google pode indexar a variante que não é a canônica, criando confusão de conteúdo.

A solução é implementar o split no servidor ou na edge — antes de qualquer HTML ser enviado para o browser. Com Vercel Edge Middleware, isso é trivial:

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const EXPERIMENT_COOKIE = 'ab-lp-headline'
const VARIANTS = ['control', 'variant-a', 'variant-b']

export function middleware(request: NextRequest) {
  const url = request.nextUrl.clone()

  // Só aplica o teste na landing page específica
  if (url.pathname !== '/landing-page-servico') {
    return NextResponse.next()
  }

  // Verifica se o usuário já tem variante atribuída
  let variant = request.cookies.get(EXPERIMENT_COOKIE)?.value

  // Se não tem, atribui aleatoriamente
  if (!variant || !VARIANTS.includes(variant)) {
    variant = VARIANTS[Math.floor(Math.random() * VARIANTS.length)]
  }

  // Reescreve a URL internamente para a rota da variante
  // O usuário vê /landing-page-servico, mas serve /landing-page-servico/[variant]
  url.pathname = `/landing-page-servico/${variant}`

  const response = NextResponse.rewrite(url)

  // Persiste a variante por 30 dias
  response.cookies.set(EXPERIMENT_COOKIE, variant, {
    maxAge: 60 * 60 * 24 * 30,
    sameSite: 'strict',
  })

  return response
}

export const config = {
  matcher: '/landing-page-servico',
}

Com essa implementação, o usuário recebe diretamente o HTML da variante correta — zero flicker, zero client-side JavaScript para o split, e o Google bot sempre recebe a variante "control" (que mantém a canonical tag correta).

A/B Test com Vercel Edge Middleware

A estrutura de pastas para suportar o middleware acima:

app/
  landing-page-servico/
    control/
      page.tsx    # Versão original
    variant-a/
      page.tsx    # Headline alternativa
    variant-b/
      page.tsx    # CTA alternativo

Cada variante deve ter a mesma canonical tag apontando para a URL canônica principal:

// app/landing-page-servico/variant-a/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://seusite.com/landing-page-servico',
  },
}

Isso garante que o Google nunca indexe as URLs das variantes — apenas a URL canônica.

Para rastrear qual variante o usuário está vendo e correlacionar com conversões, envie o nome da variante como propriedade para o Google Analytics 4:

// Em cada componente de variante, ao montar
useEffect(() => {
  window.gtag('event', 'ab_test_exposure', {
    experiment_id: 'lp-headline-test-2024-10',
    variant_id: 'variant-a',
  })
}, [])

Calculando Tamanho de Amostra Necessário

Antes de iniciar o teste, calcule o tamanho de amostra necessário para detectar o efeito mínimo que é relevante para o seu negócio.

Taxa de Conversão Atual	MDE (Mínimo Efeito Detectável)	Amostra por Variante
2%	20% relativo (→ 2,4%)	~20.000 visitantes
2%	50% relativo (→ 3,0%)	~6.400 visitantes
5%	20% relativo (→ 6,0%)	~8.000 visitantes
5%	50% relativo (→ 7,5%)	~2.600 visitantes
10%	20% relativo (→ 12%)	~3.800 visitantes

Calculado para 95% de confiança e 80% de poder estatístico com duas variantes.

O MDE (Mínimo Efeito Detectável) é a menor melhoria que seria relevante para você agir. Se sua conversão atual é 2% e uma melhoria de 0,1% não justificaria o esforço de implementar a variante vencedora, seu MDE real é maior — e você precisa de menos amostra.

Se o seu site não tem tráfego suficiente para completar um A/B test em tempo razoável (menos de 4-6 semanas), considere:

1. Testar mudanças maiores (headlines completamente diferentes, não variações sutis)
2. Usar testes multivariados em vez de A/B para testar múltiplos elementos simultaneamente
3. Usar análise qualitativa (session recordings, user interviews) em vez de A/B test

Interpretando Resultados: Quando Declarar Vencedor

O erro mais comum é "peaking" — verificar os resultados durante o teste e interrompê-lo assim que uma variante parecer vencedora. Isso infla artificialmente a taxa de falsos positivos.

A regra correta: defina antes de iniciar o teste qual será a duração (não o número de conversões como critério de parada) e cumpra isso independente do que os dados intermediários mostrem.

Para interpretar o resultado final, verifique:

1. P-value < 0.05: A probabilidade do resultado ser aleatório é menor que 5%. Isso é o mínimo para declarar significância.
2. Intervalo de confiança não inclui zero: O intervalo de confiança do lift deve ser inteiramente positivo ou inteiramente negativo.
3. Duas semanas completas: Independente do volume, a duração mínima garante a eliminação do viés de dias da semana.
4. Segmentação consistente: Verifique se a distribuição de tráfego entre variantes foi realmente 50/50 durante o teste. Distorções na distribuição invalidam o teste.

Se a variante B venceu por p=0,047 mas o intervalo de confiança é [+0,1%, +8,3%], o resultado é estatisticamente significativo mas o efeito real pode ser tão pequeno quanto 0,1% — o que pode não justificar a troca. Contextualize o resultado com o impacto de negócio, não só com a significância estatística.

Conclusão

A/B test feito corretamente é uma das ferramentas mais poderosas de melhoria de conversão. Feito incorretamente — com flicker, sem significância estatística adequada, ou com implementação que afeta o SEO — é uma fonte de decisões erradas.

A implementação com Vercel Edge Middleware resolve os problemas técnicos estruturalmente: sem flicker, sem impacto no SEO, com rastreamento correto de variantes. No SystemForge, construímos landing pages com essa arquitetura de experimentação já preparada — para que seu time de marketing possa rodar testes sem precisar de um desenvolvedor para cada iteração.