Pular para o conteúdo

CRO e mapa de calor

Eventos do Google Analytics: como registrar os cliques do site no GA4

Passo a passo para criar eventos de clique com o Google Tag Manager, conferir o disparo no GA4 e calcular a taxa de conversão de cada botão da página.

· Designer de landing pages e fundadora da Fysi Lab Digital

· Atualizado em · 15 min de leitura

Capa do post: Eventos do Google Analytics: como registrar os cliques do site no GA4
Neste artigo
  1. O que são eventos no Google Analytics 4?
  2. Por que medir o que acontece dentro da página?
  3. Quais perguntas um evento de clique responde?
  4. Como criar um evento direto no código do site?
  5. Como instalar o GA4 pelo Google Tag Manager?
  6. Como criar o evento de clique no Tag Manager?
  7. Como analisar os eventos de clique?
  8. Cuidados para confiar nos dados dos eventos
  9. Perguntas frequentes
  10. Dos cliques medidos ao teste A/B na sua landing page

Evento do Google Analytics é o registro de uma ação do visitante no site: um clique em botão, o envio de um formulário, um vídeo assistido até o fim. No GA4, tudo o que a ferramenta mede é evento. Uma parte ela coleta sozinha. O que falta, como o clique em cada botão de chamada da página, você cria pelo Google Tag Manager.

O que são eventos no Google Analytics 4?

Eventos são a forma como o GA4 registra o que a pessoa faz dentro das páginas. A visita a uma página é um evento (page_view), a rolagem é outro (scroll), e cada clique que interessa ao negócio pode virar um evento com o nome que você escolher.

A versão antiga trabalhava de outro jeito. O Universal Analytics, que parou de processar dados em 1º de julho de 2023 (Central de Ajuda do Google Analytics), registrava só visualizações de página na instalação básica. O que a pessoa fazia dentro da página ficava de fora.

No GA4, a medição otimizada já coleta por conta própria a rolagem até 90% da página, os cliques em links para outros sites, as pesquisas no site, o engajamento com vídeos, os downloads de arquivos e as interações com formulários, de acordo com a lista de eventos coletados automaticamente. É um bom começo. Os cliques nos botões que levam a outras páginas do seu próprio site continuam fora dessa lista.

Quais são os tipos de evento do GA4?

O GA4 trabalha com quatro tipos de evento. Os dois primeiros chegam prontos e os dois últimos dependem de configuração:

TipoComo é coletadoExemplos
Coletado automaticamenteBasta a tag do Google instalada no sitefirst_visit, session_start, user_engagement
Medição otimizadaOpção do fluxo de dados da Web, no Administradorscroll, click (link de saída), file_download, form_submit
RecomendadoVocê cria, com um nome já definido pelo Googlegenerate_lead, sign_up, purchase
PersonalizadoVocê cria, com o nome que escolherclique_cta

As ações mais importantes para o negócio, como o envio do formulário de contato, recebem a marca de eventos principais. É assim que o GA4 identifica as conversões do site. A marcação é feita na página Eventos principais, em Administrador.

Por que medir o que acontece dentro da página?

Medir o que acontece dentro da página dá à análise o material que falta quando o site registra só visualizações. Imagine passar o dia de olhos fechados e abrir por um instante a cada troca de página: você saberia onde esteve e pouco sobre o que aconteceu ali. Muitas contas de Analytics ainda enxergam a visita desse jeito.

A otimização de um site segue o método científico, e a lógica dele anda de trás para a frente:

  • o aumento de receita vem de um bom teste;
  • o teste depende de uma boa hipótese;
  • a hipótese nasce de uma boa observação;
  • a observação exige bons dados.

Quanto mais dados de comportamento você reúne, e quanto mais tempo dedica a fazer as perguntas certas aos números e aos gráficos, melhores ficam as hipóteses e mais testes terminam com ganho. O dado também precisa ser confiável. Confiável, aqui, quer dizer que outra pessoa pode repetir o experimento e chegar ao mesmo resultado, com um grau conhecido de certeza estatística.

Uma frase atribuída a James Barksdale, que presidiu a Netscape, resume o que está em jogo:

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

Na falta de dados, a decisão fica com a opinião de quem ocupa o cargo mais alto. Decisão por opinião custa caro, muitas vezes de um modo discreto: desgaste e desmotivação da equipe. A prática de reunir e interpretar esses números tem nome, digital analytics, e os eventos são uma das suas matérias-primas.

