¿Qué es el Data Layer? Una explicación sencilla

Esta será una explicación sencilla y breve del data layer (capa de datos en español) y el dataLayer que siempre se escucha cuando se habla de Google Tag Manager.

Photo by Artem Sapegin on Unsplash

Cuando estamos aprendiendo a usar Google Tag Manager, vemos este concepto por todos lados y puede llegar a confundir mucho. ¿Es algo que solo deben ver los programadores? ¿Debo saber cómo funciona?. Trataré de explicar las dos partes de la ecuación

El Data Layer, en su concepto más sencillo y como su nombre lo indica es una capa a la cual le “pasamos” datos de nuestra aplicación, sitio web o lo que estemos midiendo, pueden ser transacciones en nuestro ecommerce, veces que alguien le dio click a un botón o cualquier tipo de dato que queramos medir.

Estos datos después pasan del Data Layer a Google Tag Manager. Para que un Data Layer tenga éxito debe tener dos componentes fundamentales.

Planificación

La primera parte para la implementación del Data Layer, y en general de nuestra estrategia de medición es una buena planificación, la cual nos ayuda a mantenernos organizados.

Debemos responder las siguientes preguntas: ¿Qué datos queremos medir? ¿En qué interacción puedo medir esos datos? Y lo más importante de todo ¿Por qué quiero medir estos datos? ¿Para qué me servirá esta información?

Después de saber qué queremos medir debemos decidir la estructura con la cuál enviaremos los datos así como cuáles serán los nombres de nuestras variables, porque estas variables después se usarán en el código.

Implementación

Data Layer se programa en JavaScript, así que si no te sientes cómodo tocando el código o no sabes cómo implementarlo solicita ayuda de la persona que programó el sitio. La ventaja de usarlo es que no tenemos nuestras variables regadas por todo nuestro código sino que tenemos todo lo más ordenado posible. El dataLayer es un Array de JavaScript donde haremos push de nuestros datos. Es importante siempre hacer push, ya que se trata de un Array

Estructura del dataLayer

Lo primero que debemos hacer es declarar nuestro dataLayer

dataLayer = [];

Entonces si por ejemplo queremos enviar el evento cuando alguien le da click al un botón para abrir un lightbox, el código quedaría de la siguiente manera:

dataLayer.push({
    'event': 'lightbox',
    'eventCategory': 'Lightbox',
    'eventAction': 'abrir_contacto',
    'eventLabel': 'top'
});

Todos los datos que estamos pasando deben estar definidos de antemano en nuestro paso de Planificación, de esta manera la implementación es lo más eficiente.

Buenas prácticas

• Debes asegurarte de que tu dataLayer funcione antes subir tu código a producción, como comenté la vez pasada, siempre es bueno hacer pruebas de nuestra implementación. El modo preview funciona en un ambiente local de desarrollo así que no hay problema.
• No usar como nombre de variable category , action, label sino siempre usar, como en el ejemplo que mostré anteriormente, algún prefijo eventCategory en este caso. Cuando uso solo los nombres por defecto, a veces me da undefined , indicándome que la variable nunca se definió.
• Siempre agregar la llave event a nuestro código, para que un Tag se dispare necesita un Trigger, algo que lo gatille, a veces estos eventos se confunden, algo parecido a lo que mencioné en el punto anterior, pero Google Tag Manager te permite crear Triggers de eventos personalizados, donde puedes especificar el evento y así asegurarte que tu Tag sólo se active de esa manera.

Debugging

A veces nuestro código no esta funcionando, supongamos que nuestro tag se dispara después de que el usuario complete un formulario y hemos salvado los datos del formulario en la base de datos, vemos en el preview que efectivamente el tag se dispara cuando nos llega la confirmación de la base de datos. ¡Felicidad!

Pero cuando abrimos el tag completo a ver si la data se envió vemos undefined

La última vez que me pasó esto fue por lo que comenté en la sección de buenas prácticas, estaba usando category y esto estaba generando conflicto, lo cambié a eventCategory y no hubo problema. Este evento se disparaba cuando completaba un formulario, para evitar tener que llenar el formulario cada vez que revisaba mi Tag, lo moví a un evento click de un elemento cualquiera en la página, así podía modificar el tag, darle click al elemento y revisar automáticamente si el tag pasaba la data.

El dataLayer lo usaremos siempre que queramos enviar datos desde nuestro sitio hacia Tag Manager.

Con eso terminamos por hoy pero en los siguientes artículos empezaré a hacer más uso del dataLayer para medición del sitio.