Como fazer (e por que você deve fazer) testes A/B com Elementor no WordPress

Publicados: 2021-04-01

Quando você cria um site, você o faz com um propósito: vender produtos, promover serviços ou provocar qualquer tipo de resposta ou ação de seus leitores. Se você também escolheu o plugin Elementor como construtor de páginas para criar seu site no WordPress, é porque sabe que o design importa e quer que ele seja atraente e moderno. Hoje vamos ver como criar testes A/B no site de uma Elementor.

Mesmo que você use o Elementor no design de suas páginas, como saber se o seu gosto requintado é realmente aquele que lhe trará os melhores resultados? Você não é seu próprio cliente e suas opiniões e gostos podem ser muito diferentes dos seus. Seguir seu instinto pode ser muito romântico, mas se você busca melhorar a experiência do seu usuário e aumentar as conversões, ou seja, fazer com que seus leitores tomem alguma ação alinhada aos seus objetivos (comprar, preencher um formulário, entrar em contato com você, etc) , a melhor opção é realizar testes A/B em seu site.

Índice

  • O que são testes A/B?
  • Otimização da taxa de conversão
    • Etapa 1: defina seus objetivos
    • Etapa 2: analise seu site
    • Etapa 3: crie suas hipóteses
    • Etapa 4: gerar uma ideia de teste
    • Etapa 5: criar e executar testes A/B
  • Criar testes A/B no Elementor
    • Selecione o tipo de teste a ser criado
    • Definir as variantes de teste
    • Defina suas metas e ações de conversão
    • Segmente seu tráfego
    • Execute o teste criado e analise seu progresso
    • Aplique a alternativa vencedora
  • Comece a realizar testes A/B no Elementor agora

O que são testes A/B?

O número de visitantes do seu site é igual ao número de oportunidades para um visitante realizar alguma ação desejada, também chamada de conversão. Esta é uma assinatura, uma compra, preenchimento de um formulário, etc.

A taxa de conversão é o número de conversões alcançadas em relação ao número de visitas. Portanto, se você tiver um total de 100 visitas por dia em seu site, duas das quais acabam comprando um produto, a taxa de conversão em seu site é de 2% .

Da mesma forma que você pode medir o sucesso de suas campanhas de e-mail analisando qual porcentagem de quem recebe os e-mails acaba comprando, com seu site você tem uma ferramenta muito boa para melhorar seu sucesso ou taxa de conversão: o teste A/B .

O teste A/B é a melhor ferramenta para otimizar a conversão em seu site. Em suma, um teste A/B consiste em, com base numa hipótese de melhoria, propor uma alteração ao seu website (por exemplo, uma redistribuição da Landing Page para melhor apresentar determinadas informações relevantes, um rearranjo do menu para obter mais cliques na página do meu produto ou uma mudança radical do tema para torná-lo mais atraente) e depois veja se essa mudança funciona melhor do que você tinha antes.

Tecnicamente, um teste A/B nada mais é do que um experimento que consiste em mostrar duas variantes da mesma página da web para diferentes segmentos de visitantes do site ao mesmo tempo e comparar qual variante gera mais conversões.

ab-teste
Em sua forma mais simples, o teste A/B propõe dividir aleatoriamente o tráfego para o site em dois grupos para que 50% dos visitantes vejam o design A enquanto os outros 50% vejam o design B. Ao monitorar como os usuários de cada grupo reagem, podemos calcular a taxa de conversão de cada grupo e, caso haja uma diferença estatisticamente significativa entre os dois, declarar um design vencedor.

Uma das perguntas que surgem rapidamente com o teste A/B é que tipo de teste você deve testar. Testes A/B não são testes que você define aleatoriamente sem nenhum sentido; eles devem fazer parte de um processo mais ambicioso conhecido como Otimização da Taxa de Conversão ou processo CRO .

Otimização da taxa de conversão

Otimização da taxa de conversão ou CRO é, como o próprio nome sugere, o processo de aumentar a porcentagem de visitantes do site que realizam as ações desejadas. Esse processo, em resumo, consiste nas seguintes etapas:

Etapa 1: defina seus objetivos