Há ainda a conta do custo. Toda visita ao site custa dinheiro: servidor, produção de conteúdo, anúncio. A conversão é o que faz desse custo um investimento com retorno, e os dados são o tijolo dessa construção.

Quais perguntas um evento de clique responde?

Um evento de clique mostra qual botão as pessoas usam de fato. Pense em uma landing page com cinco botões de chamada (os CTAs), todos apontando para a mesma página de destino. É um desenho comum. Depois de algum tempo de tráfego, três perguntas aparecem:

  • Qual CTA recebeu mais cliques?
  • Qual CTA foi o mais clicado por quem converteu?
  • Que parte dos cliques acontece na primeira dobra, antes de qualquer rolagem?

As respostas sustentam uma nova versão da página e uma boa hipótese de teste. Se cada botão levasse a uma página diferente, as visualizações de página bastariam para separar os cliques. Como o destino é um só, o GA4 só diferencia os botões quando cada clique chega como um evento próprio.

Existe outro motivo para registrar essas ações. Antes da conversão (a compra, o cadastro), o visitante passa por microconversões: clica em um CTA, usa a busca, assiste a um vídeo até o fim. Elas mostram o quanto ele avançou. O post sobre macro e microconversões explica o conceito, e o guia de como criar um CTA trata do texto e do desenho do botão.

Como criar um evento direto no código do site?

Quem tem a tag do Google (gtag.js, o código do GA4) instalada direto no site registra um evento com uma linha de JavaScript:

gtag(‘event’, ‘clique_cta’, { ‘posicao’: ‘primeira_dobra’ });

O primeiro valor é o nome do evento, escolhido por você. O que aparece entre chaves são parâmetros opcionais, que acrescentam detalhes, como a posição do CTA na página.

Para o evento disparar no momento exato do clique no CTA da primeira dobra, a linha pode ir no próprio botão:

<a href=”https://seusite.com.br/sua-pagina-de-destino” onclick=”gtag(‘event’, ‘clique_cta’, { ‘posicao’: ‘primeira_dobra’ });”>Clique Agora em Mim</a>

Outras soluções em JavaScript também detectam o clique em um CTA e disparam o evento.

Regras para o nome do evento

O nome do evento segue regras fixas, descritas na página de regras de nomenclatura do GA4:

  • começa com uma letra;
  • usa letras, números e sublinhado, sem espaços;
  • diferencia maiúsculas de minúsculas: clique_cta e Clique_CTA são dois eventos;
  • fica fora da lista de nomes reservados pelo GA4, como click, scroll e page_view.

Adote um padrão, como tudo em minúsculas, e mantenha esse padrão em todos os eventos. Quando existir um evento recomendado para a ação, como generate_lead para um contato gerado, use o nome do Google.

Como instalar o GA4 pelo Google Tag Manager?

Com o Google Tag Manager, você instala um único código no site e passa a criar e editar todas as outras tags em um painel próprio. Isso tira a medição da fila da área de tecnologia. Quando cada evento depende do código-fonte, quem analisa os dados precisa pedir a alteração, o pedido entra em uma lista de tarefas e um ajuste simples demora a sair. Com uma agência no meio, a troca de e-mails se alonga. Há ainda o risco de mexer no código e alterar algo que estava funcionando.

A instalação do GA4 pelo Tag Manager leva seis passos:

  1. Crie a conta no Tag Manager. Ele exibe dois trechos de código, já com o ID do seu contêiner, que começa com GTM-. Um deles fica na <head> do site, na posição mais alta que der. O outro entra assim que a <body> abre.
  2. Retire o código do GA4 que estiver instalado direto no código-fonte. Com um dentro e outro fora do Tag Manager, a medição fica duplicada e as métricas perdem a validade.
  3. Abra Tags e clique em Nova. Em Escolher o tipo de tag, selecione Tag do Google.
  4. Em ID da tag, informe o ID do GA4. Ele começa com G- e aparece no fluxo de dados da propriedade, em Administrador, no Google Analytics.
  5. Em Acionamento, escolha “Inicialização: todos os eventos de inicialização”, como orienta a Central de Ajuda do Tag Manager.
  6. Salve e publique a versão. O GA4 passa a receber as visualizações de página pelo Tag Manager.

Guarde o ID do GA4 em uma variável

