Qué es la dataLayer o capa de datos de Google Tag Manager
La Data Layer o capa de datos de Tag Manager es el medio estándar utilizado para comunicar el sitio web (o app) con Google Tag Manager.
Es un formato de código específico de la herramienta Google Tag Manager, se trata de un fragmento JavaScript, que es usado para mandar notificaciones de acciones o información de nuestra web.
CONTENIDO DEL ARTÍCULO:
Qué es la dataLayer o capa de datos de Tag Manager
¿Cuándo usamos la capa de datos o dataLayer?
¿Cómo usamos la capa de datos o dataLayer?
Como decía, se trata de un fragmento de código JavaScript adaptado para la herramienta Tag Manager, y se usa para mandar:
- información dinámica de la web o variables, y
- notificaciones de acciones o eventos
El formato de código para la capa de datos de Google Tag Manager es el que sigue:
<script type="text/JavaScript">
window.dataLayer = window.dataLayer || [];
dataLayer.push ({
//EVENTOS Y VALORES
})
</script>
Aunque en la documentación sobre data Layer de Google ponga otro formato (en realidad dos opciones: [ y { ), es mejor usar este formato único, por pura simplicidad y para evitar errores. Así podemos aprender a cuándo y dónde poner la capa de datos con independencia del formato de código.
Como sabemos, Tag Manager cuenta con un set de plantillas de etiqueta (códigos), variables predefinidas o built-in y activadores (condiciones para lanzar etiquetas). Pero a veces no es suficiente con todo ello para medir o implementar lo buscado.
La dataLayer es necesario para puntos de activación o eventos concretos y para casos en que necesitamos información adicional. Hemos de cargar el código en la página justo cuando se produzca la acción deseada a medir (cuando es un evento), o justo cuando disponemos de la información.
Imaginemos el caso de medición de comercio electrónico mejorado con Google Analytics. Tenemos hasta 9 Data Layers, o 9 acciones diferentes a medir, las más clave: purchase, checkout, product impression, product click, product view, add to cart, promotion impresion, promotion click y refund. Esto es, existe un formato de datalayer estándar para Comercio Electrónico de Analytics, con el esquema de código de Google Analytics. Y cada una va en una acción distinta: carga de página de catálogo, click en producto, carga de producto, añadir al carrito, compra, devolución…
Para remarketing, igual, un formato de datalayer propio de Google Ads, para recopilar categoría y producto visitado, por ej. para remarketing dinámico.
¿Cuándo usamos la capa de datos o dataLayer?
- para lanzar una etiqueta justo en la interacción que deseamos o evento personalizado Por ej. contacto, lead, suscripción, venta, impresión, …
- para recopilar valores dinámicos del código de la página o variables de dataLayer. Ej. precio, id transacción, categoría de página, sección web, idioma, …
- para medir ecommerce mejorado hay 9 dataLayers de Comercio Electrónico Mejorado de Google Analytics. Además, es mejor muchas veces activar ecommerce en evento personalizado, mejor que en carga de página.
- para medir remarketing de Google Ads (remarketing dinámico Google Ads con Tag Manager)
- para insertar código JavaScript personalizado
- otros
En todos esos casos recurrimos a la dataLayer, para extraer información aparte de la estándar. Es decir, más allá de la proporcionada por Tag Manager, y sus activadores y variables por defecto.
En un post anterior expliqué mejor: ¿cuándo usar dataLayer de Google Tag Manager?
IMPORTANCIA CAPA DE DATOS
- – EVENTO DE ACTIVACIÓN
- – ENVÍO DE INFORMACIÓN
Vamos a explicar cada uno.
¿Cómo usamos la capa de datos o dataLayer?
La relacionamos según el caso con:
- activador de evento personalizado para lanzar una etiqueta justo en la interacción que deseamos o evento personalizado
- con variables de data layer o capa de datos, creamos una para cada variable que deseemos capturar, con su nombre.
ACTIVADOR DE EVENTO PERSONALIZADO – Evento de dataLayer –
CUSTOM EVENT (dataLayer event)
Existe un ACTIVADOR asociado a la data layer, el de nombre EVENTO PERSONALIZADO.
‘event’: ‘myEvent’,
Mandamos un evento en capa de datos con el mismo nombre que deseemos asignar y que enviemos en código (purchase, register, login, contact. etc).
Para este usamos un Evento de tipo Personalizado. Con el nombre de evento que mandamos en la variable event. Ej. fbevent, gaevent, …
O si lo deseamos con varios eventos mediante una expresión regular o regex:
Aunque lo mejor es utilizar siempre el mismo evento, cuando esto tenga sentido. Por ej.
- para todos los eventos de facebook: fbevent,
- para los de Google Analytics: gaevent, etc.
Así aprovechamos el potencial de Tag Manager y con una sola etiqueta, activador, y las variables de evento, lo tenemos todo.
Para eventos de Google Analytics tenemos los parámetros o variables categoría, acción, etiqueta, valor y evento con / sin interacción. Ahí definimos el evento.
Por ello, el nombre de evento en dataLayer lo podemos reutilizar para exprimir el activador, de tipo evento personalizado (nombre: gaevent), y esto queda como un naming interno para nosotros.
CÓDIGO DE EVENTO DE DATA LAYER
En estas ocasiones, necesitamos generar con código un activador distinto, para detectar un momento extra, o no medido por Tag Manager por defecto.
DATA LAYER DE EVENTO
Mandamos un push de evento así:
<script type="text/JavaScript">
window.dataLayer = window.dataLayer || [];
dataLayer.push ({
'event': 'myEvent'
})
</script>
VARIABLES DATALAYER: ENVÍO DE INFORMACIÓN
Variable de dataLayer
‘variableName’: ‘variableValue’
Como indica el nombre «capa de DATOS», mandaremos datos de la programación o información desde y con el código de la web, para recibirla en Google Tag Manager y desde allí enviarla a las herramientas.
IMPORTANTE
Siempre es recomendable cuando enviamos variables con información, añadir también un evento de activación, just in case :)
EJEMPLOS
(pop ups, pestañas, impresiones y clicks en menús, formularios, , …)
CÓDIGO DE DATA LAYER CON SOLO VARIABLES
Código para envío de variables (información)
Mandamos un push para añadir variables así:
DATA LAYER DE VARIABLES
<script type="text/JavaScript">
window.dataLayer = window.dataLayer || [];
dataLayer.push ({
'variableName1': 'variableValue1',
'variableName2': 'variableValue2',
'variableName3': 'variableValue3'
})
</script>Para cada variable de la dataLayer creamos su correspondiente variable en Google Tag Manager, una por cada variable o línea de la dataLayer distinta a «event»:
Variable de dataLayer
ENVÍO DE EVENTO + VARIABLES
DATA LAYER VARIABLES + EVENTO
TODO JUNTO
<script type="text/JavaScript">
window.dataLayer = window.dataLayer || [];
dataLayer.push ({
'event': 'myEventName',
'variableName1': 'variableValue1',
'variableName2': 'variableValue2',
'variableName3': 'variableValue3'
})
</script>EJEMPLOS
(dimensiones personalizadas, grupos de contenido, ecommerce, remarketing, métricas personalizadas, …)
Recordemos que el código anterior se complementa con:
- Variable de capa de datos o dataLayer
- Activador de Evento Personalizado
DATA LAYER Y ETIQUETAS
Funcionamiento
En las etiquetas se nos da a elegir la forma de enviar la información:
– con data Layer, que sintetiza toda la información
– con variables de Tag Manager, una para cada dato diferente
OFFTOPIC – SI QUIERES SABER MÁS…
Google Tag Manager funciona como una «centralita» de información. RECOGE y ENVÍA datos y eventos todo el tiempo.
Cada evento que vemos en la consola de Tag Manager, tiene su momento y su nombre de evento correspondiente en el código interno de la herramienta.
Page View, gtm.click, historyChange, pageVisibility, …
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads
