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><divclass=”container”><divclass=”row”><divclass=”col-md-3"><divclass=”cardproduct”><imgsrc=”https://placeimg.com/640/480/tech”class=”img-responsive”></div><divclass=”cardproduct-containerthumbnail”><h2>Ipad Pro</h2><strong>R$ 1.299</strong><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><ahref=””class=”btnbtn-successbtn-lgbtn-ab”>COMPRAR</a></div></div></div></div></body>Visualmente no navegador ficará assim:
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
Perceba que me retornou um objeto com várias propiedades que podemos acessá-las como por exemplo :
\\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çãowindow.location novamente
Percebe que agora temos a propiedade Search com o valor da nossa QueryString se digitarmos no console :
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.
constqueryString=‘?utm_source=testeab’;// aqui declaramos uma variaval com valor da queryString
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;}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
constbutton=document.querySelector(‘.btn-ab’);No caso esta no HTML do nosso exemplo
<ahref=””class=”btnbtn-successbtn-lgbtn-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.
consttesteAb=()=>{// aqui é uma funçãoif(window.location.search===queryString){//verificou a urlbutton.classList.add(‘button-fixed’);//adicionou a classe}}Agora é só invocar essa função
testeAb();// invocamos a funçãoO resultado
Sem a QueryString
Com a QueryString
Perceba que não fizemos nada demais e apenas manipulamos um elemento do nosso HTML atribuindo uma classe à ele.
Código Javascript desse Exemplo :
constqueryString=‘?utm_source=testeab’;constbutton=document.querySelector(‘.btn-ab’);//Exemplo UM usando Query stringconsttesteAb=()=>{// aqui é uma funçãoif(window.location.search===queryString){button.classList.add(‘button-fixed’);}}testeAb();// chamamos a funçãoAgora 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
<bodyclass=”testeab”>Vamos ao Javascript
Agora vamos testar se nosso body possui a classe body Class
No Console do navegador iremos digitar
body.className === ‘testeab’
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 .
consttesteAbClass=()=>{// aqui é uma funçãoif(body.className===‘testeab’){button.classList.add(‘button-fixed’);}}Agora é só invocar essa função
testeAbClass();// invocamos a funçãoPerceba que teremos o mesmo resultado do exemplo anterior.
O resultado
Sem a QueryString
Com a QueryString
Código Javascript desse Exemplo :
constbutton=document.querySelector(‘.btn-ab’);consttesteAbClass=()=>{// aqui é uma funçãoif(body.className===‘testeab’){button.classList.add(‘button-fixed’);}}testeAbClass();// chamamos a funçãoAgora 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’;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 :
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
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.
consttesteAbCookie=()=>{document.cookie=‘teste=testeAB’;if(document.cookie.indexOf(‘teste=testeAB’)>=0){button.classList.add(‘button-fixed’);}}Agora é só invocar essa função
testeAbCookie();// invocamos a funçãoPerceba que temos o mesmo resultado dos outros exemplos .
O resultado
Sem a QueryString
Com a QueryString
Código Javascript desse Exemplo :
constbutton=document.querySelector(‘.btn-ab’);consttesteAbCookie=()=>{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.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
