teste-ab com javascript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
index.html
index.js

README.md

<<<<<<< HEAD teste-a-b-landing-page-1 Sabemos que o uso do teste AB hoje em dia é uma otima pratica 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 tambem pode utilizar ferramentos 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>

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

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

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

Perceba que me retornou um objeto com várias propiedades que podemos acessa-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 nosso 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 varialvel com o valor da nossa Query String

const queryString = '?utm_source=testeab';  
// aqui declaramos uma variaval 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 varivel.

window.location.search === queryString

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

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

##Vamos aplicar o teste .

Primeira coisa que preciso 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 váriavel 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 contem a QueryString é aplicarmos o teste . vamos lá !!

Vou criar uma função que ela ira 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 a ele.

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

##Codigo 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 apliaçã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 boolenado 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 ira 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

##Codigo 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 usando 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 negocio mais avançadas porque o conceito de cookie e dar uma experiencia da preferencia do usúario e não um teste , mas acho valido 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';

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

Se digitarmos essa instuçã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 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

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

=======

js-teste-ab

teste-ab com javascript

9b5a5b4820f95cb283b513bd1d32dea62ca476dd