Cargar eventos al Data Layer

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.

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.

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:

1. Crear un contenedor en GTM e insertar el código de GTM en el sitio web.
2. Configurar un Data Layer en GTM para capturar los datos que se quieran medir.
3. Crear una variable personalizada en GTM para capturar los datos del Data Layer.
4. Configurar un tag en GTM para enviar los datos del evento a Google Analytics o cualquier otra plataforma de análisis.
5. 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.

1. ¿Cómo puedo hacer la instalación en un ecommerce con múltiples productos con diferentes precios?
2. 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?

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!

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

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

No entiendo exactamente para qué me sirve esto.

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.