Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google Analytics
Webdesign

Como Rastrear Comportamento do Usuário com Eventos do Google Analytics

by
Difficulty:IntermediateLength:ShortLanguages:

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.

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.

Depurador do Google Chrome Está Ativado

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.

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.

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:

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:

Google Analytics Log in DevTools Console
O rastreio enviando dados para o Google Analytics

E quando o Google Analytics recebe os dados, gravará sob Tempo Real > Eventos e Comportamento > Eventos.

Event Record in Google Analytics
Dessa captura de tela, vemos que o botão "Buy Now" abaixo da dobra recebe mais clique que o acima da dobra.

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 foi criado só para essa demo.

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.

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.