O primeiro passo em qualquer processo de CRO é definir quais são suas metas de negócios e as diferentes metas de conversão do seu site em diferentes estágios do seu funil de vendas. Por exemplo, a meta de negócios da Nelio é aumentar os assinantes de nossos planos premium. Mas qual é o caminho que os visitantes percorrem desde o momento em que visitam nosso site até se tornarem clientes? Este é o nosso funil de vendas:

Funil de vendas de um site
Definição do funil de vendas de um site.

Se nosso objetivo de negócios é aumentar os assinantes de nossos planos premium, um prospect ou lead pode primeiro aprender sobre o Nelio A/B Testing quando pesquisar soluções de teste A/B no Google ou no Diretório de plugins do WordPress. Esse visitante do nosso site provavelmente lerá alguns artigos em nossa documentação para conhecer um pouco mais sobre nosso produto. Se eles gostarem do conteúdo dessas páginas, eles visitarão nossa página de preços. Nesse ponto, uma meta de conversão para nosso site pode ser uma visita à página de preços e nossa métrica de destino pode ser obter 2.000 visitas por mês a essa página.

Então, se o cliente em potencial encontrar informações interessantes, ele solicitará informações mais detalhadas ou baixará o plug-in do Diretório do WordPress para testar a versão gratuita que oferecemos. Uma segunda meta de conversão seria então: um visitante preenche nosso formulário de contato. A métrica será o número de formulários de contato recebidos e podemos definir nossa meta mensal com um determinado valor. Ou também pode ser um download do nosso plugin. E assim por diante.

Por fim, o cliente em potencial assina um de nossos planos premium. Nesse caso, nossa meta de conversão envolveria claramente a compra de um plano de assinatura. E como o objetivo do nosso negócio é crescer, podemos dividir essa meta entre os diferentes planos que temos.

Como você viu, esse primeiro passo consiste em analisar o funil de vendas para definir nossas metas de conversão, estabelecendo métricas.

Etapa 2: analise seu site

Após esta etapa preliminar essencial, você deve começar a procurar dados sobre a situação atual do seu site e sobre os quais você pode atuar. Identifique os problemas que você tem atualmente em seu site. Isso o ajudará a gerar ideias sobre os testes A/B que você deve realizar.

Como coletamos dados? Inicialmente, avalie heuristicamente cada uma das páginas identificadas na etapa anterior. Pergunte a si mesmo se eles atendem ou não ao conjunto de critérios que você estabeleceu e veja se você pode melhorar esses resultados:

  • A página atende às expectativas do usuário em termos de conteúdo e design?
  • Como podemos melhorar?
  • O conteúdo e as ofertas do site são o mais claros possível?
  • Podemos torná-lo mais claro ou mais simples?
  • O que causa hesitação nesta página ou dificulta o processo?
  • Podemos simplificar?
  • O que há na página que não ajuda o usuário a agir?
  • Podemos aumentar a motivação do usuário?

Você receberá uma lista de áreas de interesse que você pode potencialmente melhorar. Use o Google Analytics para encontrar áreas de melhoria também. Por exemplo, o GA pode ajudá-lo a detectar a porcentagem de visitantes que clicam nos botões do seu produto, que você pode comparar com os números esperados. Você também pode usar mapas de calor e mapas de rolagem para entender melhor o comportamento de seus usuários da web.

Em seguida, priorize os problemas ou áreas de melhoria que você identificou, concentrando-se primeiro naqueles que você acha que terão maior impacto (seja porque eles têm mais visitas ou porque é um problema importante). Por exemplo, em nossa análise, vimos que precisávamos melhorar nossa página de produto Nelio A/B Testing. Queríamos aumentar o número de usuários que visitam nossa página de preços. E este foi um grande problema.

Etapa 3: crie suas hipóteses

O próximo passo, antes de criar um teste A/B, é traduzir a lista de problemas previamente identificados em um conjunto de hipóteses.

Por exemplo, em nossa página de destino do Nelio A/B Testing, vimos que muitos visitantes veem apenas o primeiro bloco e não rolam a página para baixo. Pudemos ver isso depois de analisar o mapa de calor e o mapa de rolagem da web. Além disso, apenas 45% dos visitantes foram para a página de preços.

Versão original da primeira dobra da página inicial do Nelio A/B Testing
Versão original da primeira dobra da página inicial do Nelio A/B Testing.