Uma variável do tipo Constante guarda o ID G- e poupa o trabalho de colar o código em cada tag de evento. O ajuste é rápido:

  1. Abra Variáveis e, em Variáveis definidas pelo usuário, clique em Nova.
  2. Na configuração da variável, escolha Constante.
  3. Cole o ID G- e dê um nome fácil de reconhecer, como GA4 ID.
  4. Selecione essa variável sempre que um campo pedir o ID do GA4.

O mesmo cuidado com nomes vale para tags e acionadores. Um contêiner com dezenas de itens só continua legível quando cada nome diz o que o item faz.

Como criar o evento de clique no Tag Manager?

O evento de clique pede três peças no Tag Manager: um seletor que identifica o botão, um acionador que percebe o clique e uma tag que envia o evento ao GA4. O exemplo continua com os CTAs da landing page. O Tag Manager permite criar muitos outros eventos pelo mesmo raciocínio.

1. Identifique o botão pelo seletor de CSS

Um pouco de CSS basta. Clique no botão com o lado direito do mouse e escolha Inspecionar. O HTML do CTA costuma trazer uma classe, como btn-cta:

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

Se todos os CTAs usam a mesma classe, falta algo que separe um do outro, já que cada botão terá o seu registro. Procure o elemento que envolve o botão (em geral uma div ou uma section) e que tenha um ID:

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

