Cómo rastrear eventos con Google Tag gtag.js

Actualizado: 6 de mayo de 2025

Si has instalado Google Analytics 4 (GA4) en tu sitio web sin utilizar Google Tag Manager (GTM), es probable que estés utilizando gtag.js, conocido también como Google Tag. Este código de seguimiento nativo se utiliza para plataformas como GA4 o Google Ads.

Si estás pensando en implementar el seguimiento de eventos en tu sitio, seguramente ya te has encontrado con una gran cantidad de información sobre cómo hacerlo utilizando GTM. Sin embargo, si no instalaste GA4 a través de Google Tag Manager, ¿significa esto que no puedes rastrear eventos?

¡Por supuesto que no!

Entonces, ¿cómo puedes rastrear eventos con Google Tag (gtag.js) y enviarlos a GA4? ¡Sigue leyendo para descubrirlo!

Supuestos previos para el seguimiento de eventos

Antes de sumergirnos en el tutorial, hay dos supuestos que debemos tener en cuenta:

1. Has instalado gtag en tu sitio.
2. Tienes conocimientos básicos de JavaScript o trabajas con alguien que los tenga.

Esta guía está dirigida principalmente a usuarios que implementan el seguimiento de Google Analytics 4 directamente en su sitio web utilizando el fragmento de Google Tag (gtag.js), sin Google Tag Manager.

Te podrías encontrar en esta situación si:

• Tu sitio web es relativamente simple con necesidades mínimas de seguimiento y prefieres no utilizar un sistema de gestión de etiquetas.
• Tu Sistema de Gestión de Contenidos o plataforma tiene una integración de GA4 incorporada que utiliza gtag.js, y necesitas agregar seguimiento de eventos personalizados.
• Eres un desarrollador que trabaja en un entorno donde GTM no es el estándar o solución preferida.
• Estás solucionando problemas con una implementación existente de gtag.js.

Instalación de gtag.js en tu sitio

Suponiendo que has instalado GA4 con gtag en tu sitio, deberías ver el siguiente código en cada página de tu web:

El código anterior variará dependiendo de tu ID de medición. Para encontrar el ID de medición para tu flujo de datos de Google Analytics 4 en la interfaz de GA4, dirígete a Administración > Recopilación y modificación de datos > Flujos de datos.

Haz clic en el flujo de datos que te interese y encuentra el ID de medición.

Conocimientos básicos de JavaScript

Para rastrear eventos utilizando gtag, es esencial tener una buena comprensión de JavaScript. Aunque puedes revisar algunos conceptos básicos de JavaScript aquí, es importante señalar que probablemente necesitarás conocimientos más avanzados de los que este artículo ofrece.

Es posible que debas dejar la codificación a tus desarrolladores (o a alguien familiarizado con JavaScript). Sin embargo, es fundamental que comprendas el proceso detrás de todo. Esta comprensión te empodera para comunicarte eficazmente con tus desarrolladores, guiarlos sobre lo que deben hacer y probar su trabajo.

Aspectos importantes a considerar antes de comenzar

• Revisa la documentación del desarrollador de Google Tag para ayudarte a entender los diferentes comandos que puedes utilizar dentro de la función gtag().
• El enfoque principal será la comando event para enviar datos de eventos a GA4.

Como se mencionó anteriormente, hay tres partes del comando de evento:

1. ‘event’: Este es el comando y permanecerá sin cambios.
2. ‘<nombre_evento>’: El nombre del evento es una cadena de texto que aparecerá en los informes, por lo que asegúrate de que identifique de manera clara y concisa lo que hace el evento.
3. {<event_parameters>}: Los parámetros del evento son información adicional que deseas recopilar relacionada con el evento, proporcionada como un par clave-valor. Hay parámetros que se rastrean automáticamente, como language, page_location, page_referrer, page_title y screen_resolution.

Para los nombres de eventos y parámetros, sigue la convención de nombres recomendada.

También hay algunos límites de eventos que deberías conocer. Hay un máximo de 40 caracteres para los nombres de eventos y 25 parámetros por evento. Ten en cuenta que los parámetros rastreados automáticamente también se cuentan dentro de los 25 parámetros permitidos.

Ejemplo: Estos se activarán en cada vista de página, ya que no se añadió ninguna lógica para especificar qué acciones activarán estos eventos (los parámetros son estáticos; consulta un ejemplo con parámetros dinámicos a continuación).

gtag('event', 'test_event_1_no_params'); // ejemplo 1
gtag('event', 'test_event_2',
{'test_parameter':'hey', 'test_value':5}); // ejemplo 2

Para probar esto, debes descargar y habilitar la extensión Google Analytics Debugger en Chrome para activar Debugview. Una vez descargada, necesitas habilitar la extensión haciendo clic en el ícono en la barra de herramientas de extensiones.

Una vez que actives la extensión (el ícono dirá «Activado»), ve a Google Analytics 4. Dirígete a Administración y selecciona «Vista de depuración» en Visualización de datos.

Si tú o tus desarrolladores implementaron los eventos correctamente, deberías ver cómo llegan aquí.

Puedes hacer clic en un evento para ver los parámetros incluidos en la recopilación de datos.

Si Debugview no está funcionando, consulta este artículo para obtener algunas posibles soluciones.

Creación de un evento con Google Tag

Ahora que comprendemos los conceptos básicos, profundicemos en un ejemplo. En este caso, vamos a rastrear clics en enlaces en una página web y recopilar el texto del clic, la URL del clic, el ID del clic y la clase del clic.

Exploración con la consola

Primero, querrás familiarizarte con la exploración de tu sitio utilizando la consola. Para abrir la consola, haz doble clic en tu página web y selecciona «Inspeccionar».

A continuación, navega a la pestaña «Consola».

Esto te ayudará a determinar dónde se almacena la información en tu sitio. Para ello, utilizarás dos líneas de código:

• La primera línea utiliza el método addEventListener, que busca interacciones específicas, en este caso, el evento «click».
• La segunda línea nos dirá qué información está disponible con el evento de clic a través de la consola.

<script>
document.addEventListener('click', function(event) { // el listener
  console.log(event); // revisando qué información está disponible en la consola
});
</script>

Una vez que tú o tu desarrollador hayan agregado el código anterior a tu sitio, limpia la consola (en el lado izquierdo de la consola).

Como queremos hacer un evento solo para clics en enlaces, actualiza la página y haz clic en un enlace de tu sitio. Un detalle a tener en cuenta es que la consola se refrescará (perdiendo toda la información) si haces clic en un enlace que lleva a una parte diferente de tu sitio, así que necesitarás hacer clic derecho en el enlace para que se abra en una nueva pestaña y la página permanezca igual.

Abre la consola y busca el «PointerEvent». El propósito de este ejercicio es que comprendas qué información se recopila con el evento (que el PointerEvent te indicará) y decidir cuál de esta información deseas recopilar con el evento.

Para explorar la información disponible para el clic, expande el PointerEvent haciendo clic en la flecha negra (así podrás profundizar en las capas de información en la Consola).

Puedes encontrar información muy útil si desplazas hacia abajo hasta el objeto target (asegúrate de hacer clic en la flecha negra y expandir la información en el objeto). Toma nota de la información que deseas recopilar con tu evento para utilizarla en la siguiente sección mientras comenzamos a construir el código del evento.

Mejoras en el código

Esperemos que ahora hayas tenido la oportunidad de explorar la información que puedes y deseas recopilar con tu evento. Usando la información del PointerEvent, comenzaremos a construir el código para un evento de clic en enlace paso a paso.

Este es el código con el que comenzamos:

