El dataLayer es un objeto JavaScript que vive en el navegador del usuario y actúa como puente entre tu web y Google Tag Manager. Es donde tu web deposita información — el precio de un producto, el ID de una transacción, el tipo de usuario que ha iniciado sesión — y desde donde GTM la recoge para enviarla a GA4, Google Ads o cualquier otra herramienta.
Sin dataLayer, GTM solo puede leer lo que está visible en el HTML. Con dataLayer, puede acceder a cualquier dato que tu aplicación conozca. Es la diferencia entre una implementación básica y una implementación profesional.
Por qué existe el dataLayer
GTM tiene acceso al DOM de la página — puede leer textos, atributos HTML, URLs — pero hay datos que no están en el HTML. El precio de un producto después de aplicar un descuento. El ID interno de un usuario autenticado. El valor total de un carrito. La categoría de un artículo según tu base de datos.
Esos datos viven en tu aplicación, no en el HTML. El dataLayer es el canal estandarizado para pasárselos a GTM.
Sin él, tienes dos opciones malas: scraping del DOM con variables de elemento DOM (frágil, se rompe con cualquier cambio de diseño) o variables JavaScript que dependen de que el código de la página no cambie. El dataLayer es la solución correcta: un contrato entre tu web y GTM que puedes controlar y mantener.
Cómo funciona el dataLayer
El dataLayer se inicializa en el <head> de tu página, antes del snippet de GTM:
javascript
window.dataLayer = window.dataLayer || [];Esta línea crea el array si no existe. El snippet de GTM que va a continuación lo encuentra y empieza a escucharlo.
A partir de ahí, cada vez que ocurre algo relevante en tu web, empujas un objeto al dataLayer con dataLayer.push():
javascript
dataLayer.push({
'event': 'nombre_del_evento',
'parametro_1': 'valor_1',
'parametro_2': 'valor_2'
});GTM está escuchando constantemente. Cuando detecta un push con un campo event, comprueba si tiene activadores configurados para ese nombre de evento y dispara las etiquetas correspondientes.
La clave: el campo event es el que activa los activadores de tipo «Evento personalizado» en GTM. Los demás campos son parámetros que puedes capturar con variables de dataLayer y enviar a GA4 u otras herramientas.
Ejemplos reales de dataLayer.push()
Evento de compra en ecommerce
El caso más completo. Cuando el usuario completa una compra, tu web empuja al dataLayer toda la información de la transacción:
javascript
dataLayer.push({
'event': 'purchase',
'transaction_id': 'TXN-00123',
'value': 89.90,
'currency': 'EUR',
'items': [
{
'item_id': 'SKU-456',
'item_name': 'Camiseta azul',
'item_category': 'Ropa',
'price': 29.90,
'quantity': 1
},
{
'item_id': 'SKU-789',
'item_name': 'Pantalón negro',
'item_category': 'Ropa',
'price': 60.00,
'quantity': 1
}
]
});Con este push, GTM detecta el evento purchase, recoge todos los parámetros con variables de dataLayer y los envía a GA4, Google Ads y Meta Ads simultáneamente. Un solo push alimenta todas las herramientas.
Inicio de sesión de usuario
Cuando el usuario se autentica, puedes enviar su ID para análisis cross-device:
javascript
dataLayer.push({
'event': 'login',
'user_id': 'USR-98765',
'user_type': 'premium',
'user_lifetime_value': 450
});Con esto, GTM puede configurar el user_id en GA4 y segmentar el comportamiento por tipo de usuario en todos los informes posteriores.
Añadir al carrito
javascript
dataLayer.push({
'event': 'add_to_cart',
'currency': 'EUR',
'value': 29.90,
'items': [
{
'item_id': 'SKU-456',
'item_name': 'Camiseta azul',
'item_category': 'Ropa',
'price': 29.90,
'quantity': 1
}
]
});Envío de formulario de contacto
javascript
dataLayer.push({
'event': 'form_submit',
'form_id': 'contacto-principal',
'form_type': 'lead',
'pagina_origen': '/servicios/ga4/'
});Progreso en un vídeo
javascript
dataLayer.push({
'event': 'video_progress',
'video_title': 'Demo de producto',
'video_percent': 50,
'video_duration': 180
});Cómo leer el dataLayer en GTM con variables
Una vez que tu web empuja datos al dataLayer, GTM necesita variables para leerlos y pasarlos a las etiquetas.
Para cada dato que quieras capturar, crea una Variable de capa de datos en GTM:
- Ve a Variables → Nueva → Variable de capa de datos.
- En Nombre de variable de la capa de datos, escribe la ruta exacta al dato.
Para datos simples:
transaction_id→ captura el ID de transacciónvalue→ captura el valorcurrency→ captura la moneda
Para datos dentro de arrays (como items), usa notación de punto:
items.0.item_id→ elitem_iddel primer productoitems.0.price→ el precio del primer producto
Para arrays completos (cuando tienes varios productos), configura la variable para capturar el array entero y GA4 lo procesa automáticamente si usas el parámetro items estándar.
El orden importa: cuándo ejecutar el dataLayer.push()
El push debe ocurrir antes de que GTM intente leer los datos. En la práctica:
- Para eventos de página (como datos de usuario o categoría de contenido): el push debe ir antes del snippet de GTM en el
<head>, o GTM no verá esos datos en la carga inicial. - Para eventos de interacción (clics, envíos de formulario, añadir al carrito): el push ocurre cuando el usuario realiza la acción, y GTM lo detecta al instante.
- Para eventos de transacción: el push ocurre en la página de confirmación, después de que el servidor ha procesado el pedido.
Un error habitual: ejecutar el push después del snippet de GTM para datos que se necesitan en la carga de página. GTM ya ha procesado la página y no vuelve a leer lo que llega tarde.
Cómo verificar que el dataLayer funciona correctamente
Opción 1: Consola del navegador
Abre DevTools (F12), ve a la pestaña Console y escribe:
javascript
dataLayerVerás el array completo con todos los objetos que se han empujado en la sesión actual. Puedes inspeccionar cada objeto para verificar que los datos son correctos.
Opción 2: GTM en modo Vista Previa
Activa el modo Vista Previa de GTM y navega por tu web. En Tag Assistant, selecciona cualquier evento y verás la pestaña Data Layer con todos los objetos empujados hasta ese momento y sus valores exactos.
Opción 3: GA4 DebugView
Si ya has configurado las variables y etiquetas en GTM, verifica en GA4 DebugView que los eventos llegan con los parámetros correctos. Si el value llega como undefined o vacío, el problema está en la ruta de la variable de dataLayer.
Errores habituales al implementar el dataLayer
El push se ejecuta después del snippet de GTM para datos que se necesitan en la carga. GTM ya no los ve. Solución: mover el push antes del snippet o usar gtm.js con reinicio de dataLayer.
Rutas de variables incorrectas en GTM. Si el objeto tiene items[0].item_id y la variable apunta a items.0.item_id, puede no funcionar en todos los navegadores. Usa siempre notación de punto.
El campo event falta en el push. Sin event, GTM no dispara ningún activador de evento personalizado. El objeto llega al dataLayer pero nadie lo escucha.
Múltiples pushes para el mismo evento. Si por algún motivo el push se ejecuta dos veces — por un bug en el código o por un listener duplicado — el evento se dispara dos veces en GTM y los datos se duplican en GA4. Verifica siempre en DebugView antes de publicar.
Datos numéricos enviados como strings. El value de una transacción debe ser un número (89.90), no un string ("89.90"). GA4 los acepta, pero algunos cálculos y la integración con Google Ads pueden fallar con strings.
DataLayer y ecommerce: la implementación completa
Para un ecommerce completo, los eventos de dataLayer que deberías tener implementados son:
| Evento | Cuándo se dispara |
|---|---|
view_item_list |
Al ver un listado de productos |
view_item |
Al ver la página de detalle de producto |
add_to_cart |
Al añadir al carrito |
remove_from_cart |
Al eliminar del carrito |
begin_checkout |
Al iniciar el proceso de pago |
add_payment_info |
Al introducir datos de pago |
add_shipping_info |
Al seleccionar método de envío |
purchase |
Al completar la compra |
refund |
Al procesar una devolución |
Estos son los eventos recomendados de GA4 para ecommerce. Si usas exactamente estos nombres y la estructura de parámetros que define Google, GA4 los reconoce automáticamente y activa funcionalidades específicas de análisis de embudo de conversión.
Preguntas frecuentes sobre el dataLayer
¿Quién implementa el dataLayer, el analista o el desarrollador?
El analista define qué datos se necesitan y en qué formato. El desarrollador los implementa en el código de la web. Es un trabajo conjunto: el analista escribe el documento de especificación (qué eventos, qué parámetros, cuándo se disparan) y el desarrollador lo implementa. El analista verifica después que la implementación es correcta.
¿El dataLayer funciona en cualquier plataforma web?
Sí, siempre que puedas añadir JavaScript a la página. WordPress, Shopify, Magento, webs a medida — cualquier plataforma que permita añadir código JavaScript soporta el dataLayer. Algunas plataformas como Shopify tienen limitaciones en ciertas páginas (como la confirmación de compra) que requieren soluciones específicas.
¿Puedo usar el dataLayer sin GTM?
Técnicamente sí — puedes leer el dataLayer directamente desde código JavaScript. Pero GTM es la forma estándar de gestionarlo sin tocar el código cada vez que necesitas hacer un cambio. Sin GTM, cualquier modificación requiere un deploy de desarrollo.
¿El dataLayer afecta al rendimiento de la web?
El impacto es mínimo. El dataLayer es un array JavaScript simple. El dataLayer.push() es una operación de muy bajo coste computacional. Lo que puede afectar al rendimiento son las etiquetas de terceros que GTM dispara a partir de esos eventos, no el dataLayer en sí.
¿Cómo documento el dataLayer para el equipo de desarrollo?
La forma más práctica es un documento de especificación de tagging (también llamado tracking plan o measurement plan) que liste cada evento, sus parámetros, el tipo de dato esperado y cuándo debe ejecutarse el push. Herramientas como Google Sheets, Notion o Avo.app sirven para esto. Cuanto más detallado, menos idas y venidas con el equipo de desarrollo.
Conclusión
El dataLayer es la base de cualquier implementación de analítica digital seria. Sin él, dependes de scraping del DOM y variables JavaScript frágiles que se rompen con cualquier cambio de diseño. Con él, tienes un canal controlado y mantenible para pasar datos desde tu aplicación a GTM y desde ahí a todas las herramientas de medición.
La implementación requiere coordinación con desarrollo, pero el resultado es una capa de datos robusta que cualquier herramienta puede consumir — GA4, Google Ads, Meta Ads, Klaviyo, o lo que venga después.
Para ver cómo usar esos datos una vez en GTM, puedes revisar la guía de variables en GTM y la de cómo crear eventos personalizados en GTM para GA4.
¿Tienes un ecommerce y no sabes si tu dataLayer está bien implementado? Escríbeme y lo auditamos.
