Cómo una capa de datos envía eventos a tus etiquetas de analítica

¿Qué es una capa de datos?

En analítica web, una capa de datos es un objeto JavaScript en la página donde tu sitio escribe eventos y sus valores, para que las etiquetas de analítica y de marketing lean datos limpios y con nombre en lugar de extraerlos del HTML. La documentación de Tag Manager de Google lo resume así: "The data layer is an object used by Google Tag Manager and gtag.js to pass information to tags."

El sentido de la capa es la separación. El código de tu aplicación sabe que acaba de completarse un checkout y cuánto valía. Tus etiquetas saben adónde enviar ese dato. La capa de datos se sitúa entre ambos, y Google expone el objetivo del diseño directamente: las etiquetas "are designed to reference information that is added to the data layer in an organized and predictable way, rather than by parsing variables, transaction information, page categories, and other signals scattered throughout your page." Cuando un rediseño mueve el precio a otro <div>, las etiquetas que leen la capa de datos siguen funcionando y las que extraen datos de la página se rompen.

¿Cuáles son los dos tipos de capa de datos?

Las capas de datos tienen dos formas: un objeto de estado que describe la página y una cola de eventos que registra lo que ocurrió en orden. La forma decide cómo la lee una etiqueta.

El modelo de objeto de estado es el más antiguo. El Customer Experience Digital Data Layer 1.0, un Community Group Final Report fechado el 10 de diciembre de 2013, dice que el objeto raíz "MUST be digitalData, and all data properties within this specification MUST fall within the hierarchy of the digitalData object." Su sección de estado añade que "It is not a W3C Standard nor is it on the W3C Standards Track." Los eventos viven en un array dentro del objeto, digitalData.event[n], que la especificación define como una "List of events that were measured."

El modelo de cola ganó en la práctica por el orden de carga. La documentación de Adobe explica la ventaja: las páginas y los scripts "can start to register data, to trigger events, and to register callbacks by adding them to the array, even before the data layer script itself has been loaded." Un array simple acepta push antes de que exista en la página código de ningún proveedor.

¿Cómo se convierte un dataLayer.push en un evento de analítica?

Un dataLayer.push() se convierte en un evento de analítica cuando Tag Manager procesa el mensaje, asocia su clave event con un activador y dispara una etiqueta que lee los valores enviados. La secuencia tiene cinco pasos:

1. Declara el array una vez, por encima del fragmento del contenedor. El código de instalación de Google es window.dataLayer = window.dataLayer || [];, colocado antes de que cargue Tag Manager.
2. Envía un mensaje con un nombre de evento. La sintaxis de Google es dataLayer.push({'event': 'event_name'}), y un mismo push puede llevar valores junto al evento, como en dataLayer.push({'color': 'red', 'conversionValue': 50, 'event': 'customize'}).
3. Tag Manager pone en cola y procesa el mensaje. Google indica que "Tag Manager processes messages on a first-in, first-out basis: Each message is processed one at a time, in the order it was received."
4. Un activador de evento personalizado coincide con el nombre del evento. "If the message is an event, any tags with trigger conditions that have been met will fire before Tag Manager moves on to the next message."
5. Una variable de capa de datos pasa el valor a la etiqueta, y la etiqueta lo envía, por ejemplo como parámetro de un evento de GA4.

El paso 4 explica una regla que confunde a mucha gente. Un push sin clave event actualiza valores pero no dispara nada. Google advierte que los push desde el código de la página "are not guaranteed to be available for the next event", y su solución es "add an event name to a message as it is pushed to the data layer, and then listen for that event name with a Custom Event trigger."

El fragmento de gtag.js usa la misma cola. El propio fragmento de Google define la función gtag como un envoltorio de una línea:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');

Así que un sitio que ejecuta gtag.js y Tag Manager a la vez tiene un solo array que recibe mensajes de ambos. Google lo deja claro: "Only one dataLayer object is supported per page."