Diante desse fato, levantamos a hipótese de que, usando uma mensagem mais clara na primeira dobra, que despertasse curiosidade em vez de urgência, conseguiríamos mais pessoas interessadas em clicar no botão Iniciar Agora . Você pode fazer este mesmo exercício para cada um dos problemas em sua lista ordenada.

Etapa 4: gerar uma ideia de teste

Em seguida, tivemos que implementar um novo título que “desperte a curiosidade”. Em nosso caso particular, decidimos que usaríamos o seguinte: Vermelho ou Azul? Quadrado ou redondo? Para cima ou para baixo? Teste seu WordPress .

Versão original da primeira dobra para a landing page do Nelio A/B Testing.
Variante da primeira dobra para a landing page do Nelio A/B Testing.
Diferenças entre a versão original e a variante da primeira dobra da landing page do Nelio A/B Testing.

Também decidimos alterar o texto abaixo do título, conforme mostrado na imagem. A ideia que tivemos foi verificar se é verdade que as pessoas preferem que falemos sobre seu site e objetivos ao invés de nossos produtos.

Etapa 5: criar e executar testes A/B

Por fim, só falta, como você já deve imaginar, criar o teste em seu site. Como mencionamos no início, um teste A/B nada mais é do que um experimento no qual criamos duas versões ou variantes de uma página (mas também pode ser um post, um menu, um widget, um formulário ou qualquer outro elemento do nosso site WordPress). Depois que o teste estiver em execução, podemos dividir nossos visitantes para que aproximadamente metade deles sempre veja a variante A e o restante veja a variante B.

Ao definir um teste A/B, não devemos apenas definir as variantes (A/B ou múltiplas no caso de um teste multivariado) do teste, mas também definir nossas metas de conversão. Como vimos no exemplo anterior, nossa meta de conversão era contar as visitas à página de preços de nossos planos premium. Além disso, em um teste A/B também podemos segmentar os participantes de um teste, ou seja, indicar quais visitantes queremos que participem do teste.

Depois de fazer o teste, você verá se uma das variantes foi a vencedora e poderá aplicá-la com certeza como a final em seu site, garantindo uma melhora na conversão.

E como você pode imaginar, o processo de otimização da conversão de um site é contínuo e cíclico. Nunca pare de fazer testes A/B para melhorar seu site.

Criar testes A/B no Elementor

Você pode criar um teste A/B em um site WordPress com Elementor manualmente, por exemplo, usando o Google Analytics para análise de conversão. No entanto, nossa recomendação é que você utilize uma das ferramentas disponíveis no mercado, como Nelio A/B Testing (versão gratuita e premium a partir de € 29/mês), Convertize (versão premium a partir de R$ 49/mês), VWO (versão premium versão a partir de $ 199/mês), Convert Expriences (versão premium a partir de $ 699/mês) ou Optimizely (preços personalizados, mas a partir de aprox. $ 800/mês), entre outros, o que poupa o trabalho de segmentar o tráfego ao seu site e fornecer diretamente as métricas e os resultados que você procura.

Vamos ver quais tipos de testes A/B você pode criar com o Elementor usando o Nelio A/B Testing, uma ferramenta cuja grande vantagem é ser um plugin nativo do WordPress. Na verdade, você só precisa instalar o plugin Nelio A/B Testing em seu site como qualquer outro plugin e, uma vez instalado, você pode começar a usá-lo sem precisar aprender a usar nenhuma outra ferramenta.

Os passos a seguir são os seguintes:

  • Selecione o tipo de teste para criar
  • Defina as variantes de teste,
  • Definir metas e ações de conversão
  • Como alternativa, defina se deseja aplicar a segmentação
  • Execute o teste e analise seu progresso
  • Aplicar a alternativa vencedora como final

Selecione o tipo de teste a ser criado

Para criar qualquer tipo de teste, a primeira coisa a fazer é selecionar o tipo de teste que você deseja criar na lista mostrada.

Seletor de teste em Nelio A/B Testing.
Seletor de teste em Nelio A/B Testing.

Depois de selecionar o tipo de teste A/B que deseja criar, você deve definir as principais características do teste que deseja executar em seu site.

Definir as variantes de teste

Antes de tudo, para cada um deles você deve escolher o elemento que deseja testar e definir suas variantes.

