¿Qué es y cómo implementar una capa de datos en Google Tag Manager?

Comparte este artículo

Google Tag Manager es un sistema de gestión de etiquetas que permite añadir diferentes códigos de seguimiento y pequeños fragmentos de código a un sitio web o una aplicación móvil de forma rápida y sencilla.

Para recibir información del sitio web, Google Tag Manager utiliza una capa de datos o dataLayer. ¿Quieres saber que es y como aprovechar sus ventajas? ¡Sigue leyendo para descubrirlo!

Contenidos

¿Qué es la capa de datos o dataLayer de Google Tag Manager?

Una capa de datos o dataLayer es un objeto JavaScript que se encarga de almacenar información y enviarla desde el sitio web al contenedor de Tag Manager.

La información recibida en el dataLayer puede ser utilizada para elaborar variables o habilitar activadores para las etiquetas gestionadas en Tag Manager.

Es importante saber que, al insertar el fragmento de código del contenedor de Google Tag Manager, la propia herramienta crea una capa de datos. Así pues, cuando se trabaja con un dataLayer, este no es generado desde cero sino que se le añade información adicional al que ya existe.

¿Cómo implementar una capa de datos correctamente?

La capa de datos puede enviar tanto eventos como variables a Google Tag Manager. El fragmento de código quedaría de la siguiente manera para dichas situaciones:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'nombre_evento'
 'variable': 'valor'
});
</script>

Para utilizar el evento generado en la capa de datos, será necesario usar un activador de tipo evento personalizado y asignarle el mismo nombre que el usado en el dataLayer, “nombre_evento” en el ejemplo anterior. Es posible hacer uso de una expresión regular al crear el activador de evento personalizado.

Activador de evento personalizado en Tag Manager

En el caso de las variables, hay que definir una nueva variable, que recibe el nombre de variable de capa de datos en Tag Manager. Al configurar la variable, habrá que asignarle el mismo nombre que se ha usado en el dataLayer, “variable” en nuestro caso. Al crear una variable de capa de datos también es posible asignar un valor por defecto a la variable creada.

Variable de capa de datos de Google Tag Manager

En el caso en que la variable de la capa de datos se encuentre anidada, será necesario añadir los niveles previos con un punto. Si la variable usa un array, habrá que incluir también el número índice del ítem al que se desea acceder. No hay que olvidar que en JavaScript el índice empieza por 0.

Saca el máximo rendimiento a Tag Manager gracias a una capa de datos

Como ya he comentado antes, al insertar Google Tag Manager en el código de tu sitio web se genera una capa de datos que envía una gran cantidad de información a la herramienta. Para determinados usos y situaciones, dicha cantidad de información puede ser suficiente para satisfacer las necesidades analíticas del sitio.

No obstante, en muchas ocasiones es necesario añadir eventos o variables personalizadas para lograr medir determinados aspectos del sitio web. En estos casos, es preciso enviar información adicional a través del dataLayer para que sea recibida por Tag Manager y otras herramientas, como Google Analytics, Google Ads o Facebook.

¿En qué situaciones puede ser necesario implementar un dataLayer?

Ya he explicado que una capa de datos o dataLayer se utiliza para enviar información adicional, pero ¿en qué situaciones puedes necesitar información adicional? Te dejo a continuación algunos ejemplos:

Un formulario de suscripción a la newsletter que no se trackear con las opciones por defecto de Google Tag Manager. En este caso se podría implementar una capa de datos que se lance cuando el usuario se ha suscrito correctamente a la newsletter:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'nueva_suscripcion'
});
</script>

Si tu sitio web genera contenidos, podría ser útil agrupar dichos contenidos utilizando diferentes aspectos, como el autor, la categoría o el tipo de contenido, para analizar fácilmente en Analytics cuales funcionan mejor:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 
 'autor': 'Raúl Revuelta',
 'categoria': 'Analítica Digital',
 'tipo': 'post'
});
</script>

Otro uso muy común es la medición del comercio electrónico en Google Analytics. Es posible implementar una capa de datos en cada producto con información sobre este, las visualizaciones o impresiones y las compras. El siguiente código se utilizaría en la medición de una compra en Analytics 4:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "X00000",
      affiliation: "Online Store",
      value: "35.60",
      tax: "7.48",
      shipping: "4.99",
      currency: "EUR",
      coupon: "OFERTA_VERANO",
      items: [{
        item_name: "Camiseta Nike deportiva",
        item_id: "12345",
        price: "17.95",
        item_brand: "Nike",
        item_category: "Deporte",
        item_variant: "Azul",
        quantity: 1
      }, {
        item_name: "Calcetines Nike",
        item_id: "48572",
        price: "5.18",
        item_brand: "Nike",
        item_category: "Calcetines",
        item_variant: "Blanco",
        quantity: 1
      }]
  }
});
</script>

En definitiva, añadir información a la capa de datos de Google Tag Manager nos da una mayor flexibilidad a la hora de medir lo que ocurre en nuestro sitio web, puesto que no nos limitaremos al uso de las variables predeterminadas que ofrece la herramienta.

Por último, recuerda que Google cuenta con una guía para desarrolladores en la que ofrece una gran cantidad información para ayudar a los desarrolladores a implementar un dataLayer en el sitio web.

Comparte este artículo