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
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post