Teste A/B de uma página

Vejamos um exemplo muito simples. Suponhamos que hipotetizamos que, usando uma nova imagem na página Elementor, obteremos mais pessoas interessadas em saber mais informações sobre a ferramenta e, portanto, clicando no botão de chamada para ação.

Variante 1 de um teste A/B
Variante 2 de um teste A/B
Alterando a imagem de uma seção na página Elementor.

Depois de selecionar que queremos criar um teste de página, no editor do WordPress você verá a página onde você deve editar seu teste.

Nomeando um novo teste A/B de páginas
Definindo um novo teste A/B de página.

Basta nomear o teste, neste caso “Testing Different Images” e selecionar a página que deseja testar (no nosso caso, a página inicial ).

Selecionando uma página para testar com o Nelio A/B Testing.
Selecionando a página para testar com o Nelio A/B Testing.

Em seguida, você cria a variante “Variante B” de sua página original apenas dando um nome. E se quiser, você pode criar quantas variantes puder clicando no botão Nova Variante . Por padrão, cada variante criada será uma cópia exata da página original selecionada anteriormente. Clique no link Editar para modificá-lo.

Criando uma variante em um teste A/B
Criando uma variante B em um teste A/B.

A vantagem que você tem ao usar um plugin nativo do WordPress é que você pode modificar diretamente a variante de um teste A/B usando o mesmo editor visual que você costuma usar para criar suas páginas. Neste caso, o editor é obviamente Elementor. Isso significa que, depois de clicar no link Editar , você verá a nova variante carregada no Elementor e poderá alterá-la como desejar.

Modificação da variante de um teste A/B com Elementor
Modificação da variante de um teste A/B com Elementor.

Ajuste a página (neste exemplo, vou alterar apenas uma imagem) e salve-a como rascunho:

Publicar uma página como rascunho com o Elementor
Publique uma página como rascunho com o Elementor.

É isso! Você criou sua primeira variante!

Teste A/B de uma postagem

Criar um teste A/B para um post é muito parecido com o da página. Depois de selecionar que você deseja criar um pós-teste, a lista suspensa para selecionar a postagem original que você deseja testar mostrará a lista de postagens que você publicou. Você também pode pesquisar a postagem digitando seu título, URL ou ID.

Selecionando uma postagem para testar com o Nelio A/B Testing.
Selecionando uma postagem para testar com o Nelio A/B Testing.

O resto do processo é exatamente igual ao anterior.

Teste A/B de um tipo de postagem personalizado

Se o que você deseja é criar um teste A/B de um tipo de postagem personalizado diferente de páginas e postagens, como cursos que você criou em seu site, perguntas frequentes etc., você também pode fazê-lo com o Nelio A/B Testing . Você só precisa selecionar que deseja realizar esse tipo de teste, e agora o seletor permitirá que você selecione o tipo de conteúdo que deseja e qual conteúdo específico deseja testar.

Selecionando um tipo de postagem personalizado para testar com o Nelio A/B Testing.
Selecionando um tipo de postagem personalizado para testar com o Nelio A/B Testing.

Teste A/B de um título

Se ao analisar seu site você identificar que é difícil para você fazer com que os leitores leiam o conteúdo do seu site, talvez seja porque os títulos não são muito atraentes. Um teste que pode ser muito interessante é o teste do título. Ou seja, experimente diferentes versões do título, do trecho e da imagem de destaque de um post e descubra qual combinação consegue um maior número de leitores.

Para realizar esse tipo de teste, com o Nelio A/B Testing você não precisa editar essas informações com o Elementor. O próprio plugin permite que você faça isso diretamente ao editar um teste. Depois de selecionar que você deseja criar um novo teste de título, o Nelio A/B Testing mostra os títulos dos posts que você tem em seu blog.

Nomeando um teste A/B de título com o Nelio A/B Testing.
Definindo um teste A/B de título com o Nelio A/B Testing.

Você seleciona o post cujo título deseja testar e cria as variantes que deseja dele, sem precisar editar o post.

Definição de variantes de um teste A/B de título com Nelio A/B Testing.
Definição de variantes de um teste A/B de título com Nelio A/B Testing.

Teste A/B do resumo do produto WooCommerce

