Como rodar testes AB em sites de e-commerce VTEX
Testes AB são essenciais para otimizar o desempenho do e-commerce, comparando diferentes versões de páginas ou recursos para ver qual apresenta melhor desempenho. Executar testes AB na VTEX não é uma necessidade nova: a plataforma teve uma ferramenta de teste AB nativa por anos, principalmente para comparar o desempenho entre suas versões (VTEX Legacy, VTEX IO e VTEX Fast Store). Mas desde que a VTEX o descontinuou oficialmente em 2023, as marcas tiveram que repensar sua stack de experimentação.
Neste post, vamos detalhar como o sistema antigo funcionava, os problemas que levaram à sua descontinuação, as alternativas disponíveis hoje e como executar testes rápidos, confiáveis e escaláveis na VTEX usando aCroct.
Como funcionava o teste AB nativo da VTEX que foi descontinuado
Os testes AB nativos da VTEX eram implementados pelo aplicativo da VTEX AB Tester. A configuração e o gerenciamento dos experimentos eram 100% dependentes dos desenvolvedores, já que eram realizados por meio da VTEX CLI, como este guia oficial mostra. O conceito era simples:
- Você criava um workspaces com suas alterações nas variantes (interface do usuário, layout ou funcionalidade).
- O aplicativo dividia o tráfego de sessões entre o workspace master(controle) e o workspace de produção (variante).
- Os usuários eram agrupados e permaneciam na versão atribuída durante todo o teste.
- Os resultados (sessões, conversões, receita) eram exibidos no painel da VTEX.
Os testes tinham que ser finalizados manualmente no painel da VTEX, e os dados eram mantidos por apenas 30 dias, após os quais eram eliminados. Por fim, o workspace vencedor podia ser promovido a master, tornando as alterações disponíveis para todos os usuários.
Além da alta dependência de desenvolvedores, o app contava com limitações conhecidas. Alguns exemplos incluiam métricas mal calculadas (sessões e conversões às vezes mostravam valores incorretos) e roteamento de requests inconsistente (os usuários poderiam ver versões diferentes entre as solicitações).
Por esses e outros motivos, a VTEX descontinuou o aplicativo em 2023.
Ferramentas mais usadas para testes AB na VTEX
Com a descontinuação dos testes AB nativos, as lojas VTEX agora depende de ferramentas de terceiros. Hoje, a maioria dos lojistas realiza testes na VTEX por meio de 3 tipos de ferramenta:
- Ferramentas client-side com editor visual, como VWO, Convert e Adobe Target.
- Ferramentas open-source de feature flag, como GrowthBook e FlagSmith.
- Plataformas headless de personalização e experimentação como Optimizely e Croct.
Como a maioria dos sites de e-commerce depende muito de ótimo desempenho e tempo de carregamento rápido da página para manter altas taxas de conversão, integrar conteúdo dinâmico no server-site é a opção mais recomendada, o que nos deixa entre a segunda e a terceira alternativas.
O problema do client-side com editores visuais
Se você já usou um editor visual de uma plataforma de testes no client-side, provavelmente conhece o efeito flicker: o conteúdo original pisca antes do carregamento da variante. Isso acontece porque o DOM está sendo reescrito após a renderização da página, o que:
- Prejudica o desempenho e diminui as pontuações do Core Web Vitals.
- Corre o risco de penalidades de SEO por conteúdo inconsistente.
- Pode ser bloqueado por ad bloquers.
Neste guia, abordamos os prós, os contras e todas as consequências do uso desse tipo de ferramenta para otimização de conversão.
A dependência excessiva de desenvolvedores no uso de feature flags
Ferramentas como GrowthBook e FlagSmith estão entre as principais opções para garantir um bom desempenho de site. Os desenvolvedores utilizam amplamente as ferramentas de feature flag para implementar e testar mudanças gradualmente, tornando-as úteis para experimentação controlada no backend.
No entanto, embora não cause flicker ou problemas de velocidade da página, elas:
- Requerem participação de um desenvolvedor em cada etapa do processo
- Podem adicionar complexidade à base de código
- Normalmente não fornece análises
A flexibilidade do CMS de componentes com conteúdo dinâmico
Optimizely e Croct estão entre as principais recomendações para VTEX porque foram desenvolvidos para serem headless, são rápidos e se integrarem nativamente sem interferir na renderização da plataforma.
Por meio de um CMS para componente, essas ferramentas oferecem testes AB e personalização diretamente no CMS, integram-se perfeitamente com a VTEX e permitem que os times gerenciem experimentos sem depender excessivamente de desenvolvedores.
Algumas das vantagens incluem:
- Sem flicker ou problemas de desempenho
- Requer apenas uma única implementação
- Permite que usuários não técnicos configurem e gerenciem experimentos
- Possui integrações com o design system e ajuda a garantir as diretrizes da marca
Como usar a Croct com em sites VTEX
A Croct funciona como uma API headless que entrega conteúdo personalizado e de teste no servidor ou durante a hidratação, evitando flickering e preservando o desempenho do site. Você pode integrá-la à VTEX de duas maneiras, dependendo da versão da VTEX na qual seu e-commerce foi criado.
VTEX Legacy e VTEX Fast Store
Para as versões mais antigas e mais recentes da VTEX, você deve usar os SDKs da Croct para trackear eventos e fazer o fetch do conteúdo dinâmico. Se o site usa Next.js, este template pode ajudá-lo a integrar em menos de um minuto com apenas um comando:
npx croct@latest use croct://starter/nextjsVTEX IO
Como a VTEX não permite a personalização direta de seus componentes, para a VTEX IO, você precisará duplicá-los e criar versões customizadas deles.
Siga este guia da própria VTEX ou confira este exemplo para desenvolver componentes personalizados e use o conteúdo provido pela API da Croct em vez de deixá-lo cravado no código ou buscá-lo no CMS da VTEX. Dessa forma, o conteúdo já estará personalizado quando a VTEX o renderizar.
Precisa de ajuda?
Para otimizar seus experimentos e jornadas personalizadas para melhor desempenho com a Croct, crie uma conta gratuita ou verifique a documentação completa.
Nosso time possui vasta experiência com sites de e-commerce da VTEX, então sinta-se à vontade para agendar uma reunião técnica com a gente. Garantimos que você terá tudo o que precisa para integrar em poucas horas.