--- title: "Como rodar testes AB em sites de e-commerce VTEX" slug: "teste-ab-vtex" locale: "pt-br" description: "AB testing is critical for optimizing e-commerce performance by comparing different versions of pages or features to see which performs better. In this post, we’ll break down your alternatives to run fast, reliable, and scalable tests on VTEX Legacy, VTEX IO, or VTEX Fast Store." published_at: "2025-08-14" updated_at: "2025-10-14" image: "https://storage.googleapis.com/croct-assets-b931d070/blog/Como_rodar_testes_AB_em_sites_de_e_commerce_VTEX_34fe4b6475/Como_rodar_testes_AB_em_sites_de_e_commerce_VTEX_34fe4b6475.png" authors: ["Juliana Amorim"] category: "Experimentação" tags: ["Teste A/B","Otimização de Taxa de Conversão (CRO)","Como fazer","E-commerce"] canonical: "https://blog.croct.com/pt-br/post/teste-ab-vtex" --- # 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](https://developers.vtex.com/docs/apps/vtexarg.abtester). 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](https://developers.vtex.com/docs/guides/vtex-io-documentation-running-native-ab-testing) mostra. O conceito era simples: 1. Você criava um workspaces com suas alterações nas variantes (interface do usuário, layout ou funcionalidade). 2. O aplicativo dividia o tráfego de sessões entre o workspace master(controle) e o workspace de produção (variante). 3. Os usuários eram agrupados e permaneciam na versão atribuída durante todo o teste. 4. 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](https://help.vtex.com/en/known-issues/ab-tester-app-mostra-informações-calculadas-erradamente-para-sessões-e-conversão--2Sgvlldl0kyDcWBVi4KMzg) (sessões e conversões às vezes mostravam valores incorretos) e [roteamento de requests inconsistente](https://help.vtex.com/en/known-issues/request-routing-e-inconsistent-when-running-ab-tests--5ukS8DTwmWsM0fNWQLYFQ1) (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: 1. **Ferramentas client-side com editor visual**, como VWO, Convert e Adobe Target. 2. **Ferramentas open-source de feature flag**, como GrowthBook e FlagSmith. 3. **Plataformas headless de personalização e experimentação** como [Optimizely](https://www.optimizely.com/) e [Croct](https://croct.com). 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. > ✨ Editores visuais > > [Neste guia](/post/ab-testing-tools.md), 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](/post/feature-flags.md) 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](/post/component-content-management-system-ccms.md), essas ferramentas oferecem testes AB e [personalização](/pt-br/post/personalizacao-de-sites.md) 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 é um CMS dinâmico focado em experimentação e otimização, o que significa que você deve usá-lo apenas para os elementos e componentes que deseja personalizar ou rodar testes AB. Por isso, a Croct pode coexistir com a VTEX. Os elementos mais comuns que sites de e-commerce integram são top bars, menus, carrosséis de banners, seções de destaque e callouts na página de produto, carrinho ou checkout. ![A Croct pode coexistir com a VTEX](https://storage.googleapis.com/croct-assets-b931d070/blog/How_to_run_AB_tests_on_VTEX_e_commerce_stores_fc2a18c411/How_to_run_AB_tests_on_VTEX_e_commerce_stores_fc2a18c411.png "A Croct pode coexistir com a VTEX") Você pode migrar gradualmente elementos e componentes com a Croct, dando ao time de growth a autonomia necessária. Como a Croct funciona como uma API headless que entrega conteúdo personalizado e de teste no server-side ou durante a hidratação, ela não causa flickering e preserva 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](https://docs.croct.com/reference/sdk) para trackear eventos e fazer o fetch do conteúdo dinâmico. Se o site usa Next.js, [este template](https://croct.com/templates/boilerplate/starter/nextjs) pode ajudá-lo a integrar em menos de um minuto com apenas um comando: ```shellcmd noLineNumber npx croct@latest use croct://starter/nextjs ``` ### VTEX 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](https://developers.vtex.com/docs/guides/vtex-io-documentation-desenvolvendo-componentes-de-storefront-personalizados) ou confira [este exemplo](https://gist.github.com/rcapeto/4064dcc43837a8fba6ed716986f5ea94) 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](https://app.croct.com/signup) ou verifique a [documentação completa](https://docs.croct.com). 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](https://croct.com/contact/support) com a gente. Garantimos que você terá tudo o que precisa para integrar em poucas horas.