Os testes A/B de resumo do produto WooCommerce são um tipo específico de teste WooCommerce no qual são testadas diferentes combinações de nome, breve descrição e imagem do produto, com a intenção de descobrir qual deles obtém mais compras desse produto. A maneira de criar um teste desse tipo é muito semelhante à das manchetes que vimos acima.

Se você optou por criar um teste desse tipo, Nelio A/B Testing mostrará em uma lista suspensa os produtos que você tem disponíveis e você só precisa fazer as modificações das variantes que deseja criar diretamente no editor de teste. Você não precisa editar o produto.

Definindo um teste A/B do resumo do produto woo-commerce com o Nelio A/B Testing
Definindo um teste A/B do resumo do produto woo-commerce com o Nelio A/B Testing

Testes A/B temáticos

Se depois de analisar seu site sua hipótese é que seu site precisa de uma mudança mais radical, talvez mudar o tema seja o que você precisa. Mas antes de entrar no fundo do poço, lembre-se, crie um teste A/B com o qual você pode verificar com dados qual tema é melhor.

Criar um teste de tema é fácil com o Nelio A/B Testing. Você deve ter apenas os temas que deseja testar instalados em seu WordPress e selecioná-los no teste de tema A/B.

Selecionando uma variante de tema em um teste A/B com o Nelio A/B Testing.
Selecionando uma variante de tema em um teste A/B com o Nelio A/B Testing.

Lembre-se de que, se as páginas que você possui com o Elementor foram completamente personalizadas uma a uma, o efeito que uma mudança de tema pode ter será mínimo.

Teste A/B de Modelos

Em vez de alterar o tema de um site, você pode tentar criar modelos diferentes para algumas das páginas do seu site. Projete-os anteriormente com o construtor de páginas Elementor e, em seguida, execute um teste A/B com eles.

Selecionando a variante do modelo para testar com o Nelio A/B Testing.
Selecionando a variante do modelo para testar com o Nelio A/B Testing.

Como sempre, basta selecionar as diferentes variantes de modelo que você deseja usar como variante de modelo em todas as páginas que usam um modelo específico.

Teste A/B de Menus

Com o Elementor, você pode criar a estrutura do menu de navegação diretamente no WordPress ou, se usar a versão Pro do Elementor, também pode criar menus usando o widget Nav Menu . Caso você o tenha criado da maneira tradicional, criar um teste A/B é tão simples quanto selecionar um dos menus que você possui atualmente e criar as variantes que deseja.

Criando um novo teste A/B de menu com o Nelio A/B Testing.
Criando um novo teste A/B de menu com o Nelio A/B Testing.

Para modificar as variantes, basta clicar no link editar e modificar o menu da mesma forma que edita qualquer menu tradicional. Uma vez criado, agora está disponível como uma variante deste teste.

Caso você tenha criado seus menus com o widget de menu de navegação da versão Elementor Pro, a criação do teste é a mesma que se você estivesse criando um teste A/B de widgets, conforme explicado abaixo.

Teste A/B de Widgets

Se você precisar criar um teste de widget no WordPress (incluindo o Menu de Navegação discutido acima), depois de selecionar que deseja criar um teste de widget, basta indicar o nome da nova variante de widget e clicar no link editar.

Criando uma variação de um teste A/B de widget com o Nelio A/B Testing.
Criando uma variação de um teste A/B de widget com o Nelio A/B Testing.

Ao editar uma variante, o Nelio usa o próprio editor de widgets do WordPress com alguns controles adicionais. Adicione, remova e organize os widgets variantes como quiser e depois volte para o teste.

Editando um widget variante de um teste A/B com o Nelio A/B Testing.
Editando um widget variante de um teste A/B com o Nelio A/B Testing.

Teste A/B de CSS

Se você quiser testar diferentes versões de regras de estilo CSS e avaliar qual delas funciona melhor para atender aos seus objetivos, você pode optar por criar um teste de CSS. Como no caso dos widgets, basta digitar o nome da nova variante e clicar no link de edição. Nesse caso, um editor será aberto para você adicionar os estilos CSS desejados enquanto você pode ver a visualização deles.

Editando uma variação de um teste CSS A/B com o teste A/B Nelio.
Editando uma variação de um teste CSS A/B com o teste A/B Nelio.

