¿Qué es el data layer (capa de datos)?

La capa de datos es una estructura de JavaScript que el propio sitio web crea y rellena. En la práctica es un array llamado window.dataLayer, y cada elemento que se añade es un objeto con pares de clave y valor: el tipo de página, el identificador de un producto, el importe de un pedido o el nombre de la acción que acaba de ocurrir. Nada más. No hay red, no hay servidor, no hay informe.

Conviene separarla de Google Tag Manager. El gestor de etiquetas lee la capa de datos, pero no es su dueño. El array existe en cuanto una línea de código lo declara, aunque no haya ningún contenedor instalado, y sigue siendo legible por cualquier otra herramienta que quiera suscribirse a él. Esa independencia es justo lo que hace útil el patrón: el equipo de desarrollo publica los datos una sola vez y quién los consume se decide después.

Tampoco es Google Analytics 4. Muchos artículos tratan los dos conceptos como si fueran el mismo paso, y de ahí salen implementaciones confusas. GA4 recibe eventos con sus parámetros y los guarda en una propiedad de medición. La capa de datos ocurre antes de eso, en el navegador, y no envía nada por sí misma. Un valor puede estar perfectamente disponible en window.dataLayer y no aparecer jamás en los informes de GA4 porque falta la etiqueta que lo recoja.

El mecanismo tiene dos momentos, y el orden entre ellos decide si los valores llegan o se pierden. Primero, antes de que se cargue el contenedor, la página declara el array con window.dataLayer = window.dataLayer || []. Esa forma es deliberada: si el array ya existe se reutiliza, y si no existe se crea vacío. Los datos que ya se conocen en el momento de servir el HTML se empujan ahí, y el contenedor los encuentra listos al arrancar.

Después, cuando el usuario hace algo, se usa dataLayer.push(). Ese método añade un objeto al final de la cola sin borrar lo anterior. Si el objeto incluye la clave event, el gestor de etiquetas lo interpreta como una señal con nombre y puede disparar las etiquetas asociadas a ese nombre. El array no es una cola pasiva: el contenedor instala un oyente sobre él nada más arrancar, procesa los mensajes en el orden en que fueron llegando y conserva, para cada nombre de variable, el último valor empujado.

<script>
// Antes del contenedor de etiquetas
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  page_type: 'producto',
  currency: 'EUR'
});
</script>

<!-- Aquí carga el contenedor -->

<script>
// Después, cuando ocurre la acción
var btn = document.querySelector('#comprar');

if (btn) {
  btn.addEventListener('click', addToCart);
}

function addToCart() {
  window.dataLayer.push({
    event: 'add_to_cart',
    value: 49.90,
    currency: 'EUR',
    item_id: 'SKU-1183'
  });
}
</script>

La diferencia práctica está en no volver a asignar el array una vez que el contenedor ha cargado. Escribir window.dataLayer = [] en ese punto sustituye el objeto que el gestor vigila por uno nuevo, y todos los push posteriores quedan invisibles para él. Los valores, además, viven solo mientras el visitante permanece en la página actual: al navegar a otra URL hay que volver a empujarlos.

La decisión que depende de la capa de datos es si el negocio puede medir algo nuevo sin abrir un ticket de desarrollo. Cuando el sitio publica sus datos de forma ordenada, añadir una etiqueta de conversión, un público de remarketing o un evento de embudo es trabajo de configuración en el gestor de etiquetas, cuesta minutos y no toca el código de la web. Cuando no existe, cada requisito de medición vuelve al backlog y compite con las funcionalidades de producto.

El segundo efecto es la calidad de los datos. Leer el precio del texto de la página o adivinar el tipo de plantilla a partir de la URL funciona hasta el primer rediseño. Un valor empujado explícitamente sobrevive a los cambios de maquetación porque no depende del HTML visible. Esto se nota sobre todo en comercio electrónico, donde el importe, la moneda y el identificador de pedido tienen que coincidir con la facturación para que el ROAS signifique algo.

Hay un tercer motivo, más aburrido y más caro de ignorar: el gobierno del dato. Con una capa de datos documentada existe un contrato entre desarrollo y marketing sobre qué nombres hay, qué contienen y cuándo se disparan. Sin ese contrato, dos personas miden lo mismo con nombres distintos y las cifras del informe dejan de ser comparables entre trimestres.

• Declara window.dataLayer = window.dataLayer || [] por encima del contenedor y empuja ahí todo lo que ya se conoce al servir el HTML.
• Envía el evento y sus parámetros en el mismo objeto, en un solo push, para que la etiqueta encuentre el contexto completo cuando se dispare.
• Fija una convención de nombres en minúsculas y con guion bajo, y escíbela en un documento que desarrollo y marketing compartan.
• Respeta los tipos: los importes y las cantidades van como número, no como texto, o las métricas agregadas fallarán en silencio.
• Para eventos que dependen de una confirmación, como una compra, empuja tras la respuesta del servidor y no en el clic del botón.
• Comprueba cada implementación en el modo de vista previa del gestor y en la consola del navegador antes de publicar el contenedor.

• Reasignar el array después de que el contenedor haya cargado, con lo que el gestor pierde de vista la cola y deja de recibir los push siguientes.
• Empujar el evento y navegar a otra URL en el mismo instante: la página se descarga antes de que la etiqueta llegue a enviarse.
• Dar por hecho que un push ya es un evento de GA4, cuando entre ambos falta la etiqueta que lo recoja y lo traduzca.
• Meter en la capa correos, teléfonos o identificadores de cliente en claro, un dato personal que queda expuesto en el navegador.
• Suponer que los valores persisten entre páginas y no volver a empujarlos en cada carga.