Como etiquetar eventos web com GTM e GA4 facilmente graças à IA

Medir eventos num site parece fácil.

Mas depois você abre cada um dos seus templates de WordPress e começa a pensar em cliques, botões, módulos, transações, formulários, menus, CTAs, cards, banners, sidebars…

E deixa para outro dia.

Porque uma coisa é pensar “quero medir o que acontece no meu site” e outra bem diferente é etiquetar bem um site real.

Um site com templates diferentes.

Com módulos repetidos em várias seções.

Com cards e abas que parecem iguais, mas mudam em alguma coisa.

Com botões visualmente idênticos, mas que cumprem funções completamente diferentes.

E aqui, como em muitas outras partes, a IA pode ajudar bastante.

Não porque vá decidir sua estratégia de medição por você — isso continua sendo coisa sua, embora também possa trazer propostas — mas porque pode executar quase todo o trabalho: 

• Revisar templates.
• Detectar módulos e componentes semelhantes.
• Propor uma estrutura reutilizável.
• Definir uma nomenclatura se você ainda não tiver a sua clara.
• Preparar um contêiner de GTM.
• E até mexer no código do seu site para, por exemplo, adicionar atributos “data-” que facilitem a medição. 

Acabei de fazer tudo isso no meu site, então vou contar o processo usando meu caso real como exemplo.

Preparei a medição de cliques nos módulos editoriais do meu site (artigos em destaque, recomendados, novidades etc. em cada página), mas o sistema serve para qualquer evento.

Dito isso, aqui temos dois caminhos: o manual e o automatizado com IA.

Vamos começar pelo simples, para que você veja que é muito rápido; depois, se quiser, olha tudo o que economizou ao deixar isso com a IA.

Caminho 1: tutorial passo a passo para rastrear os eventos do seu site rapidamente com IA

Começamos pela versão rápida e curtinha.

Passo 1: peça à IA que ajude você a desenhar a estrutura

Se você tem experiência em analytics, já sabe disso. Mas se não tem ou não conhece GA4, a IA pode ser muito útil.

Para isso, você só precisa ir à sua ferramenta preferida (ChatGPT, Claude ou Gemini) e fazer duas coisas em um prompt:

1. Adicione capturas de tela completas (de cima até embaixo) de cada seção do site (home, categorias, checkout etc.)
2. Explique a ela o que você quer.

Ou seja: 

<em>“Quero medir cliques nos módulos principais do meu site. Antes de mexer no código, ajude-me a definir uma nomenclatura de evento e parâmetros para que seja reutilizável em GTM e GA4.</em>
Não quero um evento para cada módulo. Quero um único evento com parâmetros.

Os templates que tenho são:

- home

- categoria

- subcategoria

- tag

- post

Proponha:

1. nome do evento

2. parâmetros mínimos

3. valores permitidos

4. exemplos reais de dataLayer

5. dimensões que eu deveria criar no GA4”

Isso obriga a IA a pensar em estrutura antes de pensar em código.

E é exatamente isso que interessa, porque ela vai propor um plano que, em geral, fará bastante sentido. Porque, se você começar a etiquetar um site sem nomenclatura, vai terminar com um analytics Frankenstein.

Troque ideias com a IA até ter clara a estrutura e por que fazer assim.

Passo 2: passe seu contêiner de GTM para ela

E deixe que ela faça quase todo o trabalho:

1. Exporte o contêiner de GTM do projeto e jogue-o para a IA.
2. Peça que ela execute as alterações pertinentes com base na estratégia definida no ponto anterior.
3. Quando estiver pronto, você baixa.
4. Importe no GTM. A IA dirá se você precisa mesclar com o que já está lá em cima ou substituir.

Aqui é possível que tenhamos terminado ou não, dependendo de como a IA acredita — ou de como dissemos a ela — que deve executar o plano de etiquetagem.

Passo 3 (opcional): passe o código dos seus templates para a IA