Depois de definir as novas regras, clique em publicar e você terá a variante CSS do seu teste criada.

Defina suas metas e ações de conversão

Depois de definir as variantes do seu teste, vamos para o próximo passo: o teste A/B que você criou foi feito com a ideia de testar alguma meta de conversão, como conseguir mais vendas, mais assinantes ou mais visitas à página de preços, etc. Esses objetivos são alcançados quando o visitante realiza determinadas ações. Por exemplo, você pode obter mais assinantes quando um usuário preenche um determinado formulário em seu site ou mais visitas à página de preços quando um usuário clica em um botão, etc.

Como definimos metas e ações de conversão no Nelio A/B Testing?

Na seção "Metas e ações de conversão", você pode adicionar quantas metas quiser clicando no link +Novo e, opcionalmente, adicionar um nome a elas. O Nelio A/B Testing mostrará informações sobre a eficácia de cada variante para cada uma das metas que você definiu.

Definir meta de conversão: aumentar o interesse em qualquer um dos meus produtos.
Definir meta de conversão: aumentar o interesse em qualquer um dos meus produtos.

Para cada meta, você tem diferentes tipos de ações de conversão para acompanhar seus visitantes. Por exemplo, você pode monitorar quando eles acessam uma determinada página, quando clicam em um determinado elemento do seu site ou quando enviam um formulário de contato. Clique no botão de ação que lhe interessa e configure-o. Por exemplo, você pode clicar na ação de conversão Visita à página e selecionar sua página de preços em seu formulário suspenso ou selecionar um envio de formulário e escolher o formulário que deseja acompanhar etc.

Segmente seu tráfego

Um dos recursos interessantes de muitas ferramentas de teste A/B é que você pode segmentar seu tráfego. Ou seja, você pode definir apenas determinados visitantes para participar de um teste. Por exemplo, por país, hora, idioma, navegador, dispositivo etc. Se você quiser mais detalhes sobre como implementar a segmentação de tráfego com o Nelio A/B Testing, neste artigo Antonio explica em detalhes.

Execute o teste criado e analise seu progresso

E é isso, agora tudo que você precisa fazer é pressionar o botão para iniciar um teste e analisar seu progresso. Ao usar uma ferramenta como as mencionadas acima, você não precisa se preocupar com quanto tempo precisa para executá-la ou controlar a confiança estatística dos dados.

Evolução de um teste A/B com Nelio A/B Testing.
Evolução de um teste A/B com Nelio A/B Testing.

Você poderá ver o número total de conversões e visitas às páginas de cada variante. Você também poderá ver a porcentagem de melhoria (ou piora) de cada variante em relação à versão original.

Aplique a alternativa vencedora

Depois de um tempo, o plugin lhe dirá qual variante é a melhor (se houver uma que seja melhor que as outras, é claro).

Status dos resultados de um Teste A/B.
Status dos resultados de um Teste A/B.

Uma vez que há um, tudo o que resta é torná-lo definitivo. Com o Nelio A/B Testing, sendo um plugin nativo do WordPress, aplicar a variante vencedora envolve apenas clicar em um botão, Aplicar . E é isso! Não há necessidade de recriar a variante vencedora novamente – ela já está no WordPress!

Resultados de um teste de resumo do produto WooCommerce com Nelio A/B Testing.
Resultados de um teste de resumo do produto WooCommerce com Nelio A/B Testing.

E pronto, agora você tem um novo design do seu site com dados comprovados, melhor que o anterior.

Comece a realizar testes A/B no Elementor agora

Com este guia completo sobre como criar testes A/B no Elementor, você estará totalmente equipado para começar a planejar seu próprio projeto de otimização de conversão de sites. Os testes A/B são inestimáveis ​​quando se trata de melhorar as taxas de conversão do seu site. Além disso, usando uma ferramenta como o Nelio A/B Testing, você reduz muitos dos riscos envolvidos na realização de um programa de otimização sem critérios claros e apenas com base em sua própria intuição.

Se você achou este guia útil, compartilhe-o em suas redes sociais e se tiver alguma dúvida, comentário ou precisar de informações adicionais, não hesite em deixar seu comentário no final deste artigo.

Imagem em destaque por Syd Wachs no Unsplash .