El Data layer

Hace bastante tiempo que todo el mundo está hablando de Sistemas de Gestión de Etiquetas (TMS). Hace unos días en un Conversion Thursday tuve la oportunidad de hablar sobre diferentes TMS como Open Tag Manager de Qubit (OTM), Dynamic Tag Manager (DTM), Tealium y como no Google Tag Manager (GTM) incluida su nueva versión. A grandes rasgos podemos decir que todos hacen lo mismo (cojamos esta frase con muchas pinzas). Tenemos unas reglas que se utilizan para disparar unos tags y tanto las reglas como los tags, los podemos alimentar con ciertas variables que podemos recoger de diferentes lugares como la URL o el data layer.

 

Qué es el data layer

Lo primero que tenemos que tener en cuenta es que el data layer no deja de ser un array Javascript con variables que nos aportan información extra que no podemos recoger del propio site. Tenemos diferentes formatos y diferentes nombres según el TMS que estemos utilizando, pero siempre es lo mismo. En palabras no técnicas podríamos llegar a decir que un data layer es como una caja, podemos guardar todo lo que necesitemos para, posteriormente, poder utilizarlo en nuestros tags.

Captura de pantalla 2014-11-03 22.23.43

 

 

Dónde colocamos el data layer

Por regla general y siguiendo las directrices que establece Google, el data layer debe ir justo después de la apertura del <body>. Aunque es verdad que si somos capaces de definirlo antes, se podría pintar en el <head> lo que si es IMPRESCINDIBLE  es que aparezca primero el data layer y después el código de GTM

 

GTM

En Google Tag Manager, la variable que utilizamos para definir nuestro data layer es “dataLayer” (qué casualidad). ¿Cuál es el formato que debe tener esta variable? A continuación vamos a ver diferentes ejemplos posibles.


//Ejemplo 1
<script>
dataLayer = [];
</script>

//Ejemplo 2
<script>
dataLayer = [{
 'pagina': 'Post sobre data layer',
 'dominio': 'www.kpisland.com',
 'autor': 'Hector Ferrer'
 }];
</script>

//Ejemplo 3
<script>
dataLayer = [{
 "version": "1.0",
 "page": {
 "name": "El datalayer",
 "idioma": "ES"
 },
"post": {
 "tematica": "Google Tag Manager",
 "tag": "TMS"
 },
 "user": {
 "tipo": "Lector",
 "login": ""
 }
}];
</script>

Cómo utilizamos la variables del dataLayer en GTM

En GTM, para poder utilizar una variable del dataLayer, tenemos que hacerlo desde las “macros”.

El primer paso es crear una nueva macro. Desde el menú “Overview” -> “New” -> “Macro”. Cuando vamos a crear una nueva macro, la recomendación es darle un valor que sea bastante descriptivo. Puede que sea una manía, pero generalmente, yo suelo darle 3 valores a los nombre de las macros; quién la está creando, qué tipo de macro y una breve descripción. Cuando ya hemos escrito el nombre de nuestra macro tenemos que especificar el tipo, en este caso “Macro type” = “Data Layer Variable”.
En “Data Layer Variable Name” tenemos que escribir el nombre tal cual lo hemos definido en nuestro objeto dataLayer.
Si revisamos el código que hemos escrito anteriormente con dos ejemplos, si la variable forma parte de un grupo utilizaremos un punto para separar el nombre del padre del del hijo, si es como el ejemplo 2, simplemente pondremos el nombre de la variable.
ejemplo macro datalayer

 

Data layer dinámico

Antes de empezar a describir el “Data Layer dinámico” quiero que quede clara una cosa. Este termino no es del todo cierto, todo data layer es dinámico ya que cada página de nuestro site puede ir cambiando los valores de sus variables. En este punto, con “data layer dinámico” me refiero a todo aquello que puede suceder después de haber definido ya el data layer y que necesita de una interacción externa al site (que pasen X segundos, que se haga scroll, que se haga un click, etc).

Para representar un data layer dinámico tenemos que utilizar el “dataLayer.push()”. Vamos a ver algunos posibles ejemplos


//Ejemplo de dataLayer dinamico

<script>
dataLayer.push({
'event': 'interaccion',
'eventCategory': 'click',
'eventAction': 'enlace',
'eventLabel': 'www.kpisland.com'
});
</script>

Este es un ejemplo muy básico. En él podemos ver que estamos definiendo 4 variables; event, eventCategory, eventAction, eventLabel. Estas variables, las utilizaremos después para, por ejemplo, disparar un evento de Google Analytics. Donde, el valor de “event” será el que usaremos como regla para disparar el Tag y las otras 3 variables “eventCategory”, “eventAction” y “eventLabel” serán las que utilizaremos para informar los valores Category, Action y Label de un evento de Google Analytics.

regla evento

Regla para disparar evento

 

Evento con valores del dataLayer

Evento con valores del dataLayer

 

Tenéis en este post del blog de Mónica (@nikalytics) y David (@thyng) algunos ejemplos de cómo utilizar los eventos en Google Tag Manager.

Hay mucha información en Internet sobre el data Layer de GTM. Simplemente podemos hacer una búsqueda y tendremos montones de resultados muy interesantes. Como referencias a resaltar no podéis dejar de leeros la documentación oficial de Google Developers, los posts relacionados con data layer de Simo Ahava o la “super guía” en el blog de Optimize Smart. Por otro lado, si usáis WordPress y no tenéis acceso al código por diferentes motivos, un Plugin muy recomendable es “Google Tag Manager Plugin for WordPress“.