DEV Community

Cover image for Simples Teste A/B com Javascript.
Rogerio Orioli
Rogerio Orioli

Posted on • Edited on

Simples Teste A/B com Javascript.

#javascript #abtest #chormedevtools

Sabemos que o uso do teste AB hoje em dia é uma ótima prática de testarmos a usabilidade e conversão de uma feature de nossa aplicação que temos dúvidas se ela é promissora ou não. E como o Javascript pode nos ajudar com isso ?

O Javascript depende de elementos do nosso documento HTML para fazer as coisas acontecerem e ele também pode utilizar ferramentas do navegador como Cookies para manipular os elementos do (DOM) HTML, com isso podemos utilizar de pequenas funções em Javascript para fazermos os nossos testes de conversão e usabilidade.

Vamos fazer isso acontecer

Primeiro vamos usar uma marcação simples de HTML, Um exemplo de um produto de uma prateleira.

<body>
 <div class=”container”>
 <div class=”row”>
 <div class=”col-md-3">
 <div class=”card product”>
 <img src=”https://placeimg.com/640/480/tech” class=”img-responsive”>
 </div>
 <div class=”card product-container thumbnail”>
 <h2>Ipad Pro</h2>
 <strong>R$ 1.299</strong>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href=”” class=”btn btn-success btn-lg btn-ab”>COMPRAR</a>
 </div>
 </div>
 </div>
 </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Visualmente no navegador ficará assim:

Alt Text

Agora vamos ao conceito de QueryString

A QueryString é um modelo clássico de manutenção do estado da página. Elas são nada mais do que conjuntos de pares/valores anexados a URL, em diversos sites hoje em dia vemos o uso delas.

Seu uso é simples, após a URL de determinada página, adicionamos o primeiro valor usando a seguinte sintaxe: ?Chave=Valor. Para passarmos mais de um conjunto, os mesmos devem ser concatenados usando o caractere coringa &.

exemplo :
http://www.meusitelindao.com.br?chave=valor

fonte:
https://www.devmedia.com.br/conceitos-e-exemplo-pratico-usando-querystring/18094

Utilizando o Query string com Javascript

Agora vamos ao nosso primeiro modelo de teste usando QuerySrting.

Primeira coisa que precisamos fazer e decidir qual a QuerySrting iremos utilizar eu optei por essa ?utm_source=testeab para ficar mais didático.

Vamos ao Javascript

Existe uma objeto global do javascript que se chama window.location, esse objeto de leitura me retorna propiedades da url que estou acessando.

Exemplo: Vou digitar window.location na aba console do Google Chrome o atalho é : Windows : F12 Mac : Command + alt + i

Alt Text

Perceba que me retornou um objeto com várias propiedades que podemos acessá-las como por exemplo :

\\window.location.host
\\retorna ‘rogeriorioli.com’
Enter fullscreen mode Exit fullscreen mode

Pode-se chamar qualquer outra propiedade usando usando o mesmo exemplo acima .

Agora a Querystring

Vou digitar na barra de endereço do navegador minha url utilizando a nossa QueryString ?utm_source=testeab e chamar a função window.location novamente

Alt Text

Alt Text

Percebe que agora temos a propiedade Search com o valor da nossa QueryString se digitarmos no console :

window.location.search
\\retorna ‘?utm_source=testeab’
Enter fullscreen mode Exit fullscreen mode

Vamos botar a mão na massa então

Primeira coisa que vou fazer é criar uma varialvel com o valor da nossa Query String.

const queryString = ‘?utm_source=testeab’; 
// aqui declaramos uma variaval com valor da queryString
Enter fullscreen mode Exit fullscreen mode

Alt Text

Perceba que ela me retornou um valor booleano de True , então já sabemos que esse valor é válido para nosso teste

Vamos aplicar o teste .

Primeira coisa que precisamos fazer é criar um estilo css que será aplicado no botão de comprar quando o teste for aplicado no momento que digitarmos nossa QueryString.

.button-fixed{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0;
 }
Enter fullscreen mode Exit fullscreen mode

Segunda coisa que irei fazer é criar uma variavel com valor do botão comprar pedirei para o Javacript encontrar no DOM (HTML) o link que tem a classe .btn-ab

const button = document.querySelector(‘.btn-ab’);
Enter fullscreen mode Exit fullscreen mode

No caso esta no HTML do nosso exemplo

<a href=”” class=”btn btn-success btn-lg btn-ab”>COMPRAR</a>
Enter fullscreen mode Exit fullscreen mode

Agora precisamos verificar novamente se nossa url contém a QueryString é aplicarmos o teste . vamos lá !!

Vou criar uma função que ela irá fazer essa validação e adicionar a classe .button-fixed que fizemos no nosso CSS.

const testeAb = () => { // aqui é uma função
 if (window.location.search === queryString) { //verificou a url
 button.classList.add(‘button-fixed’); //adicionou a classe
 } 
}
Enter fullscreen mode Exit fullscreen mode

Agora é só invocar essa função


testeAb(); // invocamos a função
Enter fullscreen mode Exit fullscreen mode

O resultado

Sem a QueryString

Alt Text

Com a QueryString

Alt Text

Perceba que não fizemos nada demais e apenas manipulamos um elemento do nosso HTML atribuindo uma classe à ele.