Se, para a etiquetagem, for necessário adicionar atributos data (explico em que consistem na parte da etiquetagem manual) você pode passar para a IA os templates reais do seu site. E é aqui que você economiza tempo de verdade.

No WordPress, podem ser arquivos do tema que você tem ativo, como:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

Ou os que o seu tema usar.

Envie-os e dê uma instrução concreta:

<em>“Estou passando os templates atuais do meu site.</em>
Quero que você adicione atributos data-* aos links dos módulos principais para medir o evento editorial_module_click.

Não altere o design.

Não altere classes CSS.

Não altere a lógica das queries.

Não altere textos.

Apenas adicione atributos de analytics.

Use estes parâmetros:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Devolva os arquivos completos corrigidos e verifique erros de sintaxe PHP.”

Atenção a isto: não deixe a IA “melhorar” o seu template.

A IA tende a mexer mais do que deve se você não limitar claramente. Diga de forma explícita que só deve adicionar atributos de analytics. Nada mais.

Depois de baixar os arquivos e subi-los para o site, passaríamos a testar tudo antes de publicar as mudanças e criar as dimensões personalizadas necessárias no GA4. 

Aqui embaixo eu explico tudo, mas antes quero que você veja todo o trabalho manual que economizamos seguindo este processo.

Caminho 2: tutorial passo a passo para rastrear manualmente os eventos do seu site

Vamos pelo caminho longo, para que você entenda o que a IA realmente fez.

Passo 1: decida qual evento você quer criar

Primeiro: não crie vinte eventos se puder criar um reutilizável e bem pensado.

No meu caso, eu queria medir cliques em módulos editoriais do site, então criei um evento único:

editorial_module_click

Mas o mesmo processo serve para outros eventos:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

A chave é pensar se o evento pode ser reutilizável agora ou no futuro. Por exemplo, se você quer medir CTAs, não crie isto:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Melhor criar cta_click e diferenciar cada clique com parâmetros. É mais limpo e escalável.

Passo 2: defina os parâmetros mínimos

Nunca é necessário medir tudo, mas sim o que importa. O que você realmente vai explorar e que permite tomar decisões.

No meu caso, para os cliques em módulos editoriais, usei estes parâmetros:

• page_type
• module_type
• module_area
• link_url
• link_text

Traduzido:

Parâmetro	O que indica
page_type	Tipo de página onde ocorre o clique (home, categoria, subcategoria, tag ou post). Cada uma tem uma estrutura diferente.
module_type	Tipo de módulo clicado: novidades, seção de recomendados, seção de últimos artigos… Cada template tem um bom punhado de seções.
module_area	Conteúdo, sidebar, footer…
link_url	URL do link. Adicionei porque já tinha criado a variável; se não, não teria feito, já que sei que vou olhar pouco para ela.
link_text	E esta ainda menos

Exemplo:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Como baixar listas longas do YouTube...

Com isso já posso comparar:

• Quais páginas e tipos de página geram mais cliques.
• Quais zonas da página geram mais cliques.
• Quais módulos geram mais cliques.

Mais do que suficiente para começar.

Passo 3: crie uma nomenclatura fechada

Isto é importante: não deixe que cada evento tenha um nome inventado na hora. Defina valores fechados.

Por exemplo, para page_type podem ser:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Use apenas os que precisar. No meu caso:

• home
• category
• subcategory
• tag
• post

Para module_area:

• main
• sidebar
• bottom
• footer
• post_footer

E para module_type, defina uma lista de acordo com o seu site.

No meu caso, esta lista era bastante longa, porque tenho muitos módulos diferentes. Alguns eram:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

Se o seu site for de serviços, poderia ter:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Ou, se for um ecommerce:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

A lógica é a mesma, só muda o contexto, mas o método é o mesmo.

Passo 4 (opcional): use atributos data no HTML

No meu caso, esta foi uma parte importante do sistema.

