Data Layer de Google Tag Manager: ¿qué es y para qué sirve?

Posted by Lucía Marín on Mar 7, 2019

 

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.

datalayer-tag-manager-lucia-marin

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.

datalayer-google-tag-manager-lucia-marin

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

La capa de datos o data layer cuenta con dos usos principales:

  • – 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:

purchase|register|login|contact

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

google-tag-manager-variable-lucia-marin

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

google-analytics-ecommerce-tag-manager

 

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, …

tag-manager-vista-previa-datalayer

 

Si necesitas aprender Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta de material PDF actualizado constantemente. Un sitio para hacer tus prácticas. Y está tutorizado por foro/email durante 2 meses (más opción a clases particulares).

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
contacta con nosotros, seguro que podemos ayudarte :)

Sobre mí

Comparte tu opinión

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.