Qué es el dataLayer y para qué sirve en GTM
El dataLayer es la pieza más importante de una arquitectura de tracking correcta — y la más ignorada. Sin él, GTM solo puede detectar clics en el DOM. Con él, GTM recibe datos de negocio reales: qué formulario se envió, qué producto se compró, qué cliente se cualificó. Esta es la diferencia entre medir eventos y medir negocio.
¿Qué es el dataLayer en Google Tag Manager?
El dataLayer es un array de JavaScript que actúa como canal de comunicación entre el código de una web y Google Tag Manager. Permite que la web envíe información de negocio — eventos, variables, valores de transacción — a GTM de forma estructurada, para que GTM los procese y los distribuya a las herramientas de tracking conectadas (GA4, Google Ads, Meta Pixel, etc.).
La alternativa al dataLayer son los triggers de clic o scroll de GTM, que detectan interacciones en el DOM pero no tienen acceso a la lógica de negocio interna de la web. El dataLayer es la arquitectura correcta para cualquier implementación de tracking que necesite datos de negocio reales.
dataLayer
El dataLayer es un array global de JavaScript inicializado en el código de la web como window.dataLayer = window.dataLayer || []; antes del snippet de GTM. Funciona como una cola de mensajes: la web añade objetos con información de eventos y variables mediante dataLayer.push(), y GTM los escucha en tiempo real y los procesa según las reglas de triggers y etiquetas configuradas.
Cada dataLayer.push() puede contener un nombre de evento (que GTM usa para disparar los triggers correspondientes) y cualquier número de variables de negocio (valor de transacción, ID de producto, categoría del lead, email hasheado) que las etiquetas de GA4 y Google Ads necesitan como parámetros.
El dataLayer persiste durante toda la sesión de navegación — los valores enviados en un push() anterior siguen disponibles para GTM hasta que se sobreescriben o la sesión termina.
Cómo funciona el dataLayer: web → GTM → herramientas
El flujo completo de un evento con dataLayer tiene tres pasos: la web empuja el evento, GTM lo escucha y dispara etiquetas, las etiquetas envían los datos a GA4 y Google Ads. El código habla por sí solo.
// Se ejecuta cuando el formulario de contacto se envía con éxito
// (en el callback de confirmación del plugin de formularios)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'formulario_enviado',
lead_tipo: 'contacto_web',
lead_servicio: 'google_ads',
lead_valor: 500, // valor estimado del lead en euros
pagina_origen: '/servicios/google-ads/'
});// Configuración del trigger en GTM (no es código, es la interfaz de GTM)
// Tipo de trigger: Evento personalizado
// Nombre del evento: formulario_enviado
// Variables de capa de datos creadas en GTM:
// {{dlv - lead_tipo}} → lee dataLayer['lead_tipo']
// {{dlv - lead_servicio}} → lee dataLayer['lead_servicio']
// {{dlv - lead_valor}} → lee dataLayer['lead_valor']// Etiqueta GA4 Event configurada en GTM
// Nombre del evento: generate_lead
// Disparador: trigger "formulario_enviado" del paso 2
// Parámetros del evento (usan las variables de capa de datos):
{
currency: "EUR",
value: "{{dlv - lead_valor}}", // → 500
lead_type: "{{dlv - lead_tipo}}", // → contacto_web
service: "{{dlv - lead_servicio}}" // → google_ads
}generate_lead con valor 500€, tipo "contacto_web" y servicio "google_ads". Google Ads importa ese evento como conversión con el valor correcto. El Smart Bidding aprende que ese tipo de lead vale 500€ y optimiza las pujas en consecuencia. Sin dataLayer, solo llegaría un evento sin ninguno de esos parámetros de negocio.
dataLayer vs triggers de clic en GTM: cuándo usar cada uno
dataLayer.push()
- Dispara cuando el negocio lo dice, no cuando el DOM cambia
- Pasa variables de negocio (valor, ID, categoría) junto con el evento
- Robusto ante cambios de diseño — no depende de clases CSS ni textos de botones
- Funciona en SPAs (React, Vue, Angular) sin problemas de timing
- Auditable — el código de la web documenta qué eventos se envían
- Obligatorio para ecommerce, lead scoring y conversiones con valor
Triggers de clic/scroll en GTM
- Dispara en el clic, no en la confirmación — mide intentos, no éxitos
- Sin acceso a variables de negocio — solo datos del DOM visible
- Se rompe con cambios de diseño — si cambia la clase CSS o el texto, el trigger falla
- Problemas en SPAs — el DOM puede no estar listo cuando se dispara
- No auditable — los triggers de clic no están en el código de la web
- Aceptable solo para eventos de bajo valor sin datos de negocio
push() ocurre solo en el callback de confirmación del plugin de formularios — cuando el servidor ha aceptado el envío. La diferencia entre medir intentos y medir envíos reales puede ser del 30 al 60% en formularios con validaciones complejas.
5 pasos para implementar el dataLayer correctamente en GTM
Inicializar el dataLayer antes del snippet de GTM
El array window.dataLayer debe existir antes de que GTM lo intente leer. La inicialización estándar va en el <head> de la web, justo antes del snippet de GTM:
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Snippet de GTM a continuación -->Definir qué eventos y variables necesita el negocio
Antes de escribir código, documentar en una tabla: qué acciones del usuario son relevantes para el negocio (formulario de contacto enviado, solicitud de presupuesto, compra completada, paso de checkout), qué nombre tendrá cada evento en el dataLayer, y qué variables de negocio se necesitan junto con cada evento. Esta tabla es el contrato entre el equipo de desarrollo y el equipo de marketing.
snake_case para los nombres de eventos (formulario_enviado, compra_completada) y seguir la nomenclatura de eventos recomendados de GA4 cuando existe equivalente (generate_lead, purchase, begin_checkout).
Añadir el dataLayer.push() en el código de la web
El push() debe ejecutarse en el momento exacto en que el evento de negocio ocurre — no en el clic, sino en la confirmación. Para formularios: en el callback de éxito del plugin. Para compras en WooCommerce: en el hook woocommerce_thankyou. Para SPAs: en el callback de la llamada a la API que confirma la acción.
// En el JavaScript del tema o un plugin personalizado
document.addEventListener('wpcf7mailsent', function(event) {
window.dataLayer.push({
event: 'formulario_enviado',
form_id: event.detail.contactFormId,
lead_servicio: 'contacto_general'
});
});Crear variables de capa de datos y triggers en GTM
En GTM: crear una Variable de capa de datos por cada campo del push() que se necesite usar en etiquetas (nombre de variable exactamente igual al del push()). Crear un Trigger de evento personalizado que escuche el nombre del evento definido en el campo event del push().
dlv - (ej: dlv - lead_servicio) para distinguirlas de otras variables de GTM en la interfaz.
Validar en Vista Previa de GTM antes de publicar
Activar el modo Vista Previa de GTM, ejecutar el flujo que genera el evento en la web, y verificar en el panel de Vista Previa que: el evento aparece en la lista de eventos del dataLayer, las variables de capa de datos tienen los valores correctos, el trigger se ha disparado, y las etiquetas de GA4 y Google Ads se han ejecutado. Solo publicar el contenedor cuando la validación es correcta.
// En la consola del navegador (F12) se puede inspeccionar
// el estado actual del dataLayer en cualquier momento:
console.log(window.dataLayer);
// Resultado esperado tras el envío del formulario:
// [{event: "gtm.js", ...},
// {event: "formulario_enviado", lead_servicio: "contacto_general", ...}]Errores frecuentes en la implementación del dataLayer
dataLayer.push() en el clic, no en la confirmación
El push() se ejecuta al hacer clic en el botón "Enviar" del formulario, antes de que el servidor confirme el envío. Los formularios con errores de validación se cuentan como conversiones aunque el usuario no haya completado el proceso.
Nombre del evento en el push() diferente al del trigger
El push() envía event: 'Formulario_Enviado' (con mayúscula) pero el trigger de GTM escucha formulario_enviado (sin mayúscula). El trigger nunca se dispara. El dataLayer funciona correctamente pero GTM no lo detecta.
Inicialización del dataLayer después del snippet de GTM
GTM se carga antes de que el window.dataLayer esté inicializado. GTM crea su propio array interno y los push() posteriores funcionan, pero los valores del dataLayer pre-GTM (como datos de usuario o de producto cargados con la página) no están disponibles.
No limpiar variables del dataLayer entre navegaciones en SPAs
En Single Page Applications (React, Vue), el dataLayer persiste entre navegaciones virtuales. Una variable lead_valor: 500 enviada en una página puede seguir disponible en la siguiente si no se limpia. Los eventos de la segunda página heredan valores incorrectos de la primera.
Mezclar dataLayer con triggers de clic para el mismo evento
Tener un dataLayer.push() para el formulario Y un trigger de clic en GTM sobre el mismo botón, ambos conectados a la misma etiqueta de GA4. El evento se registra dos veces — una por el push y otra por el clic.
Nombre de variable en GTM diferente al del push()
El push() envía lead_valor pero la variable de capa de datos en GTM está configurada para leer leadValor. La variable de GTM siempre devuelve undefined. Los parámetros de GA4 y Google Ads llegan vacíos.
Casos de uso del dataLayer por tipo de web
← Desliza para ver la tabla completa
| Tipo de web | Evento a medir | dataLayer.push() cuándo | Variables clave a pasar |
|---|---|---|---|
| Web de servicios B2B | Formulario de contacto enviado | Callback de confirmación del plugin de formularios | servicio_interes, pagina_origen, valor_estimado |
| Ecommerce | Compra completada | Página de confirmación de pedido (thank_you) | transaction_id, value, currency, items[] |
| Ecommerce | Añadir al carrito | Click en botón + confirmación de adición al carrito | item_id, item_name, price, quantity |
| SaaS / App web | Registro completado | Callback de la API de registro (respuesta 200) | plan_seleccionado, metodo_registro, valor_plan |
| Landing page | Clic en botón de llamada | Click en <a href="tel:"> — trigger de clic GTM válido aquí | No necesita variables (trigger de clic suficiente) |
| Web con reservas | Reserva confirmada | Webhook de confirmación del sistema de reservas | servicio, fecha, valor, id_reserva |
| CRM integration | Lead cualificado (offline) | Webhook del CRM a GA4 Measurement Protocol vía n8n | valor_cliente, categoria_lead, gclid |
Lo que más se pregunta sobre el dataLayer en GTM
window.dataLayer) que actúa como canal de comunicación entre el código de una web y Google Tag Manager. La web envía eventos y variables de negocio mediante dataLayer.push(), y GTM los escucha en tiempo real para disparar las etiquetas correspondientes (GA4, Google Ads, Meta Pixel). Es la alternativa correcta a los triggers de clic en el DOM para cualquier evento que requiera datos de negocio reales junto con la medición.dataLayer.push() siempre que: el evento tenga lógica de validación (formularios, checkouts), se necesiten variables de negocio junto al evento (valor, ID, categoría), la web sea una SPA (React, Vue, Angular), o cuando la robustez ante cambios de diseño sea importante. Los triggers de clic de GTM son aceptables solo para eventos simples sin datos de negocio — como un clic en un número de teléfono — donde el elemento del DOM es estable.wpcf7mailsent en JavaScript y ejecutar el dataLayer.push() en el callback. Para Gravity Forms: usar el hook gform_confirmation_loaded. Para WooCommerce: el dataLayer de eventos de ecommerce se puede generar con el hook PHP woocommerce_thankyou que renderiza el push en la página de confirmación de pedido. Ver la guía de mejores prácticas de Google Tag Manager para el contexto completo.dataLayer es un mecanismo de comunicación en tiempo real durante una sesión — los datos existen en memoria y desaparecen cuando el usuario cierra la página. Las cookies persisten entre sesiones y se usan para la atribución multi-visita (reconocer que el usuario que convierte hoy hizo clic en un anuncio hace tres días). En la práctica, el dataLayer se usa para pasar datos de eventos y variables de negocio a las etiquetas durante una sesión, mientras que las cookies gestionan la identidad del usuario entre sesiones. Las dos piezas son complementarias, no alternativas.¿Necesitas implementar el dataLayer correctamente en tu web?
Diseño de la arquitectura de dataLayer según los eventos de negocio relevantes, implementación en GTM, configuración de variables y triggers, conexión con GA4 y Google Ads, y validación completa antes de publicar. Llamada de diagnóstico sin coste.
Agendar llamada →