Eu poderia ter tentado fazer com que o GTM obtivesse o módulo clicado por uma classe CSS estranha ou pelo texto do botão, mas em projetos médios isso é frágil: hoje funciona, mas em 3 meses você muda o design e deixa de funcionar, porque não lembra como montou o evento.

A solução que eu dei foi adicionar atributos data diretamente nos links ou botões que você quer medir.

Exemplo:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

Com isso, o próprio link já leva a informação que você quer enviar. O GTM não precisa adivinhar nada, só ler os atributos.

Isto serve para quase qualquer evento:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Solicitar orçamento

</a>

Ou para um ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Tênis X

</a>

Sim, você adiciona mais código, mas é uma solução simples, compreensível e escalável.

Passo 5: crie um listener no GTM

Agora você precisa que Google Tag Manager escute os cliques em links com o seu atributo.

Crie uma tag de HTML personalizado.

Por exemplo:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

Este listener faz algo muito simples:

1. Detecta cliques.
2. Verifica se o link tem data-analytics-event.
3. Lê os atributos.
4. Faz um dataLayer.push().
5. O GTM usa esse evento para enviar dados ao GA4.

Não tem mais mistério, só escrever bem. E para isso você também pode usar a IA.

Passo 6: crie as variáveis no GTM

No GTM, crie variáveis de camada de dados para ler os parâmetros.

Por exemplo:

Variável GTM	Variável de camada de dados
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

Todas são do tipo Variável de camada de dados.

Não improvise nomes. Se no listener você envia module_type, no GTM a variável deve ler module_type. Não module-type. Não moduleType. Não tipo_modulo.

Melhor igual. Exatamente igual.

Passo 7: crie o acionador

Crie um acionador de evento personalizado.

Se o seu evento se chama:

editorial_module_click

O acionador deve escutar:

editorial_module_click

Se o seu evento se chama:

cta_click

O acionador deve escutar:

cta_click

Parece óbvio, mas muitos erros de GTM são simplesmente nomes que não coincidem.

No meu caso, o acionador foi:

• CE – Editorial Module Click
• Tipo: Evento personalizado
• Nome do evento: editorial_module_click

Passo 8: crie a tag do GA4

Crie uma tag de evento GA4.

Nome do evento:

editorial_module_click

Ou o evento que você tiver decidido.

Adicione os parâmetros:

Parâmetro GA4	Valor GTM
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

E use como acionador o evento personalizado que acabou de criar.

Com isso, toda vez que alguém clicar em um link etiquetado, o GTM enviará o evento ao GA4.

Testes e próximos passos

Não importa o caminho que você tenha seguido, aqui eles convergem. Depois de implementar tudo, o que você precisa fazer é garantir que tudo funciona como deve.

Além disso, vai faltar mexer em mais uma coisinha no GA4.

Passo 1: teste antes de publicar

Não publique às cegas:

1. Abra a visualização prévia do GTM.
2. Clique em vários módulos do site.
3. Verifique se aparece o evento editorial_module_click (ou o evento que você tiver criado).
4. Depois entre na tag GA4 e confira se os parâmetros têm valor (page_type, module_type…)

Se você vir valores vazios, revise:

• Que o HTML tenha os atributos data.
• Que o listener esteja carregando.
• Que o atributo do evento tenha o nome correto.
• Que as variáveis do GTM leiam o mesmo nome que o dataLayer envia.
• Que o acionador escute o evento correto.

Não avance até isto funcionar. Aqui a visualização prévia do GTM é sua amiga. Use-a.

Passo 2: revise DebugView

Quando publicar, revise a DebugView do GA4.

Você deveria ver seu evento entrando, mas atenção: a DebugView às vezes demora, não atualiza bem ou mostra outra sessão.

Por isso, se na extensão Tag Assistant você vê o hit enviado corretamente, o evento está saindo.

A DebugView é útil, mas não enlouqueça se demorar um pouco ou se não aparecer.

