Explicación del desencadenante de eventos personalizados de Google Tag Manager

Actualizado: 18 de julio de 2023. Tengo que ser honesto con usted. Me he esforzado mucho en encontrar una introducción interesante e intrigante para esta entrada de blog y creo que he fallado. Pero esto no significa que el Disparador de Eventos Personalizados sea un concepto aburrido y raramente usado. En realidad, esto no puede estar más lejos de la verdad. Sin él, no serías capaz de rastrear el abandono de formularios, envíos de formularios AJAX, etc. De hecho, más del 90% de las recetas de Google Tag Manager se basan en eventos personalizados.

Entonces, ¿qué es exactamente y por qué deberías molestarte en absoluto? En esta entrada del blog, explicaré todo lo que necesitas saber sobre el evento personalizado de Google Tag Manager.

¿Qué es un evento personalizado de Google Tag Manager?

El evento personalizado de Google Tag Manager se utiliza para realizar un seguimiento de las interacciones que puedan tener lugar en tu sitio web o en tu aplicación para móviles que no se gestionen mediante métodos estándar. Entre los métodos de seguimiento estándar se incluyen:

Los métodos de seguimiento estándar incluyen:

Todos los demás eventos que se producen en la Capa de datos se denominan eventos personalizados. A continuación, se presentan algunos ejemplos:

• Su sitio web contiene un formulario que un disparador de envío de formularios estándar no puede rastrear. ¿Qué es lo que hace? Le pides a un desarrollador que active un evento de la Capa de Datos siempre que ese formulario se envíe con éxito. Ese evento es un Evento de Envío de Formulario Personalizado (en pocas palabras, Evento Personalizado).
• El usuario se conecta a su cuenta. Desafortunadamente, la URL de la página no cambia, por lo tanto, no puedes simplemente rastrear las vistas de la página. Puedes pedirle a un desarrollador que empuje el evento de «ingreso» a la capa de datos. Después de usted, tendrá que capturar el evento en la capa de datos utilizando el disparador de «Evento personalizado».
• Y la lista podría seguir y seguir. Recuerde, cada evento de la capa de datos que no soporta un disparador GTM predeterminado se llama «Evento personalizado».

¿De dónde vienen los eventos personalizados?

Normalmente (pero no necesariamente), los eventos personalizados se envían mediante escuchas automáticas de eventos personalizados, funciones de JavaScript que escuchan interacciones particulares en una página web. En caso de que algo importante suceda, esos oyentes inician un dataLayer.push evento.

Así es como los eventos personalizados ven la luz del día. Ya he reunido un montón de oyentes de eventos personalizados listos para ser escuchados que están a su disposición. Si quieres rastrear algo más específico (pero desafortunadamente no sabes cómo codificar), pídele a un desarrollador que te escriba un oyente de auto-eventos personalizado. Créeme, son muy buenos en esto (si saben JavaScript, ¡por supuesto!).

No soy un desarrollador y una vez pasé más de un día tratando de averiguar cómo rastrear una interacción particular en una página web. Lo creas o no, pero un experimentado colega mío (desarrollador de JavaScript) pasó 15 minutos escribiendo un oyente personalizado para esa misma interacción (¡era como 10-15 líneas de código!).

Trabajar codo con codo con un desarrollador

Supongo que la mayoría de mis lectores empezaron a usar Google Tag Manager después de oír promesas de que los desarrolladores ya no son necesarios en el seguimiento de la web. A partir de ahora, los analistas web podrán rastrear todas las interacciones y desplegar etiquetas de marketing por sí mismos. ¿Le resulta familiar?

Bueno, no puedo decir que la afirmación anterior sea una mentira. Pero tampoco puedo decir que sea totalmente cierta. No hay blanco y negro.

Apuesto a que puedes rastrear un montón de interacciones en la web sin la participación de nadie, ¡y eso es genial! Pero la web está llena de soluciones únicas, no estándar y realmente extrañas. Si no sabes escribir tu propio JavaScript, tienes que prepararte para trabajar con un desarrollador en equipo.

Cooperación

Imaginemos que hay una cierta interacción que desea rastrear. Ya has probado varios métodos descritos en otros blogs. No ha habido suerte. ¿Cuáles son tus próximos pasos? Decides pedirle ayuda al desarrollador.

