Introducción de datos al data layer en Google Tag Manager
Resumen
Cargar eventos al data layer es importante pero depende de tu sitio y tu estrategia de medición.
Por ejemplo, sabes cuantas personas visitan cierta sección en tu sitio, pero a través de qué elemento llegan a ella, es posible que la navegación principal o algún elemento en home, como un carrusel. Y si quieres segmentar aún más, puedes separarlo por dispositivo en Analytics, lo que te da más insights para optimizar tu sitio y tus estrategias de Marketing.
Deberian de poner el mismo ejercicio aplicado a varios CMS por ejemplo la mayoria usaria WP, y ver como se aplica en estas plataformas : WP, shopify, webflow etc.
Es lo mismo, todas tienen una herramienta de editor de código, sólo deberás encontrar el archivo header.php en el caso de wordpress, en los demás su equivalente.
También hay plugins que te permiten insertar el codigo en el header.
Puedes encontrar ese archivo de header.php en la opción apariencia de tema - editor, ahí vas a encontrar todos los editores de código.
Está clase me pareció un poco superficial, ojala se pudiese profundizar un poco más en la forma de aplicar en diversas formas el datalayer
Siempre es mejor trackear el submit del botón pórque el clic no es fiable si el formulario tiene validaciones.
Cargar eventos al Data Layer
Sígueme ✨🖖🏻✨ @realdigiglu
Apuntes
Métodos para Introducir info al Data Layer
#1 Hard Coded No recomendado Pues a pesar que aparece en las guías de google, es muy viejo. Ahora hay otros más dinámicos.
Etiquetas > Nueva > Custom HTML > Ingresar el siguiente código:
Esto perite trackear clicks de una forma más específica que con 1 click.
Apuntes
A continuación, te describo los dos métodos más comunes para cargar eventos en el Data Layer:
Método push
El método push es el método más comúnmente utilizado para cargar eventos en el Data Layer. Este método permite agregar un objeto JavaScript al Data Layer, el cual contiene información sobre un evento específico. Por ejemplo, si queremos cargar un evento que se dispare cuando un usuario hace clic en un botón de compra, podemos crear un objeto de datos que contenga información relevante, como el ID del producto, el precio, la cantidad, etc. y agregarlo al Data Layer utilizando el método push.
La sintaxis del método push se muestra a continuación:
Aquí, 'event' es una propiedad especial que indica que se trata de un evento que debe ser capturado por Google Tag Manager. 'nombre_del_evento' es un nombre descriptivo que se utiliza para identificar el evento. 'propiedad_1', 'propiedad_2', etc. son propiedades adicionales que contienen información relevante sobre el evento.
Método set
El método set se utiliza para establecer variables en el Data Layer. Este método es útil para cargar información que se utiliza en múltiples eventos, como la información del usuario, la página actual, etc. Por ejemplo, si queremos cargar información sobre el usuario actual, podemos crear un objeto de datos que contenga información relevante, como el ID del usuario, el nombre, el correo electrónico, etc. y agregarlo al Data Layer utilizando el método set.
La sintaxis del método set se muestra a continuación:
Aquí, 'propiedad_1', 'propiedad_2', etc. son propiedades que contienen información relevante sobre el usuario o la página. Estas propiedades se pueden utilizar en eventos posteriores para proporcionar información adicional.
Métodos para cargar eventos en el Data Layer
Existen diferentes métodos para cargar eventos en el Data Layer, entre ellos:
1. Cargar eventos en línea
Este es el método más antiguo, en el que se agregan los datos directamente en la etiqueta de seguimiento de Google Analytics en el sitio web. Por ejemplo, se puede agregar un evento de compra en línea en la etiqueta de seguimiento cada vez que un usuario completa una transacción. Sin embargo, este método puede ser propenso a errores y no es escalable.
2. Cargar eventos mediante JavaScript personalizado
Este método implica agregar JavaScript personalizado al sitio web para enviar datos al Data Layer. Por ejemplo, se puede crear una función que capture la información del formulario de contacto y la agregue al Data Layer como un evento. Este método es más escalable y permite una mayor flexibilidad, pero puede ser más difícil de mantener.
3. Cargar eventos mediante una plataforma de gestión de etiquetas (Tag Management Platform)
Este es el método más recomendado y utilizado actualmente. Una plataforma de gestión de etiquetas, como Google Tag Manager (GTM), permite agregar y gestionar etiquetas de seguimiento y eventos en el sitio web sin necesidad de modificar el código fuente. Además, GTM proporciona una interfaz de usuario intuitiva para configurar y gestionar eventos en el Data Layer.
Integración en el sitio web
Para integrar eventos en el Data Layer en el sitio web mediante GTM, se deben seguir los siguientes pasos:
Crear un contenedor en GTM e insertar el código de GTM en el sitio web.
Configurar un Data Layer en GTM para capturar los datos que se quieran medir.
Crear una variable personalizada en GTM para capturar los datos del Data Layer.
Configurar un tag en GTM para enviar los datos del evento a Google Analytics o cualquier otra plataforma de análisis.
Publicar el contenedor en GTM.
Con estos pasos, se puede cargar eventos en el Data Layer y enviarlos a Google Analytics u otras plataformas de análisis para obtener información sobre la interacción de los usuarios con el sitio web.
De esta clase, me surgen dos preguntas.
¿Cómo puedo hacer la instalación en un ecommerce con múltiples productos con diferentes precios?
Si instalo el dataLayer en un clic de Pagar cuando una persona que haga clic y aparezca un error, aún así se va enviar la información a GTM y activar eventos cuando la compra en realidad no se realizó. ¿Cómo solucionar esto?
En ese caso lo más recomendable sería que crees etiquetas customizadas según quieras medirlo por Facebook o Google. Luego ubicas en el DOM el valor que quieres guardar dentro de la página de tus productos (nombre, precio, sku, etc). Este enlace puede ayudarte
Para tú pregunta 1 : Dependiendo de la plataforma de tu sitio, puedes reutilizar el código, la mayoría de las plataformas son dinámicas, lo que quiere decir que usan plantillas, básicamente, tu añades el código DL a tú botón y los valores se rellenan con la información que viene de la Base de Datos.
Para tú pregunta 2 : Depende de tu estrategia, pero por lo general, a nivel código puedes validar si la compra se realizo efectivamente y en ese momento enviar el push, que también sirve enviar los errores, así, sabes cuantos errores hay por cada usuario que te visita y detectar si hay algo mal en ese paso.
El detalle que le veo al uso del data layer es que aquí si tienes que estar manipulando el html y pues en ocasiones no tienes acceso al desarrollo, por cierto justo lo del ejercicio sobre saber el ticket del carrito y la cantidad de los objetos es lo que quisiera haber visto en el video y no tanto lo de un subscribe.
Igual si nos compartieran el github del desarrollo de la tienda para que pudiéramos hacer pruebas ya que ahorita no tengo una desarrollada y hacer el ejercicio que proponen, saludos!
Siempre es importante el tema del desarrollo, pero esto te sirve para apoyar tu estrategia, justo solicitar a los devs que al hacer clic en pagar, el botón haga el push en el on click. Los datos se puede rellenar de forma automática con la información que viene de la base de datos, que es la misma forma en la que se presenta en tu resumen de carrito.
Si no tienes acceso al código, también puedes usar un tah de HTML desde Tag Manager.
Saludos!
Seria bueno que hagan una clase para crear un datalayer dinamico, ya que un datalayer estatico no sirve de mucho
Lo queria agregar en mi pagina de Shopify pero la verdad no encuentro en mi tema lo que quiero trackear que se encuentre en los "div" como se ve en la clase :(
Hola Yesid ¿Qué quieres trackear? ¿La visualización del div o el click en el div?
¿La función de datalayer push se puede solo realizar desde GTM sin necsidad de tocar el código del sitio web?
Si quieres utilizar el método .push() para agregar datos al data layer puedes probar creando un trigger para cuando el window haya cargado (ventana lista) y luego en la etiqueta HTML de GTM pones el siguiente script:
<scrip>dataLayer.push({'pageCategory':'signup','visitorType':'high-value'});</scrip>```de esta manera podrías insertar esos valores en un data layer ya creado. Espero te sirva, saludos!
No entiendo exactamente para qué me sirve esto.
Depende de tu sitio y tu estrategia de medición, por ejemplo, sabes cuantas personas visitan cierta sección en tu sitio, pero a través de que elemento llegan a ella, es posible que la navegación principal o algún elemento en home, como un carrusel. Y si quieres segmentar aún más, puedes separarlo por dispositivo en Analytics, lo que te da más insights para optimizar tu sitio y tus estrategias de Marketing.
Para mediri de forma super precisa.
¿Dónde se ven las métricas que recopila el datalayer? Además, ¿no es más práctico ponerle tags? Siento que viene siendo lo mismo; me gustaría conocer la diferencia y cómo seguir la métrica de manera que me ayude de verdad a mejorar estrategias y no a ahogarme entre datos masivos y al mismo tiempo pequeños
No entiendo para qué sirve esto, no entendí casi nada... ¿Google tag no servía para evitar tocar el código? ¿Por qué hay que hacer esto?
Es correcto, solamente a veces dependiendo tu necesidad vas a necesitar medir otro tipo de cosas que tal vez no sea tan fácil acceder solo desde la página web.
No siempre necesitarás esto, pero está bien el saber que se puede llegar a niveles de medición mucho más detallados y personalizados.
es decir, ¿puedo crear tags desde el código sin tener que crearlos desde el GTM?
Más bien, puedes cargar información al dataLayer usando funciones de JS.
Por ejemplo, puedes mandar un evento cuando alguna persona de algún click con el atributo onclick en alguna etiquetas.
Recuerda que HTML es un lenguaje de Tags (etiquetas) y no deben confundirse con los Tags de tag manager.
En esta clase enseñan cómo meter el <script> para recolectar info en el datalayer, pero, entiendo que para "no llenar nuestro <head>" podemos llamar a los datalayer creando “variables” en GTM… ¿verdad?
Así tener el <head> más limpito :)
Gracias
No entiendo, porque la segunda opcion, es la mejor, si por cada rastreo que quiero generar, tengo que agregar una 'línea' de código. En un sitio grande, por ejemplo, un ecommerce, o una sitio donde una página carga varias secciones, el html se vuelve mucho más pesado.
.
Yo mido los clicks a botonoes diferente, lo hago enviadnoe ventos a GA4 y con el id de cada botón usando el disparador con propiedad de "Click path" aunque hay muchas. Dicho sea de paso mi página está en Shopify.
Tengo una duda muy grande. En mi sitio tengo un chat de Hubspot, no he logrado ponerlo como conversión en Google ads. Intento ubicar los clics en este chat mediante GTM, pero no me marca los clics. ¿Cómo puedo hacerlo?
Hola Luis, para poder auxiliarte aquí ¿Podrías indicarme si el chat está dentro de un iframe?
