Variable de auto-evento en GTM: Actualice su análisis web con 2 ejemplos simples pero poderosos

Actualizado: 8 de julio de 2023. El gestor de etiquetas de Google ofrece un montón de características impresionantes cuando se trata de seguimiento de sitios web. Si ya has intentado usar el GTM para algo más que el seguimiento básico de Google Analytics, probablemente has visto la lista de más de 15 tipos de variables. Es una lista bastante decente, ¿no? Apuesto a que plantea más preguntas que respuestas – por ejemplo, ¿qué es el elemento DOM? ¿Qué es la variable de auto-evento? etc. En esta entrada del blog, voy a mostrar cómo puedes añadir una variable de auto-evento a tu arsenal de analítica web + dos ejemplos de uso según mi experiencia.

Antes de continuar: este tema también se explica en mi curso de GTM intermedio

La variable de evento automático se suele pasar por alto en la variedad de funciones del Administrador de etiquetas de Google. De hecho, hay muchas más de esas funcionalidades subutilizadas que pueden llevar sus habilidades de implementación de GTM a otro nivel. Por eso he creado un curso intermedio de Google Tag Manager que puede ayudarte a hacerlo.

¿Qué es una variable de autoevolución?

Las variables de autoevento se utilizan para acceder al elemento de destino de una acción de autoevento (por ejemplo, hacer clic, error, envío de formularios). Por ejemplo:

• Cuando haces clic en una imagen, puedes acceder a la URL o al enlace de destino de la imagen.
• Cuando envías un formulario, puedes acceder al ID del formulario, etc.

¿Te suena un poco familiar? Google Tag Manager ya ofrece un montón de variables predefinidas (incorporadas), por ejemplo, ID de clic, texto del formulario, etc. Todos ellos son en realidad variables de auto-evento (nota: la mayoría de las variables incorporadas se almacenan como variables de la capa de datos, Simo lo ha descrito en detalle).

La variable de auto-evento comprueba el elemento del sitio web con el que el usuario ha interactuado y añade algunos datos particulares a la pestaña Variables del modo de vista previa y depuración del GTM.

¿Qué problema resuelve?

Lo ilustraré con un ejemplo: imagina que la página de inicio de tu sitio web contiene tres imágenes sobre las que se puede hacer clic. Cada una de ellas abre un video diferente de Youtube (en un pop-up). Quieres saber cuál es la imagen en la que más hacen clic tus visitantes.

¿Qué vas a hacer? Tu respuesta probablemente será utilizar el Administrador de etiquetas de Google Click Trigger. Buena elección. Sin embargo, hay un «pero». Todas las imágenes contienen la misma clase de CSS, no tienen ID, por lo que las variables predeterminadas de GTM Click no son útiles en esta situación – no puedes simplemente identificar en qué imagen se ha hecho clic.

¿Qué es lo que haces? Investigar. Utiliza la función «Inspeccionar elemento» de tu navegador para encontrar otras posibles soluciones. Por lo general, funciona haciendo clic con el botón derecho del ratón en el elemento del sitio web (por ejemplo, en una imagen) y luego en Inspeccionar elemento (ver instrucciones más detalladas para Chrome, Firefox, Internet Explorer, Edge).

Una vez que abras las herramientas de desarrollo (inspeccionando el elemento) verás un código HTML. Una muestra podría tener este aspecto:

Como se mencionó anteriormente, no hay ninguna clase de clic o ID de clic disponible para este elemento. Pero hay otros atributos que podría utilizar – alt y data-video-id. Puedo convertir alt o data-video-id en variables en el Google Tag Manager y usar sus valores en disparadores o etiquetas.

¿Qué significan todos esos ajustes?

Descargo de responsabilidad: Este capítulo es un poco más técnico, así que en caso de que te sientas un poco confundido, puedes pasar al siguiente capítulo, que es un ejemplo práctico. Si todavía quieres saber más detalles técnicos, vamos a sumergirnos.

Para crear una Variable de Auto-Evento, complete las siguientes acciones:

• Ir a Variables
• En Variables definidas por el usuario, haga clic en Nuevo
• Haga clic en Configuración de variables y luego en Variable de auto-evento

Expande el desplegable de Tipo Variable y verás 12 opciones.

#1. Elemento – Accede al elemento del sitio web (alias DOM Element ) que fue el objetivo de la acción de auto-evento. Es decir, si haces clic en una imagen, la variable de auto-evento devolverá el valor [object HTMLImageElement] (Debo admitir que nunca he usado ese tipo de variable de auto-evento en la práctica). Esto se almacena en la Capa de Datos bajo el nombre de elemento gtm. Nota: Hay variables incorporadas para esto – Haga clic en Elemento y Elemento de forma.

#2. Atributo del elemento – Devuelve el valor de un atributo particular del elemento de auto-evento. Necesitas definir el nombre del atributo que te interesa. Todos los ejemplos de esta entrada del blog están dedicados a este tipo de variable de auto-evento.

#3. Clases de elementos – Devuelve el valor del atributo de clase del elemento de auto-evento. Se almacena en la capa de datos bajo la clave gtm.elementClasses. Nota: Hay variables incorporadas para esto – Haga clic en Class y Form Class.

