En un entorno cada vez más orientado a los datos, los equipos de marketing dependen de información precisa para la toma de decisiones. Muchos de estos datos no viajan por sí solos hacia las herramientas de analítica; necesitan una estructura que los recoja y los exponga correctamente.
El Data Layer juega un papel relevante en este contexto, ya que es uno de los métodos más utilizados para compartir esta información entre plataformas de medición, herramientas de automatización de marketing y comercio electrónico.
Pese a su relevancia, sigue siendo percibido como un asunto técnico reservado a los desarrolladores. Esta perspectiva limita a los marketers, que podrían beneficiarse de comprender cómo funciona y qué datos expone.
¿Qué es el Data layer?
Básicamente es como una especie de “bandeja” donde se muestran datos importantes de un sitio web para que herramientas de medición, marketing etc. puedan acceder a ellos de manera sencilla.
Aunque muchas veces se asocia a Google Tag Manager, no es exclusivo de GTM. Es más, cualquier herramienta de etiquetado como Tealium, Adobe o Analítica como Piwik etc. pueden aprovechar esa misma estructura para leer la información y procesarla.
Sintaxis y estructura básica del dataLayer.
En su forma más habitual, es simplemente un array que vive en el navegador. Cada vez que queremos enviar información, se lanza un nuevo objetco con datos a dicho array. Esto se hace utilizando dataLayer.push().
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
items: [
{
item_name: "Zapatillas deportivas",
item_id: "SKU1234",
price: 59.99,
category: "Calzado"
}
]
}
});
En este ejemplo se está lanzando un evento de visualización de producto que puede ser leído por cualquier sistema o script que escuche al dataLayer.
Lo immportante es:
- El event es lo que dispara una acción (por ejemplo, una etiqueta en GTM etc.).
- El resto del objeto son los datos que acompañan ese evento.
- Se pueden enviar múltiples eventos a lo largo del recorrido del usuario.
Ejemplo práctico de enviar datos al Data layer.
Imagina que tienes un listado de producto en una página de categoría de producto y quieres registrar cuándo un usuario hace clic en uno de ellos. Puedes lanzar ese dato al Data Layer con algo tan simple como:
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "product_click",
product: {
id: "C5647",
name: "Adidas Spyre",
url: "https://mi-tienda.com/producto/adidasSpyre"
}
});
Este fragmento de código podría colocarse en un “onclick” o lanzarse mediante js cuando se detecte la acción.
Explorar el Data Layer desde la consola.
Si bien existen fantásticas extensiones para poder validar el contenido del Data Layer, eventos etc. como Analytics Debugger que os animo a instalarla, os voy a mostrar cómo poder verlo también desde la consola.
Desde las herramientos de desarrollo de tu navegador, haz clic en “Consola” y tipea: dataLayer
Se te mostrará todos los elementos disponibles en el Data Layer. Puedes incluso comprobar cuál ha sido el último elemento que ha sido lanzado, simplemente insertando en consola dataLayer[dataLayer.length-1]
Así de fácil.
Como ejercicio de concepto, vamos a lanzar desde consola un evento al Data Layer.
Para ello copia y pega en la misma consola el siguiente fragmento de código:
dataLayer.push({
event: "mi_primer_evento",
persona: {
nombre: "jose",
edad: "19"
}
});
Ahora, tipea dataLayer y localiza el evento “mi_primer_evento”
Ejemplos de dataLayer.push
Los ejemplos anteriormente explicados son básicos, pero resultan adecuados para poder enteneder el concepto del Data Layer.
A continuación dejo un ejemplo más complejo donde se están pasando datos mediante arrays de objetos.
dataLayer.push({
event: "view_item_list",
ecommerce: {
item_list_id: "cat_ropa_hombre",
item_list_name: "Ropa de Hombre",
items: [
{
item_id: "prod_101",
item_name: "Camisa de lino",
price: 39.99,
category: "Ropa > Hombre > Camisas",
position: 1
},
{
item_id: "prod_102",
item_name: "Pantalón chino",
price: 49.99,
category: "Ropa > Hombre > Pantalones",
position: 2
},
{
item_id: "prod_103",
item_name: "Jersey de algodón",
price: 59.99,
category: "Ropa > Hombre > Jerséis",
position: 3
}
]
}
});
¿Qué aporta este tipo de estructura?
- items en una array de objetos, donde cada uno de ellos representa un producto individual.
- Permite enviar de una sola vez una lista de todos los elementos, como puede ser un cart, productos recomendados etc.
Puedes consultar la documentación oficial de eventos recomendados para ecommerce en GA4 donde vas a poder encontrar unos cuantos ejemplos.
¿Por qué es útil el Data Layer en el marketing digital?
Es una pieza indispenable hoy en día en el mundo del marketing digital, ya que permite que la analítica y las acciones de marketing automation tengan el contexto de lo que está ocurriendo en tiempo real en el ecommerce.
Algunas de su ventajas son:
- Independencia entre datos y herramientas: El equipo de desarrollo únicamente tiene que preocuparse de dejar los datos requeridos por el equipo de marketing en el Data Layer. Posteriormente es dicho equipo el que puede trabajar con estos datos con plataformas como Google Tag Manager, Tealium, Piwik etc.
- Disparar eventos basados en la lógica de negocio: Etiquetas de conversión, eventos de envío de formulario etc. No tiene que ser obligatoriamente a una acción explícita de un usuario al hacer clic sobre un enlace o botón, sino también cuando se cumple una determinada regla definida.
- Facilita el trabajo con múltuples plataformass: Una vez definido el Data Layer, se puede conectar varias herramientas de medición o marketin automation de una manera mucho más sencilla. Por ejemplo información de carrito etc.
¿Cuándo pedir la implementación del Data Layer?
Va a depender siempre de la necesidad del proyecto, pero hay momentos muy claros en los que conviene solicitarlo. Algunos ejemplos son:
- Antes del lanzamiento de una web o rediseño importante.
- En el momento en que son necesarios eventos personalizados para medir acciones específicas.
- Implementación de herramientas de analítica, marketing automation etc.
- Cuando lo datos que necesitas NO están en el HTML. Lo más importante es saber qué datos necesitas antes de solicitar la implementación.
Ya está implementado el Data Layer.. ¿Ahora qué? :-)
Una vez está listo el Data Layer es el momento arromangarse y ponerse manos a la obra.
Tenemos en el Data Layer el evento de add_to_wishlist, con la iguiente estructura, y necesitamos enviarlo a GA4.
dataLayer.push({ ecommerce: null }); // Limpia el objeto anterior
dataLayer.push({
event: "add_to_wishlist",
ecommerce: {
currency: "EUR",
value: 9.99,
items: [
{
item_id: "SKU_12345", // ID del producto
item_name: "Camiseta Stan y Amigos", // Nombre del producto
affiliation: "Tienda oficial de Google", // Tienda o canal
coupon: "VERANO2025", // Cupón aplicado
discount: 2.22, // Descuento aplicado
item_brand: "Google", // Marca del producto
item_category: "Ropa", // Categoría principal
item_variant: "verde", // Variante del producto (color, talla, etc.)
price: 9.99, // Precio del producto
quantity: 1 // Cantidad añadida
}
]
}
});
Crea el disparador de evento personalizado de GA4 en GTM
- En GTM, ve a Activadores > Nuevo y selecciona Evento personalizado.
- En el nombre del evento indica ad_to_wishlist que debe ser el mismo nombre del evento en el datalayer.
Crea la Etiqueta de evento de GA4 en GTM
- Ve a Etiquetas > Nueva y selecciona google Analytics: evento de GA4
- Indica el Id de medición
- En Nombre del evento indica “add_to_wishlist” y clica sobre “Enviar datos de comercio electrónico”. Esta opción permite recoger el valor de los ítems sin necesidad de crear las variable en GTM.
- Guarda y publica los cambios
Verifica el evento con la Vista previa en GTM
Una vez publicado el contenedor, es fundamental comprobar que todo funciona correctamente para asegurarnos que se está lanzando correctamente el evento a GA4.
Activa el modo vista previa en Google Tag Manager.
- Haz clic en el botón “Vista previa”.
- Introduce la URL de su site y haz clic en “Conectar”
- Se abrirá una nueva ventana en el navegador.
- Haz clic en “Continuar” en el popup que aparece en GTM.
Ejecuta la accion “add_to_wishlist”
- Simula la acción de Añadir a la lista de deseos de tu site.
- Vuelve a la pestaña de Tag Assistant y comprueba que se ha activado la etiqueta “Wishlist”.
Valida los datos enviados.
- Haz clic en la etiqueta y a continuación clic en “Capa de datos”.
- Comprueba que los valores son los mismos que en el Data Layer.
Comprueba en GA4 si se ha recibido el evento.
En Google Analytics:
- Clic en “Administrar” y selecciona “Debugview”
- Simula de nuevo el evento de “ad_to_wishlist”
- Deberá aparecer el evento. Clic sobre él y verifica los datos que se muestren en “Elementos”
Conclusión
El Data Layer, como ya he comentado al principio del artículo, es mucho más que una herramienta técnica. Su implementación recae en gran parte sobre el equipo técnico, comprender qué es y cómo funciona, debe ser parte del conocimiento básico del cualquier marketer.
En próximos artículos trataremos aspectos más técnicos y “burradas” que se pueden hacer mediante Data Layer, js y Google Tag Manager :-)