Eventos Google Analytics: use, abuse e obtenha resultados

Se você acompanha o nosso blog, sabe que aqui na Supersonic levamos na mais alta consideração o método científico.

Afinal, não queremos apenas que nossos clientes reajam às nossas descobertas realizadas na otimização de seus sites com um “uau”, mas, acima de tudo, queremos que essas melhorias sejam verdadeiras, confiáveis.

E entenda-se confiável por: se alguém quiser repetir o experimento, com um certo grau de certeza estatística, vai obter os mesmos resultados que nós. Complexo? Você vai ver que não.

Método científico? Como tornar isso factível no dia-a-dia caótico de quem tem metas, prazos, calls, etc? Quais ferramentas irão me suportar nesse processo?

Bem, é triste dizer isso, mas elas estão debaixo dos nossos narizes e estão gritando: “me usem, por favor, me usem direito”. Você sabe usar os Eventos Google Analytics para conseguir mais dados confiáveis?

Estou falando de:

• Google Analytics e
• Google Tag Manager.

Eventos Google Analytics: A Piscada ao Contrário

Antes de abordarmos dicas técnicas para um uso aprimorado dessas ferramentas, vamos a uma breve analogia que explica a maior parte dos setups de Google Analytics.

A instalação básica do GA registra apenas visualizações de página, ou seja, tudo que o usuário faz na página, é perdido.

Quando piscamos o olho, fechamos por um breve momento para ficar um período bem maior com ele aberto, certo? Imagine agora o inverso.

Seu olho fica fechado a maior parte do tempo e sua piscada, ao invés de fechar, abre o olho, por menos de um segundo. Imagine fazer as tarefas do seu dia-a-dia dessa forma.

É isso que 99% dos sites estão fazendo em suas contas de Analytics, registrando apenas brevíssimos momentos da experiência dos seus usuários.

Lembra das etapas do método científico?

• Antes de um aumento de receita sensacional, vem um teste sensacional.
• Que depende de uma hipótese sensacional.
• Que,  por sua vez, depende de uma observação sensacional.
• Que nasce de dados sensacionais.

E é aí que mora a fábrica de pulos do gato. Quanto mais dados você tiver sobre o comportamento das pessoas no seu site e quanto mais tempo você passar observando esses dados, fazendo as perguntas certas para os números e gráficos que você está vendo, melhores serão suas hipóteses e mais vitoriosos serão os seus testes.

E os eventos Google Analytics vão te ajudar muito a fazer isso!

Hipóteses nascidas de observação sistemática dos dados de comportamento serão muito mais consistentes, afinal, como disse James Barksdale: se nós temos dados, vamos olhar os dados.

Se tudo que nós temos são opiniões, vamos com a minha.

O que o James está querendo dizer com isso é: tenha dados ou seja refém dos egos, geralmente do sujeito mais bem pago da organização. E decisões baseadas em opiniões, meu amigo, são o caminho mais eficiente para o prejuízo, muitas vezes muito bem camuflado na forma de desgaste, desmotivação.

Por fim, já foi dito aqui (na página sobre o que é Otimização de Conversão) que toda visita em um site é custo: custo pra manter um servidor rodando direitinho, custo para criar um conteúdo de qualidade, custo de publicidade, enfim, um ralo de dinheiro.

A conversão é a única forma de tornar esse custo um investimento com altas taxas de retorno. E dados são o tijolo dessa construção.

Usando eventos Google Analytics para melhorar seus dados

Vamos supor que você tem uma página com vários botões que levam para uma segunda página, os famosos calls-to-action.

Vamos supor que sejam 5 deles. Esse é um cenário bastante comum em nossos projetos e acredito que nos seus também.

Depois de um certo tempo com tráfego nessa página, é óbvio que eu quero saber:

• Qual foi o CTA mais clicado?
• Qual foi o CTA mais clicado por quem converteu?
• Qual a porcentagem  desses cliques que se resolvem na primeira dobra?

Com esses dados em mãos, eu poderia propor uma reformulação e uma boa hipótese de teste para uma versão 1.1 dessa landing page. Mas, se você não configurou para isso, você não terá esses dados.

Se cada botão levasse para uma página diferente, o GA até saberia. Mas no caso de ser a mesma página para todos os CTAs (o que acontece muito), você vai precisar melhorar esse setup.

Essa é uma missão para os eventos Google Analytics.

Eventos Google Analytics são a forma pela qual você pode registrar ações realizadas pelo usuário dentro das suas páginas.

E aí vem mais um conceito muito interessante. Se conversão é aquilo que você quer que o usuário faça no seu site (uma compra, um cadastro, etc) antes disso ele faz micro-conversões (clica em um CTA, faz uma pesquisa, assiste um vídeo até o fim, etc), e você precisa registrar elas agora, sim: com eventos Google Analytics, também chamados de eventos GA.

