Simples Teste A/B com Javascript.
Tags: javascript, abtest, chormedevtools
Published: 2021-04-14 11:57:39

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.

```html
<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>
```

### Visualmente no navegador ficará assim:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzipj6a3p54ugjw2bv7b.jpeg)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18sal0dql077qfz9mizb.png)

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

```javascript 
\\window.location.host
\\retorna ‘rogeriorioli.com’
 ```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wp6jj042v1p1opwjacwx.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k51zqp4doiqni3018u3p.png)

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

```javascript
window.location.search
\\retorna ‘?utm_source=testeab’

```

## Vamos botar a mão na massa então

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

```javascript
const queryString = ‘?utm_source=testeab’; 
// aqui declaramos uma variaval com valor da queryString
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2p13u91tohdbuz4s33a.png)

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.

```css
.button-fixed{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0;
 }
```

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

```javascript
const button = document.querySelector(‘.btn-ab’);

```
No caso esta no HTML do nosso exemplo

```html
<a href=”” class=”btn btn-success btn-lg btn-ab”>COMPRAR</a>

```

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.

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

Agora é só invocar essa função

```javascript

testeAb(); // invocamos a função

```
## O resultado

### Sem a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzipj6a3p54ugjw2bv7b.jpeg)

### Com a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/848q3xi8ux8jvxye6m5q.png)

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

Código Javascript desse Exemplo :

```javascript
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
```


## 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

```html

<body class=”testeab”>
```
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr6700pitfhgkqeg8170.png)

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 .

```javascript

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

Agora é só invocar essa função

```javascript

testeAbClass(); // invocamos a função

```
Perceba que teremos o mesmo resultado do exemplo anterior.

## O resultado

### Sem a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzipj6a3p54ugjw2bv7b.jpeg)

### Com a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/848q3xi8ux8jvxye6m5q.png)


## Código Javascript desse Exemplo :

```javascript

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
```

## 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.

```javascript

document.cookie = ‘teste=testeAB’;
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br1ne4w0s1pxrc23gy40.png)


## 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:

```javascript

document.cookie.indexOf(‘teste=testeAB’) >= 0

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3o3ql7mnrmdtgh9iq7b.png)

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.

```javascript

const testeAbCookie = () => {
 document.cookie = ‘teste=testeAB’;
 if(document.cookie.indexOf(‘teste=testeAB’) >= 0) {
 button.classList.add(‘button-fixed’);
 } 
}
```
Agora é só invocar essa função

```javascript

testeAbCookie(); // invocamos a função

```

Perceba que temos o mesmo resultado dos outros exemplos .

## O resultado

### Sem a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzipj6a3p54ugjw2bv7b.jpeg)

### Com a QueryString
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/848q3xi8ux8jvxye6m5q.png)


## Código Javascript desse Exemplo :

```javascript

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();
```

É 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.