¡No es ninguna vergüenza! De hecho, trabajar codo con codo con un desarrollador es una de las mejores prácticas de Google Tag Manager.

¿Qué es lo siguiente?

El primer paso. Preparar un código de eventos de la capa de datos.

Ahora, necesitas preparar un fragmento de código de eventos de la capa de datos y dárselo a un desarrollador.

He tenido una rápida discusión con Simo Ahava en uno de los comentarios de mi entrada en el blog y según él, es mejor usar window.dataLayer .push en lugar de dataLayer.push . Como Simo es un conocido especialista en GTM con una sólida formación en el desarrollo de JavaScript, confío plenamente en él y sigo sus recomendaciones.

Ok, volvamos a mi ejemplo de código dataLayer.push. No tienes que ser un desarrollador para entender cómo preparar un fragmento de código de eventos de DataLayer. Sólo copia mi ejemplo y edítalo. Toma este código:

Si quieres añadir datos adicionales, hazlo:

Acabo de añadir dos líneas adicionales con » registrationCountry » y «plan» . Sólo ten en cuenta que la última línea no debe terminar con una coma. En mi caso este fue:

 "plan": "Premium

Si lo desea, puede añadir 10 líneas más.

Además, dígale al desarrollador que esos dos atributos deben ser reemplazados dinámicamente. Si un visitante elige Noruega como país de registro, entonces este valor debe ser cambiado también en el fragmento de evento de la Capa de Datos.

"País de registro": "Noruega",

PASO 2. Decirle al desarrollador cuando disparar este código

Otro paso importante es explicarle al desarrollador CUANDO quieres que el evento dataLayer.push se dispare. El evento DataLayer debe dispararse después de que se produzca el envío exitoso.

PASO 3. Probar el evento

Después de que un desarrollador diga que su tarea está completa, habilite el modo de vista previa y depuración del GTM para probarlo. Completa esa interacción específica (por ejemplo, envía el formulario) y sigue buscando el evento de Capa de datos en el flujo de eventos del modo de Vista previa y Depuración. Debería verse así:

Hasta ahora todo bien. Ahora, vamos a comprobar si el desarrollador pasó dos atributos adicionales que usted pidió, registrationCountry y plan. En el modo Vista previa y Depuración, haz clic en el evento registrationCompleted y ve a la pestaña Capa de datos. Como puede ver en la captura de pantalla que aparece a continuación, el desarrollador hizo un buen trabajo, ya que puedo ver tanto registrationCountry como plan en la Capa de datos.

PASO 4. Configurar el GTM

De forma predeterminada, los eventos de la capa de datos no aparecen en el Administrador de etiquetas de Google como desencadenantes. Tienes que hacerlo manualmente. Dado que estamos interesados en el seguimiento de los formularios enviados con éxito, tenemos que decirle a GTM que los eventos de registroCompleto son importantes para nosotros y deseamos utilizarlos como disparadores.

En el Google Tag Manager, vaya a Triggers y presione el botón New. Elija Evento personalizado como tipo de disparador e introduzca los siguientes ajustes:

Hecho. Acabas de crear un disparador de eventos personalizados del Google Tag Manager. Si también desea utilizar registrationCountry y planear como variables en sus etiquetas del Google Tag Manager, lea la guía sobre cómo acceder a los datos en la capa de datos y convertirlos en variables GTM.

Ejemplo: Enviar un evento a GA cuando un usuario se registra

Continuemos con nuestro ejemplo de rastreo de registro. Lo que tenemos hasta ahora es:

• Le pedimos a un desarrollador que implementara el código de dataLayer.push cuando un usuario se registra con éxito. El valor de la clave de evento es registrationComplete
• Un desarrollador ha implementado nuestra petición y hemos comprobado que en el modo de previsualización y depuración (pestaña de la capa de datos)
• Creamos un registro de activación de eventos personalizadosCompleto

¿Y qué es lo siguiente? Enviemos un evento a Google Analytics cada vez que un evento de Registro Completo sea empujado a la Capa de Datos. Además, pasaremos el valor del plan (plan de precios al que se ha inscrito un usuario).

#6.1. Variable de la Capa de Datos

En el Administrador de etiquetas de Google, vaya a Variables > Variables definidas por el usuario > Nuevo > Variable de la capa de datos. Introduzca los siguientes ajustes:

Entramos «plan» porque ese es el nombre de la clave en la Capa de Datos (cuando el evento registrationComplete es empujado al DL). Puedes aprender más sobre la Variable de la Capa de Datos aquí.

#6.2. Etiqueta de evento de análisis universal

Ahora, vamos a crear una etiqueta de evento GA que enviará los datos del evento a Google Analytics cada vez que un registroCompleto sea empujado a la Capa de Datos). En GTM, vaya a Tags > New > Universal Analytics. Ingresa los siguientes ajustes:

Si no estás familiarizado con lo que es la Variable de Configuración de Google Analytics, las cosas clave aquí:

• Tipo de pista: Evento. Esto significa que enviaremos eventos sobre registros exitosos a GA
• Acción de eventos: {{dlv – plan}}. Cada vez que se complete un registro, el gestor de etiquetas de Google tomará el valor de la clave del plan en la capa de datos y lo enviará a GA (junto con un evento de GA). De esa manera, podrá cortar los números de registroCompleto por el plan de precios.
• Asignar el disparador, el previamente creado Custom Event Trigger registrationComplete.

#6.3. Vamos a probar

Guarda la etiqueta GA, actualiza la vista previa y el modo de depuración, ve a tu página web (+ actualizarla), y completa el registro una vez más. Una vez que lo hagas, el evento de registroCompletar Capa de Datos aparecerá en el modo de vista previa. Haz clic en él y comprueba si la etiqueta del evento GA se dispara.

Si la etiqueta no se ha disparado, comprueba si has introducido el nombre de evento adecuado en la configuración del disparador. Es muy importante que introduzca el nombre del evento exactamente como se muestra en la Capa de datos (distingue entre mayúsculas y minúsculas).

Si la etiqueta se ha disparado, diríjase a sus informes en tiempo real de la GA > Eventos. Compruebe si también ve el evento allí.

Si todavía tienes problemas para probar tus etiquetas en el GTM, lee esta entrada de blog con más de 30 consejos de depuración.

#6.4. Configurar un objetivo en Google Analytics

El paso final. Convirtamos el «registro completo» del evento de la AG en un objetivo de la AG. En tu propiedad de Google Analytics, ve a Admin y en la columna «Ver» de tu propiedad de la GA ve a «Metas».

Crea un nuevo objetivo e introduce los siguientes ajustes:

• Configuración del objetivo: Personalizar
• Nombre del objetivo: Registro completo (pero básicamente, lo que quieras)
• Tipo de objetivo: Evento
• Detalles del objetivo: La categoría es igual a la inscripción completa. Deje todos los demás campos vacíos.

Con este tipo de configuración, siempre que un evento (con la categoría de evento «registro completo») sea rastreado por Google Analytics, también se contará la finalización del objetivo. Sólo recuerda que la finalización de un objetivo se aplica a toda la sesión. Esto significa que 5 registros del mismo usuario durante la misma sesión serán contados como un solo objetivo.

También puedes probar los objetivos en los informes en tiempo real de GA. Así que cada vez que guardes este objetivo, completa otro registro en tu sitio web, ve a informes en tiempo real > Conversiones, y comprueba si se mostró allí.

Disparador de eventos personalizados del Google Tag Manager: Conclusión

El evento personalizado de Google Tag Manager se utiliza para realizar un seguimiento de las interacciones que puedan tener lugar en su sitio web o en su aplicación móvil y que no se gestionen mediante métodos estándar (es decir, envíos de formularios, visitas a páginas, clics, etc.). En otras palabras, cualquier otro evento que ocurra en la Capa de datos puede denominarse Evento personalizado .

Sin eventos personalizados, no habría seguimiento de desplazamiento, seguimiento de abandono de formularios, seguimiento de formularios AJAX, etc.

Si se detecta una interacción no estándar que no puede ser rastreada con soluciones de rastreo ya preparadas (como las Recetas GTM), trabaje codo a codo con un desarrollador:

• Explíquele qué interacción desea rastrear y qué datos adicionales espera.
• Dale un pequeño trozo de código de eventos de la capa de datos.
• Pruebe todo después de que el desarrollador termine su tarea.
• Configura el Administrador de etiquetas de Google para que reconozca ese evento personalizado.

¿Hay algo que me haya pasado por alto del evento personalizado del Administrador de etiquetas de Google? Si es así, házmelo saber en los comentarios.