#4. ID del elemento – Devuelve el valor del atributo id del elemento auto-evento. Se almacena en la Capa de Datos bajo la clave gtm.elementId. Nota: Hay variables incorporadas para esto – Haga clic en ID y Form ID.

#5. Elemento Target – Devuelve el valor del atributo target del elemento de auto-evento. Se almacena en la capa de datos bajo la clave gtm.elementTarget. Nota: Hay variables incorporadas para esto (Haga clic en Target y Form Target).

#6. Elemento Texto – Devuelve el valor del texto(propiedad textContent o innerText ) del elemento de auto-evento. Nota: Hay variables incorporadas para esto – Haga clic en Texto y Formulario de Texto.

#7. URL del elemento – Devuelve el valor del atributo href o de acción del elemento auto-evento. Se almacena en la capa de datos bajo la clave gtm.elementUrl. Nota: Hay variables incorporadas para esto – Haga clic en URL y URL de formulario.

#8. Historial Nuevo fragmento de URL – Devuelve el nuevo conjunto de fragmentos de URL con un evento de historial del navegador. Se almacena en la Capa de datos con la clave gtm.newUrlFragment. El fragmento de URL es la parte de una dirección web después del símbolo # (por ejemplo, www.example.com/#contact-us). Esto es especialmente popular entre los sitios de una página donde el fragmento de URL cambia cuando se desplaza). Nota: Hay una variable incorporada para esto – New History Fragment. Si te interesan los fragmentos de URL y el seguimiento en GTM, mira la entrada del blog de Simo Ahava.

#9. Antiguo fragmento de historia – Devuelve el antiguo fragmento de URL reemplazado en el evento de historia del navegador. Almacenado en la capa de datos bajo la clave gtm.oldUrlFragment. Nota: Hay una variable incorporada para esto – Fragmento de historia antigua.

#10. Nuevo Estado del Historial – Devuelve el nuevo conjunto de objetos de estado con un evento de historial del navegador. Se almacena en la capa de datos con la clave gtm.newHistoryState. Nota: Hay una variable incorporada para esto – Nuevo Estado de la Historia.

#11. History Old State – Devuelve el objeto de estado antiguo reemplazado en el evento de historial del navegador. Se almacena en la capa de datos bajo la clave gtm .oldHistoryState. Nota: Hay una variable incorporada para esto – Old History State.

#12. Fuente de cambio de historial – Devuelve una cadena que denota el evento que provocó el evento de cambio de historial(popstate, pushState, replaceState, o polling). Se almacena en la capa de datos bajo la clave gtm.historyChangeSource. Nota: Hay una variable incorporada para esto – History Source. P.S.

Ejemplo Nº 1 – Variable de autoevolución en la etiqueta GA

Solía trabajar en una empresa nueva, llamada Omnisend (antes Soundest). Ofrecemos una solución de marketing por correo electrónico que se puede integrar fácilmente con las plataformas de comercio electrónico más populares (Shopify, Bigcommerce, etc.). En nuestro sitio web (versión anterior), teníamos varios lugares donde se muestran los logotipos de los vendedores de comercio electrónico (los llamamos plataformas internamente). Algunos logotipos redirigidos a tiendas de aplicaciones (donde los visitantes pueden instalar Omnisend) otros logotipos redirigen a los usuarios a un formulario de registro, etc.

Así que me interesó saber qué vendedores son los más populares entre los visitantes de nuestro sitio web. Por suerte cada logo contenía un atributo con el título del vendedor – plataforma de datos (pude verlo utilizando la función de elemento de inspección).

Mi idea era captar todos los clics de los enlaces de los logotipos de los proveedores y enviar esos datos a Google Analytics como eventos en los que la etiqueta del evento es el nombre de una plataforma (proveedor). Para lograr esto, completé los siguientes pasos:

1. Crear una variable de auto-evento en GTM
2. Configurar un disparador de clic (Sólo enlaces) que se dispara sólo cuando se hace clic en cualquiera de los logotipos
3. Creó una etiqueta de Evento de Google Analytics que empuja los datos GA.

Paso 1: Crear una variable de auto-evento

Los ajustes de la variable:

• Escriba la variable de auto-evento
• Título – aev – plataforma de datos
• Tipo variable – Atributo del elemento
• Nombre del atributo – plataforma de datos

Paso 2: Crear un disparador de clic

Configura un disparador de Clic (Sólo enlaces) con los siguientes ajustes:

• Título: Click – Logotipo de la plataforma Clicked
• Este disparador se dispara con algunos clicks de enlace
• Las clases de clic contienen una sección-plataforma (porque todos los logotipos de los proveedores en esa sección del sitio web en particular tienen una clase de CSS reusar-utms sección-plataforma).

Paso 3: Crear una etiqueta de Google Analytics

Ahora, vamos a crear una etiqueta de Google Analytics que dispare un evento cuando alguien haga clic en el logo de un proveedor:

