Si te suena el término Data Layer pero no estás seguro de qué es o cómo utilizarlo, esta entrada va de esto. En este artículo, te explicaremos todo lo que necesitas saber sobre esta «capa de datos», los diferentes tipos que existen y los pasos que debes seguir para implementarlo en tu sitio web y aprovechar al máximo la valiosa información que puede proporcionarte. ¡Sigue leyendo!
Contenidos
¿Qué es un Data Layer?
El Data Layer, o capa de datos en español, es una estructura de datos en forma de código que se utiliza para almacenar, procesar y compartir información entre una página web (o cualquier otro contexto digital) y otras aplicaciones que estén vinculadas a ella. En el caso de Google, el Data Layer envía información específica de nuestro sitio web a Google Tag Manager, que la utiliza para almacenar, procesar y transmitir datos entre la página web y la solución de administración de etiquetas. En resumen, el Data Layer actúa como una conexión fundamental entre nuestra web y Google Tag Manager.
Los Data Layers ¿Quién los usa?
Es una solución técnica que resulta útil para diversos profesionales del ámbito digital, incluyendo:
- Analistas (para la recogida y posterior curación de datos)
- Especialistas en marketing (para mejorar el rendimiento de canales)
- Diseñadores web y UX (para mejorar la navegación)
- Ejecutivos de venta (para aumentar el rendimiento comercial)
- Profesionales con un componente digital alto (para trackear el rastro de los usuarios)
En el sector de la analítica, el Data Layer es una herramienta que debería ser empleada para alcanzar los objetivos comerciales a través de la recolección de datos y la analítica.
Tipos de Data Layer
Existen dos tipos principales de Data Layer, que difieren en su funcionamiento:
1. Data Layer estático
En este tipo, los datos se guardan de manera estática, lo que significa que los valores son fijos. Por ejemplo, si el valor de una transacción siempre es el mismo, simplemente agregamos ese valor manualmente al Data Layer.
Un código para un Data Layer estático sería:
<script>
dataLayer = [{
‘pagina’: ‘inicio’,
‘navegador’: ‘chrome’
}];
</script>
2. Data Layer dinámico
El Data Layer dinámico es más común y permite guardar datos de manera dinámica. Por ejemplo, podríamos utilizar el mismo Data Layer para todos nuestros productos, pero cada variable sería dinámica en función del producto que se esté visualizando.
Un ejemplo de código para un Data Layer dinámico utilizando variables en PHP sería:
<script>
dataLayer = [{
‘pagina’: ‘<?php echo $pagina_actual; ?>’,
‘navegador’: ‘<?php echo $navegador_usuario; ?>’
}];
</script>
Es importante destacar que el Data Layer debe estar siempre ubicado ANTES del código de Google Tag Manager en tu página web.
Estructura de un Data Layer
Un Data Layer no es más que un objeto de JavaScript, pero con la particularidad de que Google Tag Manager puede reconocerlo y trabajar con él. Veamos un ejemplo básico de cómo es la estructura de un Data Layer:
<script>
dataLayer = [{
‘pagina’: ‘pagina_actual’,
‘navegador’: ‘navegador_usuario’
}];
</script>
<!– Inicio: Google Tag Manager –>
// Aquí iría nuestro código de Tag Manager
<!– Fin: Google Tag Manager –>
En este ejemplo, se guardan variables, pero no se lanzan eventos para utilizarlos en momentos específicos. Para lograr eso, es necesario utilizar la función push. Por ejemplo:
<script>
dataLayer = [];
dataLayer.push({
‘pagina’: ‘inicio’,
‘navegador’: ‘chrome’,
‘event’: ‘paginaVista’
});
</script>
<!– Inicio: Google Tag Manager –>
// Aquí iría nuestro código de Tag Manager
<!– Fin: Google Tag Manager –>
En este caso, Google Tag Manager reconocerá un nuevo evento llamado «paginaVista» y podrá realizar acciones cuando ese evento se dispare.
Si deseas obtener más información sobre la estructura de la capa de datos, puedes consultar la documentación de Google Developers.
¿Cómo implementar un Data Layer?
La implementación varía según la forma en que esté construido tu sitio web. A continuación, se presentan dos posibles escenarios:
1. Sitio web sin CMS
Si tu sitio web no utiliza un sistema de gestión de contenido (CMS), la implementación puede ser más compleja pero también más personalizable, brindándote un mayor control. En este caso, debes incluir manualmente el código del Data Layer en tu página web. Si tienes conocimientos de desarrollo web, esto te permitirá una mayor flexibilidad y personalización.
2. Sitio web con CMS
Si utilizas un CMS como WordPress o PrestaShop, deberás utilizar módulos o plugins que te permitan incluir el Data Layer en tu sitio web. Estos módulos suelen estar diseñados para integraciones específicas, como el comercio electrónico mejorado (Enhanced Ecommerce). Aunque los módulos facilitan la configuración inicial, es posible que no sean totalmente personalizables. Si deseas agregar información adicional, es posible que debas acceder al código fuente de tu sitio web.
Una vez que hayas implementado correctamente tu Data Layer, deberás configurar Tag Manager para utilizar la información que envía. Para ello, debes crear variables de capa de datos en Tag Manager y asignarles el nombre correspondiente de la variable.
La extensión de Data Layer se llama GTM4WP. La puedes buscar dentro de WordPress o haciendo clic en este enlace.
Una vez descargado el plugin lo tienes que configurar de esta manera:
Dentro de la configuración del plugin, en el apartado General:
- Tienes que añadir tu ID de Google Tag Manager en el recuadro.
- En el Container code ON/OFF seleccionamos Off
- En Container code compatibility seleccionamos Off
- Save changes
Una vez terminado con la configuración de la pestaña «General», vamos al apartado de «Integration» y seleccionamos el segundo cuadro: Track Enhanced e-commerce (en referencia al antiguo plugin de Analytics UA). Cuando lo hayas seleccionado, procede a guardar cambios con el botón «Save changes«.
Ahora, tenemos que seguir con la configuración del contenedor de etiquetas de Google Tag Manager. Para que funcione correctamente, debemos agregar una nueva variable. Para ello haz clic en la barra lateral de la izquierda: Variables y añade una nueva con el botón «Nueva«.
Una vez creada la nueva variable, le agregamos un nombre (p.e. capa de datos eCommerce) y escogemos la variable de página «Variable de capa de datos«
Dentro de la ventana de Configuración de la variable tenemos que poner el nombre como lo hemos puesto en el código. Después, deja el valor predeterminado que te sale en la versión de la capa de datos: Versión 1, 2 o la que corresponda.
Una vez configurados todas las variables te debería quedar algo así:
Una vez terminada la integración, hay que enviar el contenedor y publicarlo para que los cambios sean efectivos, y se conecte con la web y Google Analytics.
¿Qué se puede hacer con la información enviada a Tag Manager?
Gracias al Data Layer y a Google Tag Manager, podrás utilizar la información adicional que recibas y aplicarla a diferentes etiquetas. Una de las configuraciones más populares es la del comercio electrónico mejorado de Google Analytics (antes Enhanced Ecommerce, que ahora hay que trasladar a los flujos de Google Analytics 4), que te permite realizar un seguimiento detallado de tus productos y transacciones. Por ejemplo, puedes realizar un seguimiento de los productos vistos, los productos agregados al carrito, las compras realizadas por cada usuario, entre otros. Ahora puedes elegir los datos que necesitas para que tus tecnologías funcionen correctamente. Si falta algún dato, simplemente agrégalo.
Beneficios de implementar un Data Layer
Como has podido ver a lo largo de este artículo, el Data Layer ofrece múltiples posibilidades y beneficios. Algunas de las ventajas son:
- Permite integraciones con tecnologías de terceros.
- Mejora la recopilación de información de manera consistente y eficiente.
- Facilita la gestión centralizada de valores (etiquetas), lo que simplifica los cambios.
- Prepara tu sitio web para futuras integraciones tecnológicas.
Tener todos los datos de tu negocio centralizados es fundamental para tomar decisiones informadas basadas en análisis reales en lugar de suposiciones.
Implantar tus Data Layer para tu web o eCommerce
Si necesitas ayuda para configurar tu Data Layer, no dudes en ponerte en contacto con nosotros. Además, si deseas obtener más información sobre cómo configurar la analítica web, te invitamos a consultar nuestro artículo relacionado.
o