¿Por qué los valores de la capa de datos se arrastran de un push al siguiente?

Los valores de la capa de datos se arrastran porque cada push se fusiona con un "abstract data model" en curso en lugar de sustituirlo. La librería de código abierto data-layer-helper de Google, que documenta este modelo, dice que "holds the most recent value for all keys that have been set by a data layer message." Los valores escalares se sobrescriben. Los objetos simples y los arrays se fusionan de forma recursiva: las claves de un objeto nuevo se copian sobre el objeto anterior, y los índices de un array nuevo se escriben sobre los índices del array anterior, dejando en su sitio cualquier índice que el array nuevo no defina.

Esa regla es inofensiva para una cadena pageType y peligrosa para el ecommerce. Envía una vista de carrito con dos artículos y después una compra con un artículo, y el modelo todavía puede conservar el segundo artículo del push anterior. La guía de ecommerce de GA4 para Tag Manager de Google lo evita limpiando primero en sus 14 ejemplos de eventos. Su ejemplo de compra, abreviado:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: { transaction_id: "T_12345", value: 72.05, currency: "USD", items: [ ... ] }
});

El null funciona porque null cuenta como "everything else" en la tabla de fusión, así que sobrescribe el objeto anterior por completo. El siguiente push se fusiona entonces sobre nada. Si tus informes de ingresos muestran artículos que nadie compró, busca una limpieza que falte antes de auditar cualquier otra cosa. La parte de GA4 de esa configuración se trata en elegir herramientas de seguimiento de ecommerce sin rastrear de más.

¿Qué rompe una capa de datos?

Seis errores explican la mayoría de las capas de datos que parecen correctas y pierden eventos. Cada uno viene de la propia lista de solución de problemas de Google o se deduce de las reglas de fusión anteriores.

La fila de nombres es donde una capa de datos se encuentra con el resto de tu instrumentación. Una capa de datos solo es tan coherente como la especificación que la respalda, que es el trabajo de un plan de seguimiento, y los propios nombres siguen las reglas de cómo una convención de nombres de eventos sobrevive a su primer cambio de nombre.

¿Qué debería contener un push a la capa de datos?

Un push a la capa de datos debería contener el nombre del evento y los valores que necesita un informe, y nada que identifique a una persona. Todo lo que se envía lo puede leer cualquier etiqueta del contenedor, incluidas las etiquetas que otra persona añada más adelante. El contenido de los campos de formulario, las direcciones de email y los nombres no pertenecen a la cola; envía un identificador del formulario y un resultado, como explica para los formularios la guía práctica para hacer seguimiento sin cookies.

Una prueba útil es la misma que aplicas a cualquier evento: cada valor del push debería responder a una pregunta que plantea un informe. Si nadie puede nombrar el informe, elimina la clave. La práctica de fondo, registrar acciones como eventos con nombre y propiedades, se trata en cómo el seguimiento de eventos registra lo que los usuarios hicieron de verdad.

¿Toda herramienta de analítica necesita una capa de datos?

Ninguna herramienta de analítica necesita estrictamente una capa de datos; la capa existe para que un gestor de etiquetas pueda dirigir un mismo conjunto de valores a muchos proveedores. Una herramienta que recibe eventos mediante una llamada directa a una función se salta la cola y las reglas de fusión. Flowsery funciona así: su seguimiento de objetivos registra eventos con una sola llamada como window.flowsery("signup"), con "No complex setup or tag managers needed." Los eventos aparecen en un feed en tiempo real para que puedas "Debug and validate your tracking instantly", se pueden adjuntar valores de ingresos a los eventos para medir el impacto de cada acción, y los eventos se registran sin cookies ni datos personales. La función de seguimiento de objetivos y eventos muestra la configuración. Los sitios que ya usan una capa de datos para otros proveedores pueden conservarla y llamar a window.flowsery() desde el mismo código que envía el evento.

