Teste AB com Javascript

teste-a-b-landing-page-1
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.

Saiba mais sobre Teste AB


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>

Visualmente no navegador ficará assim:

Screen-Shot-2018-03-08-at-12.52.16

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 propriedades da url que estou acessando.

Exemplo:
Vou digitar window.location na aba console do Google Chrome o atalho é :

Windows : F12
Mac : Command + alt + i

Screen-Shot-2018-03-08-at-13.17.19

Perceba que me retornou um objeto com várias propriedades 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ção window.location novamente

Screen-Shot-2018-03-08-at-13.47.50

Screen-Shot-2018-03-08-at-13.48.45

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 variálvel com o valor da nossa Query String

const queryString = '?utm_source=testeab';  
// aqui declaramos uma variável com valor da queryString

Agora vou testar se essa QueryString existe, vou digitar no console o comando abaixo se a propiedade da search é igual o valor da minha variável.

window.location.search === queryString

Screen-Shot-2018-03-08-at-13.57.34

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

const button = document.querySelector('.btn-ab');

No caso esta no HTML do nosso exemplo

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

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

Agora vou invocar essa função

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

O resultado

Sem a QueryString

Screen-Shot-2018-03-08-at-12.52.16-1

Com a QueryString

Screen-Shot-2018-03-08-at-14.13.31-1

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

<a href="" class="btn btn-success btn-lg btn-ab button-fixed">COMPRAR</a>

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

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

Vamos ao Javascript

Agora vamos testar se nosso body possui a classe body Class

No Console do navegador iremos digitar

body.className === 'testeab'

Screen-Shot-2018-03-08-at-14.43.27

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'); 
    }
}

Chamamos a função

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

Perceba que teremos o mesmo resultado do exemplo anterior

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

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';

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 :

Screen-Shot-2018-03-08-at-15.06.08

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

Screen-Shot-2018-03-08-at-15.08.55

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');
    } 
}

Chamamos a Função

testeAbCookie();

Perceba que temos o mesmo resultado dos outros exemplos :

Sem o Cookie

Screen-Shot-2018-03-08-at-12.52.16-1

Com o Cookie

Screen-Shot-2018-03-08-at-14.13.31-1

Código Javascript desse Exemplo :

const button = document.querySelector('.btn-ab'); 

//Exemplo tres usando cookies

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.

Código Fonte dos exemplos:
Baixe aqui

Projetos recentes

E-click Tecnologia

Desenvolvimento Front-End Objetivo do projeto foi desenvolver um website para a

  Ver tabalho

E-commerce Carrefour

[ Desenvolvimento Front-End Manutenção e atualizações diarias com HTML, CSS, JS

  Ver tabalho

Motorola Peru

Manutenção e atualizações diarias com HTML, CSS, JS , consumo de apis e manipulação de dados do MasterData da plataforma VTEX.

  Ver tabalho

Loja Brastemp

Manutenção e atualizações diarias com HTML, CSS, JS , consumo de apis e manipulação de dados do MasterData da plataforma VTEX.

  Ver tabalho

Loja Consul

Manutenção e atualizações diarias com HTML, CSS, JS , consumo de apis e manipulação de dados do MasterData da plataforma VTEX.

  Ver tabalho

Loja Compra certa

Manutenção e atualizações diarias com HTML, CSS, JS , consumo de apis e manipulação de dados do MasterData da plataforma VTEX.

  Ver tabalho

Bionexo

Objetivo do projeto foi desenvolver um web site para apresentação de uma plataforma MarketPlace da area de saúde e gestão de processos (Fornecedor/Cliente).

  Ver tabalho

Flowef

Objetivo do projeto foi refatorar o Thema de Wordpress permitindo que todos os componentes podessem ser administrados pelo Admin da plataforma .

  Ver tabalho

Droid InVue

Objetivo do projeto foi desenvolver um website para apresentação dos produtos e mostrar a segurança que a solução Droid Invue pode oferecer para o ponto de venda.

  Ver tabalho

Portal SBCOC

Objetivo do projeto foi desenvolver um portal em Wordpress para a Sociedade de médicos com conteúdos exclusivos para membros

  Ver tabalho

Seara Gourmet

Objetivo do projeto foi desenvolver uma landingpage para apresentar linha de produto Gourmet da Seara e receitas que podem ser utulizadas com esses produtos

  Ver tabalho

Website Hoje tem Frango

Objetivo do projeto foi desenvolver um portal para o consumidor ter acesso a informações nutricionais e produção, qualidade e proviniencia.

  Ver tabalho

Website Sunset Comunicacão

Objetivo principal do projeto foi apresentar o novo momento de crescimento da agência , mudança para novo prédio e plano de negôcio.

  Ver tabalho

Labs

FIREBASE SAVE LEADS FORM

Save leads in your FIREBASE database whit simple form and Javascript

  Ver tabalho

Generator url campaign for Google Analitycs

Easy way to build Campaign Url for Google Analitycs - In Google Chrome Extension

  Ver tabalho

Teste AB com Javascript

Sabemos que o uso do teste AB hoje em dia é uma otima pratica de testarmos a usabilidade e conversão de uma feature

  Ver tabalho

Bitcoin Ticker Google Chrome extension

Google Extension Extensão Google Chrome que atualiza em tempo Real o valor de c

  Ver tabalho

Ghost Blank Theme

Blank theme for develop custom theme for GHOST

  Ver tabalho

Pug Sass - starter

Este é um Pug e Sass starter projeto usando gulp para automação de tarefas.

  Ver tabalho

Flatmin - admin components

Projeto para desenvolver componentes para uma interface que disponibilizei no Github .

  Ver tabalho