Introducción de datos al data layer en Google Tag Manager

Clase 21 de 27 • Curso de Google Tag Manager para Marketing

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.

Alfredo Zavala

student•

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.

Emmanuel Ruiz Estrada

student•

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.

Antonella Zuñiga Cottallat

student•

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.

David Idárraga Molina

student•

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

Juan Sebastian Aparicio Ordoñez

student•

Siempre es mejor trackear el submit del botón pórque el clic no es fiable si el formulario tiene validaciones.

Ana Lucía Puello Socarrás

student•

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:

Se copia ese script y se pega en el código del sitio (Tema - Header - Encima del código de Tag Manager)

#2 On Click Recomendado Se introduce info en el Data Layer a través de un atributo de los tags de HTML. El atributo que se usa se llama On - Click:

Etiquetas > Nueva > Custom HTML > Ingresar el siguiente código:

Se copia > Se localiza el botón de subscribe > se le agrega el atributo de onclick así:

<button onclick=“window.dataLayer.push({ ‘event’ : ‘subscribe’ , ‘tipo’ : ’suscripción newsletter’ })”> Subscribe </button>

Esto perite trackear clicks de una forma más específica que con 1 click.

Rodrigo Alles

student•

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:


dataLayer.push({
  'event': 'nombre_del_evento',
  'propiedad_1': 'valor_1',
  'propiedad_2': 'valor_2',
  ...
});

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:


dataLayer.push({
  'propiedad_1': 'valor_1',
  'propiedad_2': 'valor_2',
  ...
});

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.

Bemsson Guerrero

student•

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?

Edwin Cáceres Silva

student•

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

Manuel Alcocer Pech

student•

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.

Rodrigo Alfredo Ortiz Merelo

student•

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!

Manuel Alcocer Pech

student•

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.

Juan Sebastian Aparicio Ordoñez

student•

Si no tienes acceso al código, también puedes usar un tah de HTML desde Tag Manager.

Saludos!

Jorge Aldahir Huamaní Almonacid

student•

Seria bueno que hagan una clase para crear un datalayer dinamico, ya que un datalayer estatico no sirve de mucho

YESID LEONARDO ROZO CRUZ

student•

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 :(

Ulises Rayon

teacher•

Hola Yesid ¿Qué quieres trackear? ¿La visualización del div o el click en el div?

DAVID IDARRAGA MOLINA

student•

¿La función de datalayer push se puede solo realizar desde GTM sin necsidad de tocar el código del sitio web?

Mateo Roldán

student•

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.&#x20;

Espero te sirva, saludos!

David Elena Morales

student•

No entiendo exactamente para qué me sirve esto.

Manuel Alcocer Pech

student•

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.

kristian Javier Colina

student•

Para mediri de forma super precisa.

Natalia Maricel Viera

student•

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?

Luis Eduardo Chacón Wilches

student•

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.

Angie Moreno

student•

es decir, ¿puedo crear tags desde el código sin tener que crearlos desde el GTM?

Ulises Rayon

teacher•

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.

Jessica J-Montero

student•

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

Betsabe Vurela

student•

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.

Carlos Arturo Rueda Calier

student•

Michel Santiago Andreu Olarte Moyano

student•

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.

Luis Arturo Hernández Espinosa

student•

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?

Ulises Rayon

teacher•

Hola Luis, para poder auxiliarte aquí ¿Podrías indicarme si el chat está dentro de un iframe?

Introducción de datos al data layer en Google Tag Manager

Introducción a GTM

Google Tag Manager: Gestión Eficiente de Etiquetas y Snippets

Marketing Basado en Datos y Google Tag Manager

HTML para Marketing

Estructura de una Página Web: HTML, CSS y JavaScript

Fundamentos de HTML y DOM para Marketing Web

Etiquetas HTML esenciales: head, body, form, párrafo y más

Integración de HTML y Marketing Digital

Integrar plataformas de terceros con GTM

Instalación y Verificación de Google Tag Manager en tu Sitio Web

Tag Assistant y Preview Mode: Diagnóstico y Verificación de Tags

Instalación de Google Analytics con Tag Manager

Instalación del píxel de Facebook Ads con Tag Manager

Configuración de Etiquetas de Conversión con Google Tag Manager

Instalación del píxel de Bing Ads con Google Tag Manager

Instalación de Píxel de Conversión en LinkedIn Ads

Optimizar resultados con eventos built-in

Seguimiento de Scroll en Google Analytics con Tag Manager

Configuración de Triggers y Tags en Google Tag Manager

Rastreo de Clics y Eventos en Google Analytics y Google Ads

Configuración de Eventos de Google Ads para Monitoreo de Páginas Específicas

Rastreo de Formularios y Eventos en Google Tag Manager

Optimizar con eventos personalizados

Uso del Data Layer en Google Tag Manager para Marketing Digital

Programación Web para Estrategias de Marketing Digital

Introducción de datos al data layer en Google Tag Manager

Integración y uso de Google Tag Manager en Marketing Digital

Lectura y Uso de Variables en Google Tag Manager

Herramientas bonus

Migración de Google Analytics Universal a GA4 paso a paso

Instalación de Google Optimize con Tag Manager

Conclusiones

Conceptos clave de Google Tag Manager para principiantes

Implementación de Google Tag Manager y Optimización de Campañas