Analítica y Tecnología Tecnología-Labs

La importancia del Data Layer en tu web

La importancia del Data Layer.
Escrito por Dani Robledillo

En un ecommerce, tener el control total sobre todo lo que ocurre en la página web es imprescindible para poder actuar correctamente. Gracias al Data Layer, podemos saber todo lo que ocurre en nuestra web y podemos implementarlo en Analytics a través de Tag Manager.

¿Qué es un Data Layer?

Para entender rápidamente qué es un Data Layer diremos que es un trozo de código que le envía a Google Tag Manager cierta información de nuestra web que de otra forma no podría obtener.

Es decir, un Data Layer es una capa de datos que sirve como conexión entre nuestra web y Google Tag Manager.

¿Qué tipos de Data Layer hay?

Podemos diferenciar dos tipos de Data Layer según su funcionamiento:

  • Estático:  La forma en la que los datos son guardados se realiza estáticamente, es decir, los valores del Data Layer son siempre fijos. Si por ejemplo el valor de una transacción va a ser siempre la misma, añadimos el valor manualmente.


<script>
dataLayer = [{
'pagina': 'inicio',
'navegador': 'chrome'
}];
</script>

  • Dinámico:  Esta es la forma más común, consiste en guardar los datos dentro del Data Layer de manera dinámica. Por ejemplo, podríamos usar el mismo Data Layer para todos nuestros productos, pero cada variable seria dinámica en función del producto que estemos viendo.


<script>
dataLayer = [{
'pagina': <?php echo $pagina_actual ?>,
'navegador': <?php echo $navegador_usuario ?>
}];
</script>

El ejemplo anterior está pensado para variables en PHP donde cada variable es diferente en cada página que visitemos. Si vemos el código fuente en el momento de visitar una de nuestras páginas, veremos un data Layer con el aspecto del primer ejemplo pero con diferentes valores.

Estructura de un Data Layer

Un Data Layer no es más que un objeto de JavaScript, con la diferencia de que Tag Manager lo puede reconocer y trabajar con él.

Es importante recalcar que el Data Layer debe estar incluido siempre ENCIMA de nuestro código de Tag Manager.

Este es un ejemplo de un Data Layer básico:

<script>
dataLayer = [{
'pagina': 'pagina_actual',
'navegador': 'navegador_usuario'
}];
</script>
<!-- Google Tag Manager -->
//Aquí iría nuestro código de Tag Manager
<!-- End Google Tag Manager -->

El ejemplo indicado simplemente guarda variables, pero no lanza eventos para poder usarlos en determinados momentos, para ello hay que hacer uso de la función push.

Podemos tener un Data Layer generado con valores estáticos y hacer uso de la función push para reenviar nuestro Data Layer con valores diferentes.

<script>
dataLayer =[]; //Inicializo el data Layer dataLayer.push({
'pagina': 'inicio',
'navegador': 'chrome',
'event': 'paginaVista'
});
</script><!-- Google Tag Manager -->
//Aquí iría nuestro código de Tag Manager
<!-- End Google Tag Manager -->

En el ejemplo anterior, Tag manager reconocerá un evento nuevo llamado paginaVista y de esa forma podrá actuar cuando ese evento se dispare.

En la documentación de Google Developers podéis encontrar más información acerca de la estructura del Data Layer.

¿Cómo implementamos un Data Layer?

Para poder implementar nuestro Data Layer necesitamos incluirlo directamente en el código, por lo que necesitaremos ciertos conocimientos a la hora de desarrollarlo. Si tenemos una web construida sin CMS, la implementación será algo más complicada pero mucho más personalizable y con un control total. Por el contrario, si disponemos de un CMS (wordpress, prestashop…) deberemos aplicar módulos que  lo incluyan.

El único problema de utilizarlo en un CMS es que los módulos que utilicemos añadirán el Data Layer pero no será modificable por lo que si queremos añadir más información deberemos entrar al código de la web.

La mayoría de módulos se centran en Data Layers para Enhanced Ecommerce, por lo que nos resuelve de manera rápida y eficaz la configuración de nuestro Enhanced Ecommerce.

Si no disponemos de CMS, deberemos incluirlo manualmente en el código, aunque pueda parecer complicado, una vez lo tenemos bien configurado vamos a disponer de toda la información que queramos de nuestra web dentro de Tag Manager.

En la web de desarrolladores de Google nos explican cómo configurar Tag Manager con Data Layer para realizar la configuración de Enhanced Ecommerce.

Una vez tengamos nuestro data Layer implementado, deberemos obtener la información dentro de nuestro Tag manager. Para ello, hay que crear variables de capa de datos.

Creación Variable Data Layer

Creación Variable Tag manager

En el paso siguiente deberemos indicar el nombre de la variable de nuestro data Layer.

Creación Variable Data Layer 2

 

Acabamos de crear una variable en Tag Manager que contiene la variable página de nuestro Data Layer. Ahora, para utilizar esta variable, simplemente deberemos llamar a la variable entre corchetes dentro de los tags que queramos implementar.

En nuestro caso sería: {{Ejemplo Data Layer Value}}

Utilizar variables de capa de datos

¿Y qué puedo hacer con la información que envía a Tag Manager?

Con un Data Layer y Google Tag Manager vamos a poder utilizar toda la información extra que recibimos y aplicarla a diferentes Tags. La configuración por excelencia que deberíamos implementar es el comercio mejorado de Google Analytics (Enhanced Ecommerce).

Vamos a ver el funcionamiento del evento ProductView para Analytics Enhanced Ecommerce:

  1. El usuario accede a diferentes productos dentro de nuestra web.
  2. En cada web de producto que visita tenemos un Data Layer que contiene información del producto visitado (nombre, precio, descuento…).
  3. Google Tag Manager recibe la información y genera un evento para Google Analytics con la información del producto visitado en cada momento.
  4. En Google Analytics podemos observar todos los productos visitados en nuestra web.

Este es un ejemplo de lo que podríamos hacer, también podemos ver que productos se añaden al carrito o se eliminan, que productos ha comprado cada usuario, etc. Como veis, las posibilidades que nos ofrece el Data Layer son múltiples.

 

Todavía no hay valoraciones

¿Te ha gustado este artículo?

Deja un comentario

La importancia del Data Layer en tu web

by Dani Robledillo time to read: 5 min
0