Cómo etiquetar eventos web con GTM y GA4 fácilmente gracias a la IA

Medir eventos en una web suena fácil.

Pero luego abres cada una de tus plantillas de WordPress y empiezas a pensar en clics, botones, módulos, transacciones, formularios, menús, CTAs, tarjetas, banners, sidebars…

Y lo dejas para otro día.

Porque una cosa es pensar “quiero medir lo que pasa en mi web” y otra muy distinta es etiquetar bien una web real.

Una web con plantillas distintas.

Con módulos repetidos en varias secciones.

Con tarjetas y pestañas que parecen iguales pero que cambian en algo.

Con botones visualmente idénticos pero cumplen funciones completamente diferentes.

Y aquí, como en otras muchas partes, la IA puede ayudarte bastante.

No porque vaya a decidir tu estrategia de medición por ti -eso sigue siendo cosa tuya, aunque también te puede aportar propuestas- sino porque puede ejecutar casi todo el trabajo: 

• Revisar plantillas.
• Detectar módulos y componentes similares.
• Proponer una estructura reutilizable.
• Definir una nomenclatura si no tienes clara la tuya.
• Preparar un contenedor de GTM.
• E incluso tocar el código de tu web para, por ejemplo, añadir atributos “data-” que faciliten la medición. 

Todo esto acabo de hacerlo yo en mi web, así que te cuento el proceso tomando como ejemplo mi caso real.

He preparado la medición de clics en los módulos editoriales de mi web (artículos destacados, recomendados, novedades, etc. en cada página), pero el sistema sirve para cualquier evento.

Dicho esto, aquí tenemos dos vías: la manual y la automatizada con IA.

Vamos a empezar con la sencilla para que veas que es muy rápida y luego después, si quieres, te miras todo lo que te has ahorrado al dejárselo a la IA.

Vía 1: tutorial paso a paso para trackear los eventos de tu web rápidamente con IA

Empezamos con la versión rápida y cortita.

Paso 1: pide a la IA que te ayude a diseñar la estructura

Si tienes experiencia en analítica, esto ya te lo sabes. Pero si no la tienes o no conoces GA4 IA te puede ser muy útil.

Para ello solo tienes que ir a tu herramienta preferida (ChatGPT, Claude o Gemini) y hacer dos cosas en un prompt:

1. Añádele pantallazos completos (de arriba hasta abajo) de cada sección de la web (portada, categorías, checkout, etc.)
2. Explícale lo que quieres.

Es decir: 

“Quiero medir clics en los módulos principales de mi web. Antes de tocar código, ayúdame a definir una nomenclatura de evento y parámetros para que sea reutilizable en GTM y GA4.
No quiero un evento por cada módulo. Quiero un único evento con parámetros.

Las plantillas que tengo son:

- home

- categoría

- subcategoría

- etiqueta

- post

Propón:

1. nombre del evento

2. parámetros mínimos

3. valores permitidos

4. ejemplos reales de dataLayer

5. dimensiones que debería crear en GA4”

Esto obliga a la IA a pensar en estructura antes que en código.

Y eso es justo lo que te interesa, porque te propondrá un plan que, generalmente, tendrá bastante sentido. Porque si empiezas a etiquetar una web sin nomenclatura, acabarás con una analítica Frankenstein.

Pelotea con la IA hasta que tengas clara la estructura y por qué hacerlo así.

Paso 2: pásale tu contenedor de GTM

Y deja que haga casi todo el trabajo:

1. Exporta el contenedor de GTM del proyecto y chútaselo a la IA.
2. Pídele que ejecute los cambios pertinentes en base a la estrategia definida en el punto anterior.
3. Una vez lo tenga listo, te lo descargas.
4. Lo importas en GTM. La IA te dirá si tienes que fusionarlo con el que está arriba o reemplazarlo.

Aquí es posible que hayamos acabado o no, en función de cómo crea la IA o como le hayamos dicho que ejecute el plan de etiquetado.