Código Javascript desse Exemplo :

const queryString = ‘?utm_source=testeab’;
const button = document.querySelector(‘.btn-ab’);
//Exemplo UM usando Query string 
const testeAb = () => { // aqui é uma função
 if (window.location.search === queryString) {
 button.classList.add(‘button-fixed’);
 } 
} 
testeAb(); // chamamos a função
Enter fullscreen mode Exit fullscreen mode

Agora vamos ao Segundo exemplo utilizando Teste AB com Body Class

Vamos fazer a mesma aplicação do nosso teste só que agora utilizando uma classe na nossa tag body do nosso HTML
Primeiramente vamos atribuir a classe no nosso HTML


<body class=”testeab”>
Enter fullscreen mode Exit fullscreen mode

Vamos ao Javascript

Agora vamos testar se nosso body possui a classe body Class
No Console do navegador iremos digitar
body.className === ‘testeab’

Alt Text

Perceba que ela me retornou um valor booleano de True , então já sabemos que esse valor é válido para nosso teste.

Vamos a mão na massa

Vou criar uma função igual ao nosso exemplo acima só que agora ele irá verificar se no DOM (HTML) a tag body possui a classe .testeab .


const testeAbClass = () => { // aqui é uma função
 if(body.className === ‘testeab’){
 button.classList.add(‘button-fixed’); 
 }
}
Enter fullscreen mode Exit fullscreen mode

Agora é só invocar essa função


testeAbClass(); // invocamos a função
Enter fullscreen mode Exit fullscreen mode

Perceba que teremos o mesmo resultado do exemplo anterior.

O resultado

Sem a QueryString

Alt Text

Com a QueryString

Alt Text

Código Javascript desse Exemplo : 


const button = document.querySelector(‘.btn-ab’);
const testeAbClass = () => { // aqui é uma função
 if(body.className === ‘testeab’){
 button.classList.add(‘button-fixed’); 
 }
}
testeAbClass(); // chamamos a função
Enter fullscreen mode Exit fullscreen mode

Agora vamos ao Terceiro exemplo utilizando Cookies

O Que são Cookies ?

Um cookie é um pequeno texto que os sites podem enviar aos navegadores, anexado a qualquer conexão. Nas visitas posteriores o navegador reenvia os dados para o servidor dono do cookie. Um cookie é transmitido até que perca a validade, que é definida pelo site.

Os sites geralmente usam os cookies para distinguir usuários e memorizar preferências.

fonte : http://br.mozdev.org/firefox/cookies

Digamos que esse exemplo requer regras de negôcios mais avançadas porque o conceito de cookie e dar uma experiência da preferência do usúario e não um teste , mas acho válido mostrar o exemplo mesmo que não seja a melhor prática.

Como salvar um Cookie com Javascript

Com Javascript é muito fácil salvar um cookie existe um objeto global nativo dele que premite que gravemos um cookie no navegador.


document.cookie = ‘teste=testeAB’;
Enter fullscreen mode Exit fullscreen mode

Perceba que pedi para o documento adicionar um cookie com o nome teste e com valor de teste AB .

Se digitarmos essa instrução no console teremos na aba aplication um novo cookie gravado veja :

Alt Text

Vamos a mão na massa

Vamos verificar se temos o cookie teste AB na nossa aplicacação para isso vamos digitar no console a instrução abaixo:


document.cookie.indexOf(‘teste=testeAB’) >= 0
Enter fullscreen mode Exit fullscreen mode

Alt Text

perceba que retornou true , porque o cookie teste=testAB é maior que O no contexto do apliação , com isso iremos fazer uma função parecida com os exemplos anteriores validadando se o cookie existe.


const testeAbCookie = () => {
 document.cookie = ‘teste=testeAB’;
 if(document.cookie.indexOf(‘teste=testeAB’) >= 0) {
 button.classList.add(‘button-fixed’);
 } 
}
Enter fullscreen mode Exit fullscreen mode

Agora é só invocar essa função


testeAbCookie(); // invocamos a função
Enter fullscreen mode Exit fullscreen mode

Perceba que temos o mesmo resultado dos outros exemplos .

O resultado

Sem a QueryString

Alt Text

Com a QueryString

Alt Text

Código Javascript desse Exemplo : 


const button = document.querySelector(‘.btn-ab’);
const testeAbCookie = () => {
 document.cookie = ‘teste=testeAB’;
 if(document.cookie.indexOf(‘teste=testeAB’) >= 0) {
 button.classList.add(‘button-fixed’);
 } 
}
testeAbCookie();
Enter fullscreen mode Exit fullscreen mode

É isso pessoal espero que esse simples exemplo ajude, no próximo post vou explicar como podemos usar esse exemplo com GTM e Google Analytics para podermos medir qual teste AB é mais apropiado e que converta mais.

Top comments (0)

Read next

keploy profile image

AI-Powered Code Generation: Revolutionizing Development

keploy -

sharathchandark profile image

Build Live Code Editor Clone with HTML, CSS and JavaScript

sharathchandark -

williamsdev profile image

Horóscopo com IA: Uma Experiência com Next.js e Gemini

Frank William -

thisweekinjavascript profile image

JavaScript vs. Deno, Vite 6, Astro 5, and more

James -