En esta guía aprenderemos a entender y crear dataLayer de GTM. De esta forma será posible hacer implementaciones de Google Analytics via GTM eficaces y duraderas en el tiempo.
Tener un buen tracking es necesario para poder hacer buenas campañas de marketing de performance y saber perfectamente lo que está generando cada uno de nuestros euros invertidos en marketing y publicidad online.
¿Quieres éxito con tu proyecte online? Ten bajo control las métricas claves para tu e-commerce o sitio en general y ya verás como te esperan delante años de crecimiento ;).
Empezando con lo básico, vamos a contestar a la siguiente pregunta: ¿Qué es un dataLayer?
El dataLayer es usado para almacenar información de diferente tipo.
Por ejemplo, se puede usar para guardar información sobre la página web:
- Título página
- Url de la página
- Categoría de la página
También se puede usar para almacenar informaciones sobre un :
usuario:
- el ID
- fecha de:
- primera inscripción
- nacimiento
- primera compra
- …
producto:
- precio
- categoría
- título
- descuento
…
Toda esta información contenida en el dataLayer es accesible vía Google Tag Manager y se usa para enviar información a Google Analytics, etiquetas de Google Ads, Facebook Ads, twitter Ads o cualquier otra etiqueta de plataformas RTB o compra de medios y tracking en general.
Imaginaros que queréis saber el valor de cada compra generada por vuestras campañas de Google Ads. En este caso se haría saltar la etiqueta de conversión de Google Ads en la página de “gracias”. En ella, si tenemos un dataLayer con la información sobre la transacción, podemos usarla para enviarla por medio de la etiqueta de conversión, a Google Ads.
Ejemplo Código del dataLayer
Técnicamente, el dataLayer es un “contenedor” de variables: un array. Su sintaxis es la siguiente:
<script>
dataLayer = [{
‘pageCategory’: ‘signup’,
‘visitorType’: ‘high-value’
}];
</script>
El array puede ser creando mediante una función:
var a = erraryDeManu();
o con una “literal notation”:
var a =[ ] o bien a = [ ]
En el caso de GTM, la variable array se llama dataLayer, por lo tanto
dataLayer = [ ]
Un array, en el idioma GTM, un “dataLayer”, puede contener variables de diferentes tipos:
Boleana
Numérica
String
Un Objeto
Este último caso es el más interesante y el que nos hace dar una dimensión más realista al
dataLayer de Google Tag Manager.
“Un Objeto” puede contener de forma interna diferentes variables:
var a = [
obj1 ={
“varManu1” : 35 ;
“varManu2” : “castaño” ,
“var Manu3” : “ojos azules”
},
obj2 ={
“varMaru1” : 35 ;
“varMaru2” : “castaña” ,
“var Manu3” : “ojos negros”
}
]
Ahora que sabemos que es un array y “un objeto”, los dataLayers ya no tienen secretos.
Ya tenemos los conocimientos básicos para leer y crear dataLayer como el siguiente:
dataLayer = [{
‘pageCategory’: ‘checkout’,
‘visitorType’: ‘loged’,
‘productCrossSelling’: {‘id’:”09890”, “nombre” : “toy”, “precio” : 20},
‘cestaCompra’: [
{‘id’:”09890”, “nombre” : “toy”, “precio” : 20},
{‘id’:”07790”, “nombre” : “play”, “precio” : 10},
{‘id’:”77777”, “nombre” : “enjoy”, “precio” : 100}
}];
En el que acabamos de enunciar indicamos informaciones acerca del tipo de página, en la variable 1, del usuario en la variable 2, de los productos que tenemos en la cesta de la compra en objeto 4 y el producto que se nos enseña en el lightbox de cross selling en objeto 3.
Lo complicado no es la creación de un dataLayer con variables constantes.
Variables dinámicas e implementación Server Side
Evidentemente, la razón de existir del dataLayer, prácticamente en la totalidad de los casos, es la de almacenar variables dinámicas.
Para poder alimentar nuestras variables dinámicamente es necesaria una implementación server Side.
En este caso necesitarás de un desarrollador o del team de desarrolladores dedicados a tu sitio web.
Una vez recibido el “esqueleto” del dataLayer, los técnicos insertarán script para recuperar la información e imprimirla en el dataLayer.
Ejemplo
Fuente: https://www.optimizesmart.com/google-tag-manager-data-layer-explained-like-never/
Variables dinámica y DOM Scraping
Otra forma de alimentar variables dinámicas es el DOM Scraping. En este caso, se crean pequeñas funciones para buscar elementos en el DOM y alimentar nuestras variables.
Por ejemplo, podemos recoger el H1 de la página y alimentar la variable pageTitle. O podemos coger el precio de una ficha de producto y alimentar la variable productPrice con ella.
Este método, aunque puede parecer más práctico y rápido, puede generar evidentemente problemas de tracking y de pérdida de información a lo largo de tiempo.
De hecho cada modificación del HTML, CSS, JavaScript del sitio web, podría modificar la eficacia de la extracción de datos por medio de lo Scraping.
Por lo tanto, para implementaciones de tracking estables, es muy recomendable usar dataLayers con recuperación de información server Side.
El dataLayer se inicia como un normal script:
<script>
dataLayer [{“nombrePagina” : “El Rincon de Manu”}
</script>
El dataLayer se carga con la página.
En este punto os estaréis preguntando: ¿y si quiero insertar en el dataLayer una variable que dependa de un evento que se realiza después de la carga de la página?
Por ejemplo, si quiero definir una variable “userContactUse” para marcar los usuarios según me hayan ya contactado o no, es necesario cambiar el valor de esta variable en el momento que un usuario me envíe el formulario de contacto.
Osea debería pasar de esta situación:
dataLayer = [{
‘userContactUse’: ‘NO’,
‘visitorType’: ‘loged’,
}];
a esta situación:
dataLayer = [{
‘userContactUse’: ‘SI’,
‘visitorType’: ‘loged’,
}];
Para poder actualizar, o enviar nuevas variables al dataLayer, se usa un método llamado “push”.
Explicación del dataLayer.push de Google Tag Manager
El dataLayer.push permite, una vez lanzado, actualizar la información de una variable, como por ejemplo nuestra “userContactUse”, o crear un variable si la misma no existía.
Para evitar conflictos con scripts que usan los mismos nombres que el dataLayer, es aconsejable usar la siguiente sintaxis:
window.dataLayer.push = ({‘userContactUse’: ‘NO’, ‘visitorType’: ‘loged’});
Incluso es posible cambiar nombre al dataLayer simplemente modificando el código de GTM:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:»;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’Aquí pones el nombre de tu data Layer – ejemplo dataLayerManu‘,’GTM-code’);</script>
<!– End Google Tag Manager →
Esto se hace, por ejemplo, cuando tenemos diferentes GTM y dataLayer implementados. De esta forma podemos distinguir los dataLayer de los diferente tracking.
En tal caso, cuando añadimos el dataLayer usamos el nombre que insertamos en el código de GTM.
dataLayerManu = [{
‘userContactUse’: ‘NO’,
‘visitorType’: ‘loged’,
}];
Finalmente, es muy importante que no haya errores de sintaxis en el dataLayer. De lo contrario, la información no llega a destino dado que el dataLayer no es válido.
Por esta razón os expongo algunos de los casos más comunes de errores:
Caracteres especiales:
var dataLayer = {
‘productId’: ‘1234’,
‘productName’: ‘Xbox One’,
‘productDescription’: ‘This’ll break the data layer’,
‘productBrand’: ‘Microsoft’,
‘productPrice’: 449.99
}
En tal caso, el apóstrofe de this’ ha hecho que el string termine antes del debido.
Evidentemente este dataLayer es incorrecto
Usar variables string come números y viceversa.
Olvidar las comas…
Ahora que eres un masterChef de los dataLayers, ya puedes preparar tu propia receta de tracking 😉
Espero que te haya gustado el post y como siempre y dejo mi moto: ¡más vale un clic en Manu que ciento Volando!
¡Hasta la próxima!