Preguntas frecuentes

¿La capa de datos es lo mismo que Google Tag Manager?

No. La capa de datos es el array de tu página, y Tag Manager es uno de los consumidores que la leen. El fragmento de Google para gtag.js usa el mismo array dataLayer sin Tag Manager, y la capa de datos de cliente de Adobe usa su propio array llamado adobeDataLayer.

¿Dónde debería ir el código de la capa de datos en la página?

Decláralo lo más arriba posible en la página, por encima del fragmento de Tag Manager o de gtag.js. Google dice que cualquier valor que "need to be available to Tag Manager when the page loads" también debe enviarse por encima del código del contenedor. Los push colocados más abajo siguen llegando a la cola, pero después de los primeros eventos del contenedor.

¿Puedo cambiar el nombre de la variable dataLayer?

Sí. Tag Manager recibe el nombre como parámetro en el fragmento del contenedor, y gtag.js recibe un parámetro de consulta l, como en l=myNewName. A partir de ahí, cada declaración y cada push deben usar el nombre nuevo, porque los push al nombre antiguo no llegan a nada.

¿Por qué mi evento de compra de GA4 contiene artículos de un evento anterior?

El push anterior se fusionó con el modelo de datos y tu push de compra no lo limpió. Los arrays y los objetos simples se fusionan de forma recursiva, así que los artículos sobrantes sobreviven. Envía { ecommerce: null } justo antes de cada evento de ecommerce, como hacen los ejemplos de Google.

¿Los valores de la capa de datos persisten entre cargas de página?

No. Google indica que cada variable de la capa de datos persiste "only as long as the visitor remains on the current page." Los valores que importan en todas las páginas, como un tipo de visitante o una categoría de página, hay que enviarlos de nuevo en cada carga de página.

¿Cuál es la diferencia entre dataLayer.push y gtag?

gtag() es un envoltorio que llama a dataLayer.push(arguments), así que ambos escriben en la misma cola. La diferencia está en el formato del mensaje y en los métodos personalizados: Google dice que las funciones enviadas para acceder a set, get y reset "must use .push" directamente, porque gtag interpreta una función como "an invalid command" y la ignora.

¿Por qué mi dataLayer.push no activó ninguna etiqueta?

Un push solo activa una etiqueta cuando lleva una clave event que un activador de evento personalizado está esperando. Los valores enviados sin esa clave sí actualizan la capa de datos, pero Tag Manager no tiene nada con qué compararlos, así que ningún activador se dispara. Añade el nombre del evento en el mismo push, o esos valores quedan ahí hasta que llegue un mensaje posterior que sí lo incluya.

¿Debería usar digitalData o dataLayer en un proyecto nuevo?

Elige el modelo de cola de eventos, el que usan tanto dataLayer como adobeDataLayer. Acepta pushes antes de que se cargue cualquier script del proveedor, justamente el problema de orden de carga que sufre el modelo de objeto de estado. Una etiqueta que lee digitalData antes de que el objeto esté completo no lee nada. digitalData además viene de un informe de un Community Group de 2013 que deja claro que no es un estándar W3C.

¿Es seguro enviar direcciones de correo a la capa de datos?

No. Todo lo que se envía a la capa de datos puede leerlo cualquier etiqueta del contenedor, incluidas las que añada otra persona después. Envía un identificador de formulario y un resultado en su lugar, nunca el contenido real del campo, el nombre ni el correo electrónico.

¿Es adobeDataLayer lo mismo que el dataLayer de Google?

Ambos son arrays sencillos que procesan mensajes en orden, pero son variables globales distintas. Tag Manager y gtag.js de Google comparten window.dataLayer, y la capa de datos de cliente de Adobe usa su propio array, window.adobeDataLayer. La documentación de Adobe describe la misma ventaja de orden de carga. Páginas y scripts pueden registrar datos y disparar eventos con un push al array antes de que se cargue el propio script de la capa de datos.