Seguimiento de eventos de Google Analytics: cómo configurarlo

El nombre del evento «menu_clicks» puede ser cualquier cosa que desee y tendrá tres parámetros que proporcione. Este es un enfoque si no tiene Google Tag Manager y prefiere la implementación de gtag.

Puede usar parámetros personalizados para pasar valores adicionales a eventos predefinidos, por ejemplo, inscribirse evento. Según la documentación de GA, solo admite un parámetro llamado «método» (que puede ser cualquier cosa, por ejemplo, inicio de sesión social, correo electrónico, etc.)

gtag("event", "sign_up", {
method: "Google"
});

Al agregar dimensiones personalizadas, también puede pasar información adicional, como el plan de suscripción de registro (por ejemplo, «prueba gratuita», «básico», «premium»).

Puede agregar la dimensión personalizada «sign_up_plan» y pasar junto con «método».

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

Para implementar todo esto, necesita habilidades básicas de programador JS, que puede aprender rápidamente usando ChatGPT. Ahora puede probar el aviso:

Código JavaScript que activa un evento personalizado de gtag con el nombre ‘menu_clicks’ cuando un usuario hace clic en un elemento de menú con una etiqueta principal li que tiene la clase ‘.menu-item’. Pase los siguientes parámetros de eventos personalizados: ‘event_category’ debe establecerse en ‘Menú Clicks’, ‘event_action’ debe establecerse en el enlace del elemento en el que se hizo clic y ‘event_label’ debe establecerse en el texto ancla del elemento en el que se hizo clic.

Prueba este aviso y verás que ocurre la magia.

Puede copiar y pegar ese código en su editor de código CMS, ¡y listo!

Ahora, configuremos el mismo seguimiento de eventos usando la etiqueta GTM.

Supongo que ya instaló GA4 a través de Google Tag Manager y continuará con los pasos a partir de ahí.

Deberá agregar dimensiones personalizadas según los pasos explicados en el sección anterior.

Cómo configurar el seguimiento de eventos en Google Tag Manager

Cree una nueva variable de JavaScript en GTM que devuelva el nombre de la clase de etiqueta principal del ancla en la que se hizo clic, ya que, en GTM, no hay una forma integrada de obtener los atributos del elemento DOM principal.

Navegar a Variables > Variables definidas por el usuario y haga clic en el Nuevo botón en la esquina superior derecha. En el cuadro de diálogo emergente, seleccione JavaScript personalizado.

Copie y pegue este código en él.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

Este código devuelve el atributo de clase principal de un elemento seleccionado cuando hay un elemento principal con clase ‘.menu-item’, o devuelve un valor vacío si no existe dicho elemento principal.

Podemos usar esto para asegurarnos de que solo detectamos los clics en los enlaces de los elementos del menú, no en otros enlaces en otras partes de la página.

Cree un nuevo disparador en GTM que se active en todos los clics en elementos con un padre

Vaya a Desencadenadores y haga clic en el Nuevo botón en la esquina superior derecha.

En el cuadro de diálogo emergente, seleccione Haga clic en – Solo enlaces.

Elegir Algunos clics en enlaces > Configurar para que se active en los clics donde la clase de elemento principal contiene la cadena «menu-item».

Vaya a Etiquetas y agregue la etiqueta de evento GA4.

Captura de pantalla de GA4, abril de 2023

Complete como nombre de evento «main_menu_clicks» o el nombre que desee para el evento, y agregue parámetros personalizados event_category, event_action y event_label.

Captura de pantalla de GA4, abril de 2023

Para acción de evento y etiqueta, elija Haga clic en Texto y Haga clic en URL variables incorporadas.

Captura de pantalla de GA4, abril de 2023

Elija el activador de clics de menú que creamos antes y guarde la etiqueta.

Publicar cambios y depurar para asegurarse de que cuando haga clic en los elementos de su menú, el evento se active con todos los parámetros configurados correctamente.

Cómo implementar el seguimiento de eventos personalizados mediante el método dataLayer.push()

Si aún prefiere la codificación personalizada y tiene GTM, puede usar el método datalayer.push().

En ese caso, deberá agregar los parámetros event_category, event_action y event_label en GTM como variables de capa de datos.

Y en su sitio web sección, debe usar el código a continuación.

¿Cómo sé si el seguimiento de eventos de Google Analytics está funcionando?

También es importante verificar si ve un registro de eventos con los mismos parámetros en GA4 depurar vista. Puede suceder que GTM se active, pero debido a una mala configuración, no se pasará a GA4.

En caso de que tenga la implementación de gtag, debe habilitar el modo de depuración instalando Chrome extensión o agregando una línea de código a su GA4 configuración.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

Siempre depure y asegúrese de que todos los parámetros personalizados pasen como se esperaba.

Conclusión

GA4 es bastante desafiante y no es una herramienta de análisis plug-and-play como Universal Analytics; necesitas pasar una buena cantidad de tiempo aprendiendo.

Por otro lado, viene con muchas funciones nuevas que puede usar y mejorar sus análisis a un nivel sin precedentes.

Al poder personalizar el seguimiento de eventos, obtiene una habilidad poderosa que incluso puede ayudarlo a solucionar algunos de los modelos de atribución que Google Analytics está eliminando mediante el seguimiento de la fuente de la primera visita de los usuarios en una dimensión personalizada.

Con esto en mente, publicaré una guía paso a paso sobre cómo restaurar (parcialmente) el primer modelo de atribución utilizando parámetros de eventos personalizados.

Más recursos:

• Preguntas frecuentes sobre Google Analytics 4: mantenga la calma y realice un seguimiento
• Seguimiento de formularios con Google Analytics (a través de WordPress y GTM)
• Learn GA4: 17 guías principales y recursos educativos

Imagen destacada: Andrey_Popov/Shutterstock