<script>
document.addEventListener('click', function(event) { // la función});
</script>

Agregar una condición

Aunque hicimos clic en un enlace para ver la información recopilada con un evento de clic (en el ejemplo anterior), es posible que hayas notado que el evento de clic se activa si haces clic en un botón, enlace o simplemente en cualquier parte de tu sitio. Dado que queremos restringir nuestro evento solo a clics en enlaces, debemos determinar qué distingue un clic en enlace de todos los demás clics.

En este caso, el parámetro tagName (ubicado en el objeto target) proporciona un identificador único para cuando un clic es en un enlace. Cuando el valor del parámetro es «A», indica que alguien ha hecho clic en un enlace.

Para actualizar el código, añadiremos una declaración IF que indique que el evento solo debe activarse cuando el parámetro tagName sea «A».

<script>
document.addEventListener('click', function(event) { // la función
  if (event.target.tagName === 'A') { // la condición
  }
});
</script>

Agregar un nombre al evento

A continuación, cada evento en GA4 necesita un nombre, así que debemos agregar un nombre de evento, por ejemplo, link_click, al código. Asegúrate de seguir la convención de nombres recomendada.

<script>
document.addEventListener('click', function(event) { // la función
  if (event.target.tagName === 'A') { // la condición
    gtag('event', 'link_click', { // nombre del evento de GA4
       // pronto agregaremos más parámetros aquí
    });
  }
});
</script>

Agregar parámetros

En algunos casos, recopilar solo el nombre del evento es suficiente si solo necesitas saber que algo sucedió pero no tienes más detalles sobre eso. Sin embargo, en el caso de clics en enlaces, simplemente enviar el nombre del evento no es suficiente. Tu sitio seguramente tiene muchos enlaces, así que, ¿cómo sabrás cuál fue el que se hizo clic?

Aquí es donde entran los parámetros. Ellos completan los espacios en blanco para darte una mejor idea de lo que está sucediendo en tu sitio.

Queremos recopilar cuatro parámetros para este evento: link_text, link_url, link_id y link_class. ¿Cómo llegué a los nombres de los parámetros? Usando los mismos parámetros que se recopilan con los eventos de medición mejorada.

Es posible que te estés preguntando cómo los parámetros de un elemento pueden variar dependiendo de lo que un usuario hace clic. Entonces, ¿cómo recopilas información única para cada clic en enlace?

¡Buena pregunta! Haremos que los parámetros sean dinámicos, cambiando según lo que haga clic el usuario. Aquí es donde navegar en la consola resulta útil.

En este ejemplo, los datos de cada valor provendrán de un parámetro en el objeto target. Comenzamos con el event, ya que ahí es donde se almacena la información, y luego profundizamos en el objeto target para encontrar los parámetros de interés.

Para mi sitio, el texto del enlace que hice clic se encuentra a través del parámetro event.target.innerText.

Recuerda que no puedes simplemente poner innerText ya que el parámetro innerText se encuentra dentro del objeto target, que a su vez está dentro del objeto event. Cada vez que haces clic en la flecha para expandir un objeto, debes agregar ese objeto a tu valor de parámetro.

Por lo tanto, si simplemente pones innerText (o cualquier otro parámetro dentro del target), obtendrás un error.

Al buscar dónde se encuentran los valores para los demás parámetros (dentro del objeto target), el código que utilizaría para rastrear clics en enlaces es:

<script>
document.addEventListener("click", function(event) { // la función
  if (event.target.tagName === "A") {
    gtag('event', 'link_click', {
      'link_text': event.target.innerText,
      'link_url': event.target.href,
      'link_id': event.target.id,
      'link_classes': event.target.className
    });
  }
});
</script>

Como siempre, querrás probar el evento en la consola y en Debugview. Asegúrate de que la extensión Google Analytics Debugger siga activada y procede a Google Analytics 4. Ve a Administración y selecciona «Vista de depuración» en Visualización de datos.

Abre el evento «link_click» y asegúrate de que los parámetros recojan el valor correcto.

Ten en cuenta que si el evento tiene un parámetro indefinido, no aparecerá en la pestaña de Parámetros cuando hagas clic en el evento en DebugView.

Este es solo un ejemplo de cómo puedes rastrear eventos con gtag.js. Tu sitio puede recopilar parámetros de manera diferente y probablemente querrás rastrear diferentes eventos, así que adapta esto a tus necesidades específicas.

Rastreo de eventos con Google Tag: Consideraciones finales

Si bien prefiero trabajar con GTM, que es lo que recomiendo, tu empresa puede haber decidido optar por gtag en su lugar. Espero que este artículo te haya sido útil y haya reducido tus preocupaciones sobre el seguimiento de eventos con gtag.

Si deseas aprender cómo instalar GA4 con GTM, consulta este artículo. Si tu empresa está en contra de GTM pero deseas convencerlos para que comiencen a usarlo, lee estos consejos.

Recuerda que el código que implementes dependerá en gran medida de los detalles específicos de tu sitio, así que aprovecha la consola para inspeccionar los diferentes elementos que deseas rastrear.

Trabaja de cerca con tu desarrollador o con alguien que conozca JavaScript (si no eres tú) para ayudarte a alcanzar tus objetivos de seguimiento, ya que esto no es algo que puedas simplemente copiar y pegar de otros.