Hola, en este mini post se explica cómo revisar a simple vista si una Data Layer de Tag Manager está funcionando o no, utilizando la vista previa de GTM, sobre todo el menú de eventos.

¿CÓMO COMPROBAR SI LA DATA LAYER ESTÁ EN LA PÁGINA Y SE LEE BIEN?

Nos vamos a fijar para empezar SOLO en el menú izquierdo de la consola. Por supuesto, si hacemos click en el evento, y vamos a la pestaña DATA LAYER, vemos exactamente qué dataLayer se está recopilando, pero hablamos de detección rápida en primer lugar.

CÓMO SABER QUE SÍ SE INTERPRETA DATALAYER A SIMPLE VISTA

Aparece sí o sí una referencia a que existe una dataLayer en la propia vista previa de Tag Manager.

¿Dónde lo vemos? en el menú de eventos a la izquierda

¿Cómo se ve la capa de datos en el menú de eventos del debug de GTM?

• Como nombre de evento (valor de la variable «event«, si la mandamos rellena en dataLayer). En este ej. pone «transaction» en el menú, y en la capa de datos pondrá también «event»: «transaction».

*aquí sí se interpreta y por ello vemos «transaction» en el menú

• Como Message en el menú de eventos (en dicho menú, si hay un event en la DL, aparece su valor, si no hay event, se avisa de la DL poniendo Message). Por ej.:

CÓMO SABER QUE NO SE INTERPRETA DATALAYER A SIMPLE VISTA

Lo sabemos porque no aparece nada NUEVO en el menú de la consola (distinto a los eventos típicos que conocemos, a los eventos automáticos).
Aquí no se interpreta y no vemos nada en el menú de «eventos» en consola de tag manager:

¿CÓMO DEBUGGEAR SI LA DATA LAYER ESTÁ BIEN CON LA CONSOLA DE VISTA PREVIA?

– message pushed to data layer (izqda en captura) >> es lo que se manda en ese punto o evento de la consola, a la capa de datos

– data layer value after this message (dcha en captura) >> es lo que queda tras actualizar con lo mandado en ese punto. ¿A qué me refiero con actualizar? pues dos cosas:

– líneas con variables «nuevas» de dataLayer, se añaden

– líneas con variables ya existentes, solo reescriben el valor de la variable «machacada»

Fijaros que la dataLayer a la derecha tiene más cosas (las que arrastraba previamente al evento Form Submit, por ej. gtm.start).

Otra diferencia pequeña de izqda a dcha: se ha agrupado en un objeto JS todo lo que empieza por gtm. y por ello a la izquierda pone gtm.element, gtm.elementClasses… y a la derecha pone gtm: {element, elementClasses,…}.

Para ver el modo en que se reemplaza el valor de una variable cuando se manda de nuevo, fijaros en que la variable «event» cambia en cada evento de la consola: