¿Qué es el dataLayer de Google Tag Manager?

El dataLayer de Google Tag Manager es una ‘capa de datos‘ (datos que están disponibles para ser leídos, recogidos y enviados a cualquier herramienta) la cual contiene información útil acerca de la página y del usuario que está visitando el sitio web en ese momento. En esta entrada vas a aprender todos los detalles y además podrás ver cómo crear y utilizar tu propio dataLayer.

1 . ¿Qué es el dataLayer de GTM?

El dataLayer (capa de datos en español) es un “objeto JavaScript” que podemos añadir a nuestro sitio web para disponer de información extra acerca de nuestra web y nuestros usuarios de una forma sencilla y estandarizada.

En otras palabras, el dataLayer consiste en una serie de variables que se informan para que podamos enviarlas a las diferentes herramientas que utilizamos en nuestra página web.

Vamos a verlo mejor con un ejemplo real de dataLayer. El dataLayer de Carrefour.

Aquí tenemos uno de sus productos y tras echar un rápido vistazo a la página del producto podemos encontrar información acerca del mismo como por ejemplo:

• Nombre del producto
• Precio Original
• Precio Rebajado
• Categoría a la que pertenece (podemos verlo en la ruta superior)

Sin embargo, con la gran cantidad de productos que tiene Carrefour en venta en su página web, podemos pensar qué nos sería de mucha utilidad tener por ejemplo algún identificador único de producto en lugar del nombre.

O también, Carrefour dispone de un marketplace por lo que no siempre el vendedor es Carrefour, por lo que en el caso de que no lo sea, sería interesante recoger dicha información acerca de quién es el vendedor de ese producto.

Por último, mencionar que no solo necesitaríamos saber cosas relacionadas con el producto, sino también con la página como por ejemplo, categoría a la que pertenece (si está dentro de Televisores o por el contrario está dentro de ofertas…), si el usuario que está navegando ha iniciado sesión o no, en el caso de que si, cuál es su Identificador, que tipo de usuario soy….

En definitiva, Carrefour podría “volcar” a este dataLayer toda la información de la que dispone acerca de sus productos, su página web y sus usuarios.

Nota: Si quieres ver tu mismo el dataLayer de Carrefour o de cualquier otro sitio web (si existe el dataLayer) simplemente debes acceder a la consola de Google Chrome (F12) y escribir ‘dataLayer’

2. ¿Para qué sirve el dataLayer?

Sencillamente, sirve para facilitarnos ‘la vida’ o nuestro día a día a la hora de configurar todos los píxeles que utilizamos.

Por ejemplo, la información relacionada con nuestros productos (Nombre, ID, Categoría, Precio normal, Precio rebajado…) nos será útil tenerla en Analytics para hacer diferentes análisis acerca de qué tipo de productos compran más nuestros usuarios, pero esa información también le sirve al pixel de Facebook para optimizar sus campañas, a los Floodlights de Google, a los píxeles de Google Ads, y en definitiva a cualquier herramienta que necesite información extra de cualquier elemento que esté dentro de nuestro sitio web.

Ahora que ya sabemos que el dataLayer sirve para recoger información extra de nuestra página web y enviarla a diferentes herramientas… ¿Por qué necesitamos este dataLayer? Y si la información la puedo recoger de otra forma o directamente tenerla en alguna otra variable que esté disponible?

Pues sencillamente, como ya mencioné en el primer párrafo de este punto ‘para facilitarnos la vida’.

Si tenemos una página web, tenemos que analizar qué información nos gustaría tener acerca de nuestras páginas o productos y enviarla a las diferentes herramientas.

Antes del nacimiento del dataLayer:

• Enviamos a los programadores una petición para que configuren los diferentes píxeles (Facebook, Google Ads, Floodlights, Analytics….). Los programadores tendrán que emplear su tiempo en recoger la información solicitada por nosotros (mediante JavaScript, JQuery, o cualquier otro lenguaje) y configurarán uno por uno cada uno de los píxeles.

Después del nacimiento del dataLayer:

• Solicitamos a los desarrolladores que ‘creen’ el dataLayer con la información que necesitamos. Una vez está listo, ya no tendremos que ‘molestar’ más a los desarrolladores para añadir nuevos píxeles. Desde nuestro contenedor de GTM, podremos recoger cualquier información del dataLayer de una forma muy rápida y sencilla.

3. Información que podemos enviar al dataLayer

Al dataLayer podemos enviar cualquier información que nos sea de utilidad para nuestra página web y las campañas de publicidad que realizamos. Por tanto, lo primero de todo que debemos hacer es seleccionar qué variables queremos que se envíen a nuestro dataLayer y posteriormente implementarlo.

No obstante, te dejo algunas de las variables más comunes agrupadas por categorías:

Variables relacionadas con los usuarios:

1. ID de usuario
2. Fecha de creación del usuario
3. Sexo del usuario
4. Edad del usuario
5. Idioma del usuario
6. Fecha del último inicio de sesión
7. Fecha de la última compra del usuario
8. Total de compras del usuario
9. Tipo de usuario: logueado /no logueado

Variables relacionadas con la páginas del sitio web:

1. Categoría de página
2. Sub Categoría de página
3. Tipo de página (producto, about, tienda, checkout…)
4. Versión de la página
5. Árbol de navegación de la página
6. Código de respuesta de la página
7. Entorno de la página (live, pruebas…)

Variables relacionadas con los productos:

1. ID de producto
2. Precio del producto
3. Precio rebajado del producto
4. Categoría del producto
5. Variante del producto
6. Proveedor del producto
7. Estado del producto (nuevo, usado…)
8. Nivel de stock
9. Marca del producto

Otras variables útiles:

1. Temperatura actual en la localización del usuario
2. Tiempo actual en la locación del usuario (lluvia, sol, nubes….)
3. ID de cliente de Analytics

Lo dicho, estas variables son tan solo algunos ejemplos, pero realmente podemos enviar al dataLayer cualquier información que se nos ocurra. Nosotros tenemos que pensar qué variables queremos y decirles a los programadores que las implementen (añadan) a nuestra página web.

4. Cómo añadir el dataLayer a tu página web

Tras haber decidido qué variables queremos que se envíen al dataLayer de nuestra página web, ahora nos toca pasar a la acción e implementarlas.

Dependiendo de tus conocimientos y/o de qué sistema esté programada tu página web, podrás hacerlo de dos formas:

1. Haciendo uso de un plugin o Extensión
2. Directamente en el código fuente (avanzado)

4.1. Haciendo uso de un plugin o Extensión

Si tu web está hecha con algún gestor de contenidos (CMS) como puede ser WordPress, Joomla, Shopify…. normalmente encontrarás plugins o extensiones ya creadas que te permiten seleccionar qué información quieres tener en el dataLayer.

“Lo malo” de esta opción es que no puedes añadir variables que no estén disponibles en la extensión que estés utilizando. Simplemente tendrás que seleccionar las variables que quieres que estén disponibles en tu página web.

Dado que sería casi imposible mostrar todos los plugins y extensiones que existen para añadir este dataLayer, te voy a introducir como se haría con el plugin ‘DuracellTomi’s Google Tag Manager para WordPress’, uno de los más extendidos y completos que existen actualmente para WordPress.

Una vez has instalado y activado este plugin en tu página web, podrás acceder a todas las opciones del plugin y seleccionar la información extra que deseas que se incluya automáticamente en el dataLayer:

4.2. Directamente en el código fuente (avanzado)

Esta opción es la más avanzada de las dos, pero también la más personalizable. Para poder añadir un dataLayer a tu página web sin utilizar un plugin o extensión, deberás acceder al código de la misma y añadirlo en el lugar adecuado.

Ejemplo de definición del dataLayer:

<script>
dataLayer = [{
'pageCategory': 'signup',
'postName': 'high-value',
'postTotalWords':'3225',
'userID', '12329'
}];
</script>

Importante: Si haces intentas añadir el dataLayer directamente en el código fuente de tu página web, asegúrate de que el código está correcto y realiza siempre una copia de seguridad de la misma para evitar cualquier problema con tu página web. Es recomendado que no lo hagas tú mismo si no estás completamente seguro de cómo hacerlo.

Muy importante: Si decides añadirlo tu mismo, o enviárselo a algún programador, es muy importante que cuando se hace la definición del dataLayer, se haga siempre antes del código de tu contenedor de GTM.

Más información sobre el dataLayer.

5. Estructura del dataLayer

Cuando tenemos que añadir variables al dataLayer es muy importante saber cómo hacerlo para que todo siga funcionando correctamente.

Antes de nada, quiero explicarte qué es lo que hace Google Tag Manager cuando se ejecuta en alguna de las páginas de tu sitio web.

1. El usuario accede a cualquiera de tus páginas donde has añadido Google Tag Manager a tu página web (suponiendo que el código se ha añadido en lo más alto desde tu página.
2. Este código revisa si existe o no un dataLayer en la página en la que se está ejecutando. Si no existe, crea uno vacío y sigue su ejecución. Si ya existe uno, continúa su ejecución añadiendo los eventos al dataLayer existente.
3. Se envía un evento al dataLayer cuándo el código JavaScript de GTM está listo: ‘Pageview’ o ‘gtm.js’
4. Se envía un evento al dataLayer cuando HTML de la página y los archivos CSS están listos: ‘DOM Ready’ o ‘gtm.dom’.
5. Se envía un evento al dataLayer cuando la página está completamente cargada: ‘Window Loaded’ o ‘gtm.load’

La estructura de cómo debería de ir estructurado en el código fuente sería la siguiente:

<!DOCTYPE html>
<html>
<head>
<title></title>
//Definición del dataLayer (opcional)
//Código principal del contenedor de GTM
//Push al dataLayer que añade información al dataLayer
</head>
<body>
//Código secundario del contenedor de GTM (nonscript)
</body>
</html>

Si por casualidad hiciéramos la declaración del contenedor después del código principal del contenedor de GTM, lo que estaríamos haciendo sería definir un nuevo dataLayer y por tanto borraríamos todo el contenido que exista en ese momento. Para evitar esto, haremos uso de ‘push’.

Por último y por si todavía no te habías dado cuenta, el dataLayer se define desde cero cada vez que se carga una página. Es decir, que el valor que tomará cada variable se volverá a evaluar en la siguiente página que visite el usuario.

No obstante, los valores de muchas variables como por ejemplo el ID de usuario o el tipo de usuario será el mismo durante toda la sesión de un usuario. Variables como el Nombre de producto cambiarán su valor por el correspondiente, dependiendo del producto que se esté mostrando en cada momento.

6. Definición vs Push

6.1. Definición

Como ya he mencionado anteriormente, lo más importante es hacer la definición siempre antes del código del contenedor. Lo que hacemos aquí es definir o establecer qué variables van a estar disponibles en el dataLayer para la página en la que se está ejecutando.

Por ejemplo, si definimos el siguiente dataLayer:

<script>
dataLayer = [{
'pageCategory': 'signup',
'postName': 'high-value',
'postTotalWords':'3225',
'userID', '12329'
}];
</script>

Estas variables estarán disponibles para ser usadas por nuestro contenedor de GTM en esa misma página.

6.2. Push

Este método se utiliza para añadir información cuando ya existe un dataLayer.

Por ejemplo, cuando estamos en una tienda online y estamos en un listado donde el usuario puede añadir cualquiera de los productos al carrito y seguir en la misma página, nos interesaría saber qué producto  es el que el usuario ha añadido al carrito (o productos).

Para ello, cada vez que un usuario haga click en ‘añadir al carrito’ de un producto concreto se enviará un evento al dataLayer con la información del producto añadido al carrito.

El código que habría que añadir a la página web para que se ejecute cuando un usuario hace click en ese producto es:

dataLayer.push({
"event": "addToCart",
"ecommerce": {
"currencyCode": "USD",
"add": {
"products": [{
"id": "bc823",
"name": "Fuelworks T-Shirt",
"price": "92.00",
"brand": "Fuelworks",
"category": "T-Shirts",
"variant": "red",
"dimension1": "M",
"position": 0,
"quantity": 1
}]
}
}

Nota: No te preocupes si no entiendes todo el código anterior. Únicamente quiero que te quedes con el concepto de que es muy importante usar el método ‘push’ en lugar de la definición cuando tenemos que añadir información al dataLayer después de que la página se haya cargado.

7. Recoger las variables del dataLayer con Google Tag Manager

Una vez tenemos el dataLayer añadido a nuestro sitio web, es el momento de recoger esas variables y enviarlas a la herramientas en las que vayamos a hacer uso de ellas.

Antes de nada, si todavía no tienes muy claro qué es Google Tag Manager, te recomiendo que revises los conceptos básicos de GTM con este mega tutorial.

Bien, pues pongámonos manos a la obra!

Voy a explicártelo paso a paso y lo iremos viendo sobre la marcha para que te resulte más fácil y práctico:

1. Revisa el dataLayer de tu página y elige una variable.

En este ejemplo vamos a coger la variable ‘pagePostAuthor’.

2. Accede a tu contenedor de GTM, y crea una nueva variable de tipo ‘Variable de capada de datos’. 

Muy importante que el nombre de la variable la escribas tal y como está indicada en el dataLayer (pagePostAuthor). El nombre de arriba del todo (en la imagen) es el nombre que le darás dentro de tu contenedor de GTM. Intenta que sea lo más descriptiva posible y siempre siguiendo una nomenclatura.

3. Verifica que la variable que has creado funciona correctamente y recoge el valor indicado en el dataLayer.

• Para ello accede al modo ‘Vista Previa’ de tu contenedor de GTM (haciendo click en el botón de la barra superior de tu contenedor de GTM).
• Ahora accede a tu web y recarga la página.
• Selecciona el evento ‘Pageview’ en el menú de la izquierda de la consola de GTM, haz click en la pestaña ‘Variables’ y busca la variable que acabas de crear:

4. Listo!

Como puedes ver en la imagen anterior, la variable crear arroja el mismo valor que veíamos en el dataLayer. Así que desde este momento, podremos hacer uso de esta variable en nuestro contenedor de GTM y enviarla a cada una de las diferentes etiquetas.

8. Revisar el dataLayer de cualquier página web

Normalmente el dataLayer de una web esté abierto para cualquier persona que desee revisarlo.

Para acceder al dataLayer de una página, simplemente debes acceder a la consola de tu navegador (Google Chrome por ejemplo), que normalmente se hace pulsando la tecla ‘F12’ o haciendo click con el botón derecho en ‘Inspeccionar Elemento’. Una vez en la consola, escribe ‘dataLayer’ y pulsa ‘Enter’:

Otra forma de revisar el dataLayer es a través de Extensiones del navegador o plugins. Yo sinceramente te recomiendo que lo hagas de la forma que te he explicado anteriormente, ya que es bastante sencillo y siempre vas a tener la seguridad que ese es el dataLayer de tu página sin temer a que la extensión que estés utilizando pueda tener algún fallo puntual.

Además, tras haber probado unas cuantas extensiones del estilo, te aseguro que ninguna me ha resultado tan sencilla como revisar el dataLayer directamente desde la consola del navegador.

Conclusión

Bueno, espero que te haya resultado útil y lo que queda ahora es que lo pongas en práctica y empieces a sacarle partido. Si ya tienes Google Analytics añade nuevas dimensiones o si estás utilizando los píxeles de Facebook, añádele más información!

Por si todavía no lo has revisado, estas tres entradas seguro te van a ser de gran utilidad si quieres optimizar tu página web y tus campañas:

• Tutorial de Google Analytics
• ¿Qué es Google Tag Manager?
• ¿Qué es Google Optimize?