Se você tem o código do Universal Analytics instalado diretamente no seu site, ele vai se parecer com isso:

<script>
  (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=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>

Neste caso, você utilizaria um evento GA, que nada mais é que esse pequeno trecho de código:

ga('send', 'event', 'Categoria', 'Ação', 'Rótulo', 'Valor', 'Campos Adicionais');

Onde os parâmetros Categoria e Ação são obrigatórios e o restante, opcionais. Para o seu primeiro CTA, geralmente localizado na primeira dobra, seu evento poderia ficar algo como:

ga('send', 'event', 'CTA', 'Clique', 'Primeira Dobra');

Bacana. Mas como eu faço para ele ser disparado exatamente na hora que alguém clicar no CTA da primeira dobra? Simples:

<a href="https://seusite.com.br/sua-pagina-de-destino" onclick="ga('send', 'event', 'CTA', 'Clique', 'Primeira Dobra');">Clique Agora em Mim</a>

Você também pode utilizar outras soluções, como jQuery, para detectar o clique em determinado CTA e disparar o script específico do evento.

Mas essa interação no código fonte do seu site nem sempre é tranquilinha.

Dependendo do tamanho da empresa, o analista não tem acesso ao código, precisa pedir para a área de TI, essa solicitação entra em uma lista de tarefas, e logo, algo simples pode levar uma semana ou mais para ser implementado.

Fora o risco de, ao mexer no código fonte do site, alterar algo que não deveria. Se estamos falando de uma agência, essa simples alteração pode virar um ping pong de 10 emails ou mais. Enfim.

Sofrimento, nunca mais!

Imagine que você só precise adicionar uma tag no seu site e gerenciar todas as outras em uma plataforma própria para isso. Sim, estou falando do Google Tag Manager, depois que você começar a usar e entender sua dinâmica, você dirá:

“Oh Deus, por que eu não comecei a usar antes?”

O script é simples. Você precisará adicionar a seguinte tag dentro da sua <head>, o mais alto possível:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

E o seguinte trecho vai na abertura da sua <body>:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Crie sua conta no Google Tag Manager e ele gerará os mesmos códigos acima, com a diferença de utilizar um ID seu (aqui utilizei GTM-XXXXXX, apenas para demonstração).

Instalado na página? Agora vamos colocar o Google Analytics dentro do Google Tag Manager.

Se você tem ele (o GA) instalado diretamente no código fonte do seu site, é importante lembrar de tirá-lo, ou você ficará com um código duplicado (um dentro e outro fora do Google Tag Manager). Isso comprometerá suas métricas.

Primeiro, vá para a seção de tags e crie uma nova. Na configuração da tag, você escolhe Universal Analytics. Imediatamente você verá um campo para colar o código de acompanhamento.

Agora, uma dica MATADORA que vai salvar tempo seu futuramente

Ao invés de simplesmente colar seu UA-99999999-9, clique na pecinha de lego que aparece do lado do campo, e siga esta sequência:

1. Vai aparecer uma gama de variáveis para você escolher. Crie uma nova (no botão de mais, canto superior direito).
2. Em configuração da variável, escolha Permanente. ,
3. Agora sim, pode colar seu UA a vontade e dê um nome intuitivo a ela, por exemplo: Google Analytics ID ou o que você preferir.
4. Para o acionamento da tag, você pode escolher All pages.
5. Não esqueça de nomear certinho sua tag.
6. Por fim, vai ficar algo mais ou menos assim:

Feito isso, é só salvar e publicar sua versão e você já estará coletando visualizações de página em sua conta do Google Analytics.

Mas, eu falei que isso era o básico do básico, né?

Agora que vem a parte boa

Vamos agora começar a criar eventos Google Analytics a partir do Google Tag Manager.

Na verdade, podemos criar uma infinidade de eventos GA. Mas vamos falar apenas do exemplo que dei acima, sobre como podemos rastrear alguns CTAs de uma landing page.

Você vai precisar entender um pouquinho de CSS, nada monstruoso.

Vamos supor que todos os botões de CTA tem uma classe de CSS no HTML da página, por exemplo: btn-cta. É muito fácil identificar isso, você só precisa clicar com o botão direito do mouse e inspecionar elemento. Você veria algo mais ou menos assim:

<a class="btn-cta" href="https://seusite.com.br/sua-pagina-de-destino">Clique Agora em Mim</a>

Beleza. Mas você precisa diferenciá-los, até porque, você quer um evento Google Analytics exclusivo para cada um deles, concorda?

Procure algum elemento de HTML (geralmente, div, section) que tenha um ID, cujo CTA esteja dentro. Algo mais ou menos assim:

<section id="primeira-dobra">
  
  <a class="btn-cta" href="https://seusite.com.br/sua-pagina-de-destino">Clique Agora em Mim</a>

</section>

É claro que provavelmente terão muitos outros elementos dentro dessa seção, foi só pra ilustrar a lógica. Agora, com o ID e a classe, basta apenas anotar em forma de seletor de CSS para utilizarmos a seguir.

Ficaria assim:

#primeira-dobra .btn-cta

• Nos seletores de CSS, utilizamos hashtag para IDs e ponto para classes.
• Agora, vá em variáveis e clique em configurar.
• Procure na área de Cliques por Click Element e ative essa variável.

O próximo passo é ir em acionadores, novo.

• Em configuração do acionador, escolha Clique – todos os elementos.
• Agora escolha a opção Alguns cliques.
• Por fim, escolha a variável Click Element > corresponde ao seletor de CSS > #primeira-dobra .btn-cta.

Vai ficar assim:

Não esqueça de nomear direitinho e salvar seu acionador.

Agora, vamos para tags.

• Crie uma nova.
• Em configuração da tag, escolha Universal Analytics.
• Agora, no campo Código de acompanhamento, você vai utilizar aquela variável que criamos lá em cima, o Google Analytics ID,
• acesse ela no botão de mais logo ao lado do campo.

O tipo de acompanhamento será Evento.

• Agora nomeie Categoria (CTA), Ação (Clique) e Rótulo (Primeira Dobra).
• Em acionamento, escolha o acionador que você acabou de criar.

Pronto, agora é só publicar as alterações.

Teste clicando no CTA com o Google Analytics Real Time aberto na área de Eventos. O seu evento tem que aparecer aí.

Agora é só repetir o procedimento para todos os CTAs.

Legal, né? Essa é só uma das várias possibilidades do Google Tag Manager.

Posso descansar em Paz agora?

Pode não. Eu diria que a coleta de dados de qualidade é só 20% do trabalho de um analista. Os outros 80% residem na capacidade de processar esses dados extraindo insights, e chamo de insight todo tipo de proposta de alteração que vise aumento de performance.

Afinal, não fazemos gráficos para falar: “nossa, interessante mesmo, né?” e depois guardar. Mas sim, para propor MUDANÇAS no site.

Mas enfim, agora é que vem a parte boa. Deixe seus eventos Google Analytics coletando dados por um tempo.

A análise óbvia seria levantar a quantidade de cliques em cada CTA, no máximo, fazer um percentual de participação no total de cliques de todos os CTAs. Mas, se você leu até aqui, certamente tem disposição para ir além do óbvio.

Que tal fazer uma taxa de conversão por CTA?

• A = Número de cliques em um dado CTA de pessoas que converteram
• B = Número de cliques em um dado CTA de todos os visitantes

A taxa de conversão desse CTA será A dividido por B. Utilize cliques únicos, pois é uma métrica menos inflada e mais real.

Mas, cuidado. É interessante que cada CTA tenha um volume interessante de cliques e conversões para a análise ser confiável. Coloque essas taxas em um gráfico comparativo.

Agora, questione seus dados:

• Alguma delas destoa demais das outras?
• Para mais ou para menos?
• Quais hipóteses podem nascer desses dados?
• Será que algum CTA tem que ser tirado?
• Será que ele deve mudar de local com outro na landing page?
• Ou ainda, será que o conteúdo em volta daquele CTA tem que melhorar para otimizar aquela taxa de conversão em específico?

Vá ainda mais longe.

Isso quase é uma regra: quanto mais alto na página o CTA, mais clique ele recebe, de modo que, os da primeira dobra provavelmente serão aqueles com mais cliques.

Vamos supor que você faça um gráfico com o número de cliques por CTA, para fazer uma comparação, e eles estão no gráfico na mesma ordem em que se apresentam na página.

Existe algum ponto onde é perceptível uma queda brusca? Será que ali não merece uma analisada mais a fundo? Pode estar faltando algum conteúdo para garantir maior atenção.

Outra dica importante. Faça cruzamentos com as mais variadas dimensões, tudo aquilo que der na telha. Você pode descobrir, por exemplo, que mulheres clicam mais em um determinado CTA e homens em outro.

E sabe-se lá o que mais pode estar escondido nesses dados.

Considerações finais

Não é porque você aprendeu a usar eventos Google Analytics e que o dado que apareceu necessariamente é real.

Por isso, analistas precisam dominar dois mundos: a natureza da captura dos dados e como melhor descrevê-los para extrair ações de melhoria.

Assim, eles podem questionar os dados com conhecimento de causa sobre o que pode estar poluindo ou faltando.

Lembre-se: todo esse processo é para, no final, gerar ações (repita esse mantra). Propostas de mudanças, novas hipóteses de teste que fecham um ciclo de melhoria contínua.

A próxima vez que você iniciar um processo de observação e estruturação de hipótese, você estará bem resguardado, pois estará coletando mais dados.

Leia também sobre mapa de calor e como usar a ferramenta Hotjar para fazer testes A/B no nosso blog.