Paso 3 (opcional): pasa el código de tus plantillas a la IA

Si para el etiquetado es necesario añadir atributos data (te explico en qué consisten en la parte del etiquetado manual) le puedes pasar a la IA las plantillas reales de tu web. Y aquí es donde ahorras tiempo de verdad.

En WordPress pueden ser archivos del tema que tengas activo como:

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

O las que use tu tema.

Súbeselas y dale una instrucción concreta:

“Te paso las plantillas actuales de mi web.
Quiero que añadas atributos data-* a los enlaces de los módulos principales para medir el evento editorial_module_click.

No cambies el diseño.

No cambies clases CSS.

No cambies lógica de queries.

No cambies textos.

Solo añade atributos de analítica.

Usa estos parámetros:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Devuélveme los archivos completos corregidos y comprueba errores de sintaxis PHP.”

Ojo con esto: no dejes que la IA “mejore” tu plantilla.

La IA tiende a tocar más de la cuenta si no se lo limitas. Dile claramente que solo añada atributos de analítica. Nada más.

Una vez descargados los ficheros y subidos a la web, ya pasaríamos a testear todo antes de publicar los cambios y crear las dimensiones personalizadas necesarias en GA4. 

Aquí abajo te explico todo, pero antes quiero que veas todo el trabajo manual que nos hemos ahorrado siguiendo este proceso.

Vía 2: tutorial paso a paso para trackear manualmente los eventos de tu web

Vamos con la vía larga, para que entiendas qué es lo que ha hecho la IA realmente.

Paso 1: decide qué evento quieres crear

Lo primero: no crees veinte eventos si puedes crear uno reutilizable y bien pensado.

En mi caso quería medir clics en módulos editoriales de la web, así que creé un evento único:

editorial_module_click

Pero el mismo proceso sirve para otros eventos:

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

La clave está en pensar si el evento puede ser reutilizable ahora o en el futuro. Por ejemplo, si quieres medir CTAs, no crees esto:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Mejor crea cta_click y diferencia cada clic con parámetros. Es más limpio y escalable.

Paso 2: define los parámetros mínimos

Nunca es necesario medir todo, sino lo importante. Lo que realmente vas a explotar y que te permita tomar decisiones.

En mi caso, para los clics en módulos editoriales, usé estos parámetros:

• page_type
• module_type
• module_area
• link_url
• link_text

Traducido:

Parámetro	Qué indica
page_type	Tipo de página donde ocurre el clic (home, categoría, subcategoría, etiqueta o artículo). Cada una tiene una estructura diferente.
module_type	Tipo de módulo clicado: novedades, sección de recomendados, sección de últimos articulos… Cada plantilla tiene un buen puñado de secciones.
module_area	Contenido, sidebar, footer…
link_url	URL del enlace. Lo añadí porque ya tenía creada la variable, si no, no lo hubiera hecho, ya que sé que la voy a mirar poco.
link_text	Y ésta aún menos

Ejemplo:

• page_type = category
• module_type = latest
• module_area = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Cómo descargar listas largas de YouTube...

Con esto ya puedo comparar:

• Que páginas y tipos de páginas generan más clics.
• Qué zonas de la página generan más clics.
• Qué módulos generan más clics.

Más que de sobra para empezar.

Paso 3: crea una nomenclatura cerrada

Esto es importante: no dejes que cada evento tenga un nombre inventado sobre la marcha. Define valores cerrados.

Por ejemplo, para page_type pueden ser:

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

Usa solo los que necesites. En mi caso:

• home
• category
• subcategory
• tag
• post

Para module_area:

• main
• sidebar
• bottom
• footer
• post_footer

Y para module_type, define una lista según tu web.

En mi caso, este listado era bastante largo, ya que tengo bastantes módulos diferentes. Algunos eran:

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

Si tu web es de servicios, podrías tener:

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

O, si es un ecommerce:

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

La lógica es la misma, solo cambia el contexto, pero el método es el mismo.

Paso 4 (opcional): usa atributos data en el HTML