• Ir a Etiquetas
• Haga clic en Nuevo y elija una plantilla predefinida: Universal Analytics.
  • Título: Evento GA – Logotipo de la plataforma con clic
  • Tipo de pista – Evento
  • Categoría – Click
  • Acción – Logotipo de la Plataforma
  • Etiqueta – {{aev – plataforma de datos}}
  • Seleccione la variable de configuración GA
  • Añade el disparador de clicks que has creado previamente

P.D. puedes elegir cualquier otro valor para la categoría de evento, acción y etiqueta. Todo lo que quería mostrar era la posibilidad de obtener el valor de la plataforma de datos y pasar esos datos a Google Analytics.

Ejemplo No.2 – Variable de auto-evento en Trigger

En este ejemplo, te mostraré cómo usar una variable de auto-evento en los disparadores. Un día (hace más de un año) estaba hablando con mi colega Karolina y ella se quejó de que la tasa de rebote de nuestro blog era un poco demasiado alta. Karolina planteó algunas dudas de que debido a la falta de interacciones que se rastrean con Google Analytics, la tasa de rebote es en realidad más alta de lo que debería ser.

En primer lugar, recordemos cómo se calcula el porcentaje de rebote. Según Google, el porcentaje de rebote es el porcentaje de sesiones de una sola página (es decir, sesiones en las que la persona salió de su sitio desde la página de entrada sin interactuar con la página). Las vistas de página no son la única forma de interacción. Otros eventos (como el envío de formularios o ciertos clics) también se cuentan como interacción.

La hipótesis de Karolina era: aunque los visitantes no leen más de una entrada de blog por sesión, siguen interactuando con ella. Así que necesitábamos rastrear interacciones más relevantes. Las entradas de su blog contienen muchas imágenes, gráficos, etc. que pueden ser vistos con mayor detalle cuando se hace clic sobre ellas. Así que decidí comenzar a rastrear los clics de las imágenes en las entradas del blog.

Sólo me interesaban las imágenes que formaban parte de las entradas del blog, no todas las imágenes que se mostraban en toda la página. Después de inspeccionarlas, me di cuenta de que todas las imágenes de contenido contenían enlaces con el atributo rel=»lightbox-5″ o rel=»lightbox-6″, etc. Cada número representa el ID de la imagen.

La mejor manera de rastrear esas imágenes era crear una variable de auto-evento rel y utilizarlo en el disparador de Link Click.

Paso 1: Crear una variable

La configuración de la variable de auto-evento:

• Título: aev – rel
• De tipo variable: Variable de auto-evento
• Escriba: Atributo del elemento
• Nombre del atributo: rel

Paso 2: Crear un disparador

Ajustes del disparador:

• Título: Clic – Imagen en la entrada del blog
• Tipo de disparador: Sólo enlaces
• Este disparador dispara algunosclicks de enlace
• Condición: rel contiene «lightbox» (sin comillas)

Paso 3: Crear una etiqueta GA

Configuración de la etiqueta de Google Analytics:

• Tipo de etiqueta – Universal Analytics
• Tipo de pista – Evento
• Categoría – Click
• Acción – Imagen en la entrada del blog
• Etiqueta – {{{Caminode la página}}
• Seleccione la variable de configuración GA
• Triggering – Elegir previamente creado Click – Image In Blog Post

El resultado

La suposición de Karolina era correcta, algunos visitantes interactuaron con su contenido haciendo clic en las imágenes. Algunos de ellos abrieron una entrada en el blog, la leyeron, hicieron clic en al menos un gráfico o imagen (si hay una), y sólo dejaron la página. La tasa de rebote disminuyó casi un 5% y el tiempo medio por sesión aumentó en 15 segundos. Por supuesto, su objetivo a largo plazo siempre es aumentar el número de páginas por sesión, pero las métricas más precisas fueron un buen comienzo.

Un caso de uso adicional: Seguimiento del clic del enlace saliente con la variable de auto-evento

El 30 de octubre de 2023, los desarrolladores de Google Tag Manager añadieron una nueva forma de rastrear los enlaces salientes con Google Tag Manager. Esta vez, es posible con la ayuda de la variable Auto-evento. Lee esta guía para obtener más información.

Conclusión

La variable de auto-evento es una forma bastante fácil de obtener más datos de un sitio web y utilizarlos en sus etiquetas o disparadores. En esta entrada del blog, describí cómo puedes obtener fácilmente datos personalizados de tu sitio web y enviarlos a Google Analytics. En otro ejemplo, demostré cómo se pueden rastrear los clics de sólo ciertos elementos del sitio web con la ayuda de AEV. Esta técnica es útil cuando la variable Clases de Clic no es única (y no hay un ID de Clic disponible).

He aquí otra idea en la que puedes usar las variables de Auto-Evento:

• Puedes rastrear los clics de los enlaces salientes como eventos de Google Analytics y ver qué enlaces son nofollow. Todo lo que necesitas hacer es crear una variable de auto-evento (Tipo: Atributo de elemento, Nombre de atributo: rel) y empujarla como una etiqueta de evento a GA.

Si tienes preguntas relacionadas con las variables de Auto-Evento o con el Administrador de Etiquetas de Google en general, no dudes en publicar un comentario y tal vez se nos ocurra una solución.