Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Resumindo: acabamos de realizar o redesign de um site e usamos as melhores práticas qeu sabemos. O site carrega rápido e, certamente, a nova interface é muito melhor.
Mas, já consideramos como mensurar o novo design? Como saberemos se a nova popup que adicionamos converte ou prejudica a experiência? Quão frequente a popup é mostrada e como as pessoas a abandonam? Quantos usuários navegam pelo site usando o menu off-canvas que adicionamos? Quantas veem além da primeira imagem do slider da página inicial? São várias as perguntas.
No tutorial, mostraremos o uso da API de Rastreio de Eventos do Google Analytics (nome grande!) para achar as respostas.
Começando
Se não for um usuário do Google Analytics ainda, crie uma conta e siga as instruções iniciais para gerar um script de rastreio de website. Tipicamente, o trecho que recebemos parece-se com o logo abaixo, sendo que UA-XXXXXX-X é um ID de rastreio único para nosso site.
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = true;
a.src = g;
m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga( 'create', 'UA-XXXXXX-X', 'auto' );
ga( 'send', 'pageview' );
Para esse exercício, também precisaremos instalar uma extensão do Chrome, Google Analytics Debugger, para depurar, posteriormente, os scripts do Google Analytics no site.
Após tudo cofigurado, podemos começar o primeiro exemplo.
Rastrendo um Clique
Imaginemos ter alguns botões (ou links estilizados como botões). Adicionamos o primeiro acima da dobra em nossa seção de "herói" e o segundo, logo antes do rodapé. Como vemos abaixo, cada botão leva à mesma ágina, tem vários classes estilizadores e um ID único. Nesse caso, podemos usar a "API de Rastrei de Eventos" para descobrir qual botão recebe mais cliques.
<!-- The buy now button that appear above the fold --> <a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a> <!-- The buy now button that appear below the fold --> <a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>
Usar o Rastreio de Eventos é relativamente simples, já que não requer convenções restritas em termos de definição de evento. Primeiro, precisamos vincular os botões ao evento click.
var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
btn.addEventListener('click', function(event) {
});
} );
Então, adicionamos ga(), função exposta pelos scripts do Google Analytics adicionados anteriormente, que é a função usada para gravar uma "visualização de página" De modo similar, rastreamos um evento com o comando send com hitType configurado como event com os parâmetros requeridos:
- eventAction: especifica a interação do usuário ou estado da interface do usuário, como
click,play,pause, etc. - eventCategory: especifica o Objeto a rastrear, como
Videos,Buttons,Pop-ups, etc. - eventLabel: rótulo único ou ID do evento. Usada para categorizar múltiplas instâncias do mesmo objeto.
Como mencionado, o Google não tem regras restritas, podemos aplicá-los de qualquer formas que quisermos. No nosso caso, configuraremos as variáveis, assim:
var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
btn.addEventListener('click', function(event) {
ga('send', 'event', {
eventAction: 'click',
eventCategory: 'Buy Now Buttons',
eventLabel: event.target.id // buy-now-above || buy-now-below
});
});
} );
Com a extensão Google Analytics Debugger ativa, podemos clicar um dos botões e examinar o Console da Ferramenta de Desenvolvedores e ver se o rastreio funciona:
E quando o Google Analytics recebe os dados, gravará sob Tempo Real > Eventos e Comportamento > Eventos.
Rastreando o Carrossel
O segundo exemplo envolverá um Carrossel. Provavelmente já encontramos argumentos a favor e contra seu uso em sites: "pessoas não interagem com carrosséis" ou "pessoas apenas interagem com o primeiro slide". Mas isso se aplica ao nosso site? Sem dados, é difícil dizer.
Incorporemos os Eventos do Google Analytics em nosso carrossel, que usamos criando Slick.js. Esse plugin jQuery provê vários eventos jQuery customizados que é o que precisamos para executar o Rastreio de Eventos do Google Analytics. Veja a documentação do Slick para detalhes sobre criar o carrossel.
Nosso carrossel consiste em cinco slides. Como no primeiro exemplo, também adicionamos ID únicos para cada slide (ex. slide-1, slide-2, slide-3, etc), que passaremos como o parâmetro eventLabel. O objetivo é descobrir:
- se usuários veem o carrossel além do primeiro slide
- e colecionar o número de visualizações de cada slide
Para isso, usaremos os eventos swipe e afterChange do Slick.js.
Swipe
O evento swipe é ativado quando o usuário navega o carrossel usando o gesto de deslizar. Nesse caso, atribuímos swipe a eventAction.
$('.carousel').on('swipe', function(event, slick, direction) {
ga('send', 'event', {
eventCategory: 'Carousel',
eventAction: 'swipe',
eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
});
});
afterChanges
O evento afterChanges é ativado quando o slide muda, isso é, quando o usuário vê o próximo ou slide anterior do carrossel. Nesse caso, atribuímos view a eventAction para a "nova visualização do slide".
$('.carousel').on('afterChange', function(event, slick, direction) {
ga('send', 'event', {
eventCategory: 'Carousel',
eventAction: 'view',
eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
});
});
Quando o Google Analytics receber os dados, saberemos quantos usuários iteragem com o carrossel, o número de visualizações cada slide recebe e quantos usuários usam o gesto deslizar.
Como vismo acima, o carrossel recebeu um total de 19 visualizações, 14 das quais foram pelo gesto de deslize.
E Depois?
Vimos apenas dois exemplos de integração do Rastreio de Eventos do Google Analytics em sites para colecionas dados de interação do usuário. Esses número dão-nos referências sólidas para julgar se o novo design executa melhor que o anterior, ajudando-nos a aprimorar a UX do site.
Encorajamos a lida da documentação para usar mais a API de Rastreio de Eventos do Google Analytics.
Recursos Adicionais