No meu caso, no Tag Assistant eu via o evento enviado como hit ao GA4, embora DebugView não o mostrasse na linha do tempo.

Pode acontecer.

Passo 3: crie dimensões personalizadas no GA4

Para terminar, no GA4, vá a:

Administrar > Exibição de dados > Definições personalizadas

E crie apenas as dimensões que você realmente vai usar. Ou seja, os parâmetros dos eventos que você vai analisar.

No meu caso:

Nome	Escopo	Parâmetro
page_type	Evento	page_type
module_type	Evento	module_type
module_area	Evento	module_area

Eu já tinha registrado link_url e link_text como dimensões personalizadas de etiquetagens anteriores.

Passo 4: (opcional) documente a nomenclatura

Se o projeto é grande, é imprescindível criar uma tabela de etiquetagem de eventos parecida com esta:

Evento	Parâmetro	Valores possíveis	Para que serve
editorial_module_click	page_type	home, category, subcategory, tag	Tipo de template
editorial_module_click	module_type	featured, latest, sidebar_popular	Tipo de módulo
editorial_module_click	module_area	main, sidebar, bottom	Zona visual

Assim, quando daqui a dois meses você tiver que adicionar outro módulo, não reinventa nada; só segue o sistema sem precisar voltar a pensar ou reformular.

E pronto, terminamos.

Se você seguiu o caminho manual, parabéns. Deve ter dado um pouco de trabalho.

Se você seguiu o da IA, é provável que se pergunte se realmente terminou. E sim, a resposta é sim. Um pouco surpreendente, não é?

Erros típicos

Vamos lá, vamos reunir todos os mencionados aqui e que todos nós já sofremos alguma vez.

Criar eventos demais

Ruim:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Melhor cta_click   com parâmetros.

Depender de classes CSS

Ruim:

Se o usuário clicar em .boton-verde-grande…

Amanhã você muda o design e adeus medição.

Melhor adicionar atributos data: data-analytics-event="cta_click"

Não testar no GTM

Publicar sem testar é jogar roleta. Use sempre Visualização prévia.

Registrar dimensões demais no GA4

Não transforme cada parâmetro em dimensão personalizada.

Comece exclusivamente pelas que você vai usar para analisar. O resto pode esperar e, se perceber que realmente precisa, você adiciona depois.

Mudar nomes no meio do processo

Se você usa module_type use sempre igual.

Não mude para:

• module-type
• moduleType
• tipo_modulo

Nem no meio do processo, nem no futuro. Parece uma bobagem, mas vai complicar sua análise quando você comparar períodos de tempo com os dois eventos..

Resumo rápido e conclusões

Vamos rever o processo geral manual, que é este:

1. Defina o que você quer saber.
2. Crie um evento reutilizável.
3. Defina poucos parâmetros.
4. Adicione atributos data-* aos links importantes.
5. Use a IA para revisar e modificar templates.
6. Crie um listener no GTM.
7. Crie variáveis de camada de dados.
8. Crie um acionador de evento personalizado.
9. Crie uma tag GA4.
10. Teste no Tag Assistant.
11. Publique.
12. Registre no GA4 apenas as dimensões necessárias.

E, como você pôde ver, isso é muito facilmente reduzível se pedir ajuda ao seu amigo ChatGPT.

Isto, que levaria horas para fazer manualmente, eu levei pouco mais de 30 minutos para deixar operacional.  

Parece magia quando você testa. De verdade.

E deixo você com algumas recomendações para fechar:

Medir eventos não é ter muitos ou todos os dados, mas sim obter informação para decidir. E para isso você só precisa de alguns.

A IA não substitui o seu critério de medição — aquele que diz quais dados medir —, mas sim economiza uma barbaridade de trabalho mecânico e, acima de tudo, ajuda você a manter consistência. 

E isto, em projetos grandes, é ouro puro. Não desperdice.