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', 'http://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:

1. se usuários veem o carrossel além do primeiro slide
2. 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

• API de Rastreio de Eventos do Google Analytics
• Desmistificando o Google Analytics no Tuts+
• Explorando o Uso do Carrossel em Sites de E-Commerce Mobile