Em uma página de verdade, a seção tem vários outros elementos. O trecho acima mostra só a lógica. Junte o ID e a classe em um seletor de CSS. Nessa notação, a cerquilha (#) indica ID e o ponto indica classe:

#primeira-dobra .btn-cta

Um botão com ícone ou com o texto dentro de outra tag pode registrar o clique no elemento interno. Para cobrir esse caso, escreva o seletor nas duas formas, separadas por vírgula: #primeira-dobra .btn-cta, #primeira-dobra .btn-cta *

2. Crie o acionador do clique

  1. Abra Variáveis e clique em Configurar. No grupo Cliques, ative a variável Click Element.
  2. Abra Acionadores e clique em Novo.
  3. Na configuração do acionador, vá ao grupo Clique e escolha Todos os elementos.
  4. Marque a opção Alguns cliques.
  5. Monte a condição: Click Element, corresponde ao seletor de CSS, #primeira-dobra .btn-cta.
  6. Dê ao acionador um nome que descreva o botão e salve.

3. Crie a tag do evento

  1. Em Tags, crie uma nova e escolha o tipo Google Analytics: evento do GA4.
  2. No campo do ID, selecione a variável GA4 ID pelo botão que fica ao lado do campo.
  3. Preencha o campo Nome do evento com clique_cta.
  4. Nos parâmetros do evento, inclua posicao e dê a ele o valor primeira_dobra.
  5. Em Acionamento, selecione o acionador criado no passo anterior.

4. Teste, publique e confira no GA4

Antes de publicar, clique em Visualizar. O Tag Assistant abre em outra aba: informe o endereço do site, navegue e confirme que a tag dispara no clique do botão. O roteiro completo está na página do Google sobre eventos do GA4 no Tag Manager.

Depois, publique as alterações e procure o evento nos relatórios Em tempo real e DebugView do GA4. Para o parâmetro posicao aparecer nos relatórios, registre-o como dimensão personalizada na página Definições personalizadas, em Administrador. Conte com um intervalo de 24 a 48 horas até os dados aparecerem.

Repita o processo para cada CTA, trocando o seletor e o valor do parâmetro (segunda_dobra, rodape). O nome do evento continua o mesmo, e o parâmetro separa os botões nos relatórios.

Como analisar os eventos de clique?

A análise começa depois que os eventos coletaram dados por um período e tem um objetivo: propor mudanças no site. Coletar bem é a menor parte do trabalho. A maior é ler os dados e tirar deles propostas que melhorem o desempenho da página. Um gráfico que termina em “interessante” e vai para a gaveta deixou o serviço pela metade.

A leitura inicial é a contagem de cliques por CTA e a participação de cada um no total. A leitura seguinte rende mais: a taxa de conversão de cada CTA.

  • A: cliques em um CTA feitos por pessoas que converteram.
  • B: cliques no mesmo CTA feitos por todos os visitantes.
  • Taxa de conversão do CTA: A dividido por B.

Use o número de usuários que clicaram e deixe de lado o total de eventos: assim, vários cliques da mesma pessoa valem um e a taxa fica menos inflada. No GA4, a análise é montada em Explorar, comparando todos os visitantes com um segmento de quem realizou o evento principal. Cada CTA precisa de um volume razoável de cliques e de conversões para a comparação merecer confiança.

Leve as taxas para um gráfico comparativo. O Data Studio, ferramenta gratuita de relatórios do Google, conecta direto ao GA4 e ajuda a montar essa visão.

Para ver os cliques sobre a própria página, some à análise o mapa de cliques do Microsoft Clarity, um tipo de mapa de calor. O Clarity é gratuito, integra com o GA4 e dispensa a configuração de eventos: basta instalar o código. O mapa lista os elementos mais clicados e marca os cliques de raiva (rage clicks), a sequência de cliques de quem esperava que algo acontecesse.

Perguntas para fazer aos dados

  • Alguma taxa destoa das outras, para cima ou para baixo?
  • Quais hipóteses esses números sugerem?
  • Algum CTA pode sair da página?
  • Dois CTAs deveriam trocar de lugar?
  • O conteúdo em volta de um CTA precisa melhorar para a taxa dele subir?

A posição pesa. É comum que os botões mais altos recebam mais cliques, com vantagem para os da primeira dobra. Monte um gráfico de cliques por CTA na ordem em que os botões aparecem na página e procure uma queda brusca. O trecho anterior a essa queda merece atenção: pode faltar ali um conteúdo que segure o interesse de quem lê.

Cruze os eventos com outras dimensões do GA4, como dispositivo, origem do tráfego e página de entrada. Um botão pode funcionar bem no computador e passar despercebido no celular, e só o cruzamento mostra isso. Os mesmos eventos servem de etapa na análise de funil, que aponta em que passo do caminho os visitantes desistem.

Cuidados para confiar nos dados dos eventos

Um evento configurado ainda pede conferência: o número que aparece no relatório pode estar inflado ou incompleto. Quem analisa precisa dominar dois assuntos, a forma como o dado é capturado e a melhor maneira de descrevê-lo para chegar a ações de melhoria. Com os dois, dá para questionar o relatório sabendo o que pode estar sobrando, como uma tag duplicada, ou faltando, como um botão que ficou fora da medição.

Todo o processo existe para gerar ação: uma proposta de mudança, uma nova hipótese de teste, em um ciclo de melhoria contínua. A cada rodada, a observação parte de mais dados e as hipóteses ficam mais firmes.

Para seguir no assunto, veja o guia de instalação e recursos do GA4, as ideias de relatório no Google Analytics para otimização de conversão e os mitos que os testes A/B derrubam.

Perguntas frequentes

O GA4 registra cliques em botões automaticamente?

Em parte. A medição otimizada registra por conta própria os cliques em links que levam a outros sites, além de rolagem, pesquisa no site, vídeos, downloads e formulários. O clique em um botão que leva a outra página do seu próprio site fica fora dessa coleta. Para medir esse clique, crie um evento personalizado.

Preciso do Google Tag Manager para criar eventos no GA4?

O Tag Manager é opcional. Com a tag do Google instalada direto no site, uma linha de JavaScript no botão já registra o evento. O Tag Manager facilita a rotina: você cria tags, acionadores e variáveis em um painel, testa no modo de visualização e publica a mudança com o código-fonte do site intacto.

Qual a diferença entre evento e evento principal?

Evento é qualquer ação registrada no GA4, como um clique ou uma rolagem. Evento principal é o evento que você marcou como importante para o negócio, por exemplo o envio do formulário de contato. A marcação é feita na página Eventos principais, em Administrador, e é assim que o GA4 identifica as conversões.

Em quanto tempo o evento aparece nos relatórios do GA4?

O disparo aparece logo nos relatórios Em tempo real e DebugView, que servem para conferir a configuração. Nos demais relatórios, os dados podem levar de 24 a 48 horas. Um parâmetro como posicao só entra nos relatórios depois de registrado como dimensão personalizada, em Definições personalizadas, no Administrador.

Dos cliques medidos ao teste A/B na sua landing page

A Fysi Lab Digital cria landing pages com copy, design no Figma e construção em WordPress, e faz otimização de conversão com mapa de calor, gravação de sessão, hipóteses e teste A/B. Conheça o serviço de otimização de conversão, a criação de landing pages e os projetos no portfólio.

Continue lendo

Ver todos os posts

Quero contratar

O que você precisa?