En mi caso, ésta es fue una parte importante del sistema.

Podría haber intentado que GTM obtuviera el módulo que se ha clicado por una clase CSS rara o por el texto del botón, pero en proyectos medianos eso es frágil: hoy funciona, pero en 3 meses cambias el diseño y deja de funcionar, porque no recuerdas cómo montaste el evento.

La solución que yo le di es añadir atributos data directamente en los enlaces o botones que quieras medir.

Ejemplo:

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

Con esto, el propio enlace ya lleva la información que quieres enviar. GTM no tiene que adivinar nada, solo leer los atributos.

Esto sirve para casi cualquier evento:

<a
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Solicitar presupuesto

</a>

O para un ecommerce:

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

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Zapatilla X

</a>

Sí, añades más código, pero es una solución simple, comprensible y escalable.

Paso 5: crea un listener en GTM

Ahora necesitas que Google Tag Manager escuche los clics en enlaces con tu atributo.

Crea una etiqueta de HTML personalizado.

Por ejemplo:

<script>
(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 hace algo muy sencillo:

1. Detecta clics.
2. Comprueba si el enlace tiene data-analytics-event.
3. Lee los atributos.
4. Hace un dataLayer.push().
5. GTM usa ese evento para enviar datos a GA4.

No tiene más misterio, solo escribirlo bien. Y para esto también puedes usar la IA.

Paso 6: crea las variables en GTM

En GTM, crea variables de capa de datos para leer los parámetros.

Por ejemplo:

Variable GTM	Variable de capa de datos
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 son del tipo Variable de capa de datos.

No improvises nombres. Si en el listener envías module_type, en GTM la variable debe leer module_type. No module-type. No moduleType. No tipo_modulo.

Mejor igual. Exactamente igual.

Paso 7: crea el activador

Crea un activador de evento personalizado.

Si tu evento se llama:

editorial_module_click

El activador debe escuchar:

editorial_module_click

Si tu evento se llama:

cta_click

El activador debe escuchar:

cta_click

Parece obvio, pero muchos errores de GTM son simplemente nombres que no coinciden.

En mi caso, el activador fue:

• CE – Editorial Module Click
• Tipo: Evento personalizado
• Nombre del evento: editorial_module_click

Paso 8: crea la etiqueta de GA4

Crea una etiqueta de evento GA4.

Nombre del evento:

editorial_module_click

O el evento que hayas decidido.

Añade los 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}}

Y usa como activador el evento personalizado que acabas de crear.

Con esto, cada vez que alguien haga clic en un enlace etiquetado, GTM enviará el evento a GA4.

Pruebas y siguientes pasos

Da igual la vía que hayas seguido que aquí convergen. Una vez implementado todo lo que tienes que hacer es asegurarte de que todo funciona como debe.

Además, faltará tocar una cosita más en GA4.

Paso 1: prueba antes de publicar

No publiques a ciegas:

1. Abre la vista previa de GTM.
2. Haz clic en varios módulos de la web.
3. Comprueba que aparece el evento editorial_module_click (o el evento que hayas creado).
4. Después entra en la etiqueta GA4 y revisa que los parámetros tienen valor (page_type, module_type…)

Si ves valores vacíos, revisa:

• Que el HTML tenga los atributos data.
• Que el listener se esté cargando.
• Que el atributo del evento tenga el nombre correcto.
• Que las variables de GTM lean el mismo nombre que envía el dataLayer.
• Que el activador escuche el evento correcto.

No sigas hasta que esto funcione. Aquí la vista previa de GTM es tu amiga. Úsala.

Paso 2: revisa DebugView

Cuando publiques, revisa la DebugView de GA4.

Deberías ver tu evento entrando, pero ojo: la DebugView a veces tarda, no refresca bien o te muestra otra sesión.

Por eso, si en l a extensión Tag Assistant ves el hit enviado correctamente, el evento está saliendo.

La DebugView es útil, pero no te vuelvas loco si tarda un poco o si no sale.

En mi caso, en Tag Assistant veía el evento enviado como hit a GA4, aunque DebugView no lo mostraba en la línea temporal.

Puede pasar.

Paso 3: crea dimensiones personalizadas en GA4

Para acabar, en GA4, ve a:

Administrar > Visualización de datos > Definiciones personalizadas

Y crea sólo las dimensiones que vayas a usar de verdad. Es decir, los parámetros de los eventos que vayas a analizar.

En mi caso:

Nombre	Alcance	Parámetro
page_type	Evento	page_type
module_type	Evento	module_type
module_area	Evento	module_area

Ya tenía registradas link_url y link_text como dimensiones personalizadas de etiquetados anteriores.

Paso 4: (opcional) documenta la nomenclatura

Si el proyecto es gordo, es imprescindible crear un cuadro de etiquetado de eventos parecido a éste:

Evento	Parámetro	Valores posibles	Para qué sirve
editorial_module_click	page_type	home, category, subcategory, tag	Tipo de plantilla
editorial_module_click	module_type	featured, latest, sidebar_popular	Tipo de módulo
editorial_module_click	module_area	main, sidebar, bottom	Zona visual

Así, cuando dentro de dos meses tengas que añadir otro módulo, no reinventas nada, solo sigues el sistema sin tener que volver a pensar o replantear.

Y ya está, ya hemos acabado.

Si has seguido la vía manual, enhorabuena. Te habrá costado un poco.

Si has seguido la de la IA, es probable que te preguntes si realmente has acabado. Y sí, la respuesta es sí. Un poco sorprendente, ¿verdad?

Errores típicos

Venga, recopilemos todos los mencionados aquí y qee todos hemos sufrido alguna vez.

Crear demasiados eventos

Mal:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Mejor cta_click  con parámetros.

Depender de clases CSS

Mal:

Si el usuario hace clic en .boton-verde-grande…

Mañana cambias el diseño y adiós medición.

Mejor añadir atributos data: data-analytics-event=»cta_click»

No probar en GTM

Publicar sin probar es jugar a la ruleta. Usa siempre Vista previa.

Registrar demasiadas dimensiones en GA4

No conviertas cada parámetro en dimensión personalizada.

Empieza exclusivamente por las que vas a usar para analizar. Lo demás puede esperar y, si ves que lo necesitas de verdad, se lo añades luego.

Cambiar nombres a mitad del proceso

Si usas module_type úsalo siempre igual.

No cambies a:

• module-type
• moduleType
• tipo_modulo

Ni en mitad del proceso, ni a futuro. Parece una tontería, pero te complicará la analítica cuando compares periodos de tiempo con ambos eventos..

Resumen rápido y conclusiones

Repasemos el proceso general manual, que es este:

1. Define qué quieres saber.
2. Crea un evento reutilizable.
3. Define pocos parámetros.
4. Añade atributos data-* a los enlaces importantes.
5. Usa la IA para revisar y modificar plantillas.
6. Crea un listener en GTM.
7. Crea variables de capa de datos.
8. Crea un activador de evento personalizado.
9. Crea una etiqueta GA4.
10. Prueba en Tag Assistant.
11. Publica.
12. Registra en GA4 solo las dimensiones necesarias.

Y, como has podido ver, es muy fácilmente reducible si le pides ayuda a tu amigo ChatGPT.

Esto, que se tardaría horas en hacerlo manualmente, yo he tardado poco más de 30 minutos en tenerlo operativo. 

Parece magia cuando lo pruebas. De verdad.

Y te dejo con un par de recomendaciones para cerrar:

Medir eventos no es tener muchos o todos los datos, sino obtener información para decidir. Y para ello solo te hacen falta algunos.

La IA no sustituye tu criterio de medición -el que te dice qué datos medir- pero sí te ahorra una barbaridad de trabajo mecánico y, sobre todo, te ayuda a mantener consistencia. 

Y esto, en proyectos grandes, es oro puro. No lo desaproveches.