Guía integral sobre data layer en Google Tag Manager
Escrito por
Uliana Lesiv
Google Tag Manager (GTM) es una excelente herramienta para mejorar el análisis y el seguimiento de páginas web. Y data layer es una de las funciones que permite llevar ese seguimiento al siguiente nivel.
Si se pregunta qué es un datalayer, en Google Tag Manager data layer es un objeto JavaScript que recopila información sobre las interacciones de los usuarios en su página web. Con su ayuda, podrá recopilar prácticamente cualquier dato, desde las visitas a los productos hasta el sistema operativo del usuario. La utilización de data layers en GTM le permite configurar etiquetas y disparadores de seguimiento más específicos, proporcionando una visión más detallada del comportamiento del usuario.
Esta es la razón por la que hemos decidido crear una guía integral sobre data layer que incluirá mucha información sobre su implementación y su uso en Google Tag Manager. Explicaremos qué es data layer, ejemplos prácticos, cómo utilizar data layer en una página web, cómo crear data layer en Tag Manager, cómo comprobar la configuración y cuáles son los errores más comunes a la hora de configurarlo.
¡Empecemos!
¿Qué es data layer en Tag Manager?
Data layer es un objeto JavaScript que se utiliza para transmitir datos a las etiquetas. Permite transferir eventos o variables y establecer disparadores en función de valores específicos de las variables. Data layer se puede utilizar tanto en Google Tag Manager como en gtag.js.
Data layer es un intermediario entre su página web y Google Tag Manager, funcionando como un centro para almacenar los datos estructurados en su contenedor.
Ejemplos prácticos de data layer
Data layer es necesario si desea:
- Configurar un sistema de seguimiento fiable. Sin data layer, los datos se extraen directamente de HTML DOM (es decir, el método estándar que se utiliza para agregar, obtener, modificar o eliminar elementos HTML en una página web) y luego se envían directamente al contenedor de GTM. El problema es que HTML DOM puede sufrir cambios, lo que provoca que los disparadores de las etiquetas no se activen y que se interrumpa la recopilación de datos.
Ese tipo de problema no sucede con data layer, ya que el contenedor de GTM extrae los datos del data layer de la página, que es mucho más estable que HTML DOM. Los datos dejan de registrarse solo si alguien rompe el data layer de la página.
- Enriquecer los datos de las etiquetas en condiciones específicas. Supongamos que usted desea enviar datos sobre el valor del evento de compra solo si el usuario pagó más de 50 $. En lugar de buscar entre variables dispersas, detalles de transacciones, categorías de páginas y otras señales en su página, podrá utilizar data layer con las variables relevantes y sus valores (en este caso, valor de compra > 50 $). Esto garantizará que los datos necesarios sean fácilmente accesibles siempre que las etiquetas los necesiten.
¿Cómo funciona data layer?
Es posible especificar qué datos exactamente desea almacenar en cada capa. Existen dos métodos para crear su data layer y rellenarlo con los parámetros necesarios para llevar a cabo el seguimiento, los cuales revisaremos en la siguiente sección.
GTM lee y toma los valores necesarios de data layer para enviarlos a herramientas de análisis como Google Analytics, Google Ads, Facebook Pixel, etc.
Sintaxis y ejemplos de data layer
En Google Tag Manager, dataLayer es un array, que se indica con "[]", y contiene un objeto, representado por "{}", como se muestra en el siguiente script:
dataLayer = [{}];Los elementos dentro de data layer se conocen como variables y se representan como pares de valores, 'key': 'value' (que se colocan entre "{}").
GTM usa una variable de data layer llamada "event", que también es utilizada por los agentes de escucha de eventos de JavaScript, para activar etiquetas cuando un usuario interactúa con elementos en una página web. Entonces, basándonos en el siguiente ejemplo, 'event' es 'key' y 'register' es 'value'.
dataLayer = [{'event' : 'register' }];Para las variables, la sintaxis es la misma que para los eventos. En el siguiente ejemplo, escogemos el país para el que queremos hacer el seguimiento: 'country' ('variable_name') es 'key' y 'United States' es 'value' ('variable_value').
dataLayer = [{'country' : 'united states' }];Inicialice dataLayer
Existen dos maneras de implementar data layer: con una declaración o con el método push. Vamos a describir cómo se utilizan ambos métodos, pero usted puede ir directamente al que mejor se adapte a sus necesidades.
En resumen, nosotros recomendamos utilizar dataLayer.push, ya que es más popular y se hace cargo de la mayoría de las necesidades. Además, este método es más seguro de usar, ya que no interrumpe los eventos en Google Tag Manager, mientras que una configuración incorrecta de data layer utilizando una declaración puede causar problemas con facilidad.
| Declaración de data layer | dataLayer.push | |
| Funciona mejor con | Valores necesarios antes de que se cargue la página | Inserción de información en dataLayer para eventos distintos al evento de carga de la página |
| Tiempo de inserción de la variable de data layer | Antes del tiempo de ejecución | Durante el tiempo de ejecución |
| Colocación en el código | Sobre el fragmento del contenedor de Google Tag Manager | En cualquier parte del código |
| Vaya a la declaración de Data Layer | Salte a dataLayer.push |
Método 1: Declaración de Data Layer
Para utilizar este método, el fragmento de data layer debe colocarse por encima del fragmento del contenedor de Google Tag Manager. En este caso, data layer se inicializa antes de que se inicialice el Tag Manager.
En general, este no es un método recomendado ni popular para crear data layer, pero le servirá si lo que desea es crear puntos de datos antes de que se cargue el contenedor de GTM y utilizarlos para la gestión de las etiquetas.
Cambie 'variable_name': 'variable_value' por los parámetros necesarios y pegue el código en la página del sitio web antes del fragmento de GTM.
dataLayer = [{
'variable_name': 'variable_value'
}];
...
Nota: Utilice el operador '=' para asignar los valores del objeto al array de dataLayer.
Método 2: dataLayer.push
El método push agrega elementos objeto a data layer de manera dinámica. A diferencia del método de declaración de data layer, con el método push puede colocar el fragmento de data layer en cualquier parte del código.
Puede resultar un poco confuso, pero 'dataLayer' también es una variable de JavaScript a la que puede acceder cualquier función que interactúe con el objeto window. Así que, para evitar conflictos con cualquier otro array local de JavaScript llamado 'dataLayer', lo mejor es usar el prefijo 'window.dataLayer'.
Por lo tanto, usted necesitará usar el siguiente código para el método dataLayer.push. En lugar de 'variable_name' : 'variable_value', agregue los parámetros necesarios.
window.datalayer = window.dataLayer || [];
window.dataLayer.push({
'variable_name' : 'variable_value'
});En el bloque de código anterior, dataLayer se establece en un dataLayer ya existente, en caso de que ya exista uno; de lo contrario, se crea un nuevo dataLayer como un array vacío. El operador (OR) || garantiza que la asignación se lleve a cabo si se cumple alguna de estas condiciones.
De esta manera, se evitará crear múltiples declaraciones, lo que podría sobrescribir dataLayer.
Ejemplo y documentación sobre la capa de datos de comercio electrónico
Muchos CMS de comercio electrónico cuentan con plugins (incluidos los de Stape) que permiten crear una capa de datos para eventos estándar de comercio electrónico. En algunos casos, esto puede no ser suficiente. Por ejemplo, si se necesitan eventos o datos adicionales en la capa de datos, o si se utiliza una plataforma totalmente personalizada.
En este caso, debe contactar a sus desarrolladores para crear eventos de la capa de datos con la carga útil necesaria. Esta suele ser una tarea bastante sencilla para los desarrolladores y no lleva mucho tiempo, aunque depende de la arquitectura de su sitio o plataforma.
| A continuación se muestra un ejemplo de dicha documentación para desarrolladores que puede copiar, editar según sus necesidades y pasarles a sus desarrolladores. |
Algunas pautas útiles:
- Haga una copia del documento, elimine los eventos que no necesita y/o agregue los eventos que necesita y una muestra de la carga útil.
- Utilice el mismo formato de datos en todos los eventos. Se recomienda seguir el formato GA4.
- Si no se trata de un evento obvio (por ejemplo, ver un artículo o añadirlo al carrito), describa con detalle cuándo debería activarse. Esto evitará discusiones innecesarias entre usted y los desarrolladores.
- Los datos del usuario se pueden utilizar en prácticamente todas las plataformas de marketing, es importante que estén disponibles en la capa de datos: su uso mejorará en gran medida los resultados de seguimiento.
- Intente evitar los eventos de la capa de datos que se envían antes de que el usuario sea redirigido a otra página. Esto puede provocar la pérdida de datos, ya que los eventos podrían no enviarse antes de la redirección. Por ejemplo, si desea enviar un evento "Lista" después de que un usuario envíe un formulario y este sea redirigido a la página de agradecimiento, se recomienda enviar este evento en la capa de datos de la página de agradecimiento, en lugar de cuando el usuario envía el formulario.
- Si ya tiene eventos de la capa de datos en su sitio, es mejor usar nombres personalizados para los nuevos eventos y no modificar los antiguos para no afectar el seguimiento. Es decir, si ya tiene, por ejemplo, `add_to_cart` en la capa de datos, es mejor crear un nuevo evento `add_to_cart_v2` en lugar de cambiar el antiguo y luego reconfigurar las etiquetas para los nuevos eventos.
- Asegúrese de revisar la capa de datos después de que los desarrolladores la hayan implementado. A veces, incluso pequeños errores en la carga útil pueden causar problemas de seguimiento.
¿Cómo crear una capa de Data layer en Tag Manager?
Existen distintas maneras de acceder a los elementos del array de data layer en Google Tag Manager. Para aprovechar los datos dentro de Google Tag Manager, asígnelos a una variable o utilícelos como un disparador de eventos. Estas variables o eventos pueden incorporarse luego a sus etiquetas, disparadores u otras variables.
A continuación, vamos a analizar tres casos prácticos de data layer y su configuración en GTM:
Caso práctico 1: Variables de data layer como puntos de datos
Ejemplo de código
Vamos a escoger el valor de compra de camisetas naranjas para nuestro ejemplo.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘product_name’ : ‘orange t-shirt’,
'purchase_value' : '5',
‘purchase_currency’ : ‘EUR’
});Configuración de GTM
- 1.Para configurar la variable, en el contenedor de GTM, vaya a Variables → haga clic en "Nuevo" en las Variables definidas por el usuario.
2. Elija "Variable de Data Layer" como tipo de variable.
3. Agregue el nombre de la variable de Data Layer y haga clic en "Guardar".
Nota: El campo distingue entre mayúsculas y minúsculas, así que asegúrese de que el nombre coincida con el nombre del valor en el código que agregó a la página. En este caso, es "purchase_value".
Caso práctico 2: Data layer para disparar eventos
Ejemplo de código
Como ejemplo de código, vamos a tomar la variable de dataLayer que activa el evento "register" cuando una persona rellena los datos necesarios para registrarse y hace clic en "Registrar".
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'register'
});Configuración de GTM
1. Vaya a Google Tag Manager, luego a Disparadores → haga clic en "Nuevo".
2. Elija el tipo de disparador "Evento personalizado".
3. En "Nombre del evento", añada el nombre de la misma manera que se añadió el nombre del valor en el código, ya que este campo distingue entre mayúsculas y minúsculas. Haga clic en "Guardar".
Caso práctico 3: Variable de data layer como disparadores y variables de eventos
Ejemplo de código
El siguiente ejemplo de variable de data layer dispara eventos de compra y crea la información sobre la compra.
dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];Configuración de GTM
Puede usar variables del código como disparadores o como variables de eventos en Google Tag Manager. Revise el proceso de configuración de los pasos anteriores para variables y eventos.
¿Existe data layer en el lado del servidor de GTM?
Data layer no existe en Google Tag Manager del lado del servidor como lo hace en GTM del lado del cliente.
Sin embargo, GTM tiene un objeto llamado Cliente que verifica las solicitudes HTTP a través de la página de GTM. Si la solicitud contiene datos específicos, el objeto Cliente transforma esos datos de la solicitud en datos de evento. Las etiquetas también se utilizan para enviar los datos desde el contenedor web de GTM al servidor de GTM.
Para rellenar los puntos de datos del contenedor GTM del lado del servidor, debe elegir el método que utilizará para enviar los datos desde la web al servidor GTM. Entre los métodos más populares se encuentran los siguientes:
Utilice Google Analytics 4
Este método es especialmente eficaz si está configurando el seguimiento para Google Ads o Floodlight del lado del servidor, ya que ambos dependen únicamente de las etiquetas de GA4.
1. En GTM web, cree una etiqueta con la configuración "Google Analytics: evento GA4".
2. Encontrará campos predefinidos para estos datos y podrá asignar variables de data layer a cada parámetro de manera individual.
Utilice la etiqueta de datos/datos de cliente
La principal ventaja de usar la etiqueta de datos/datos de cliente es que envía automáticamente data layer y otros datos comunes desde la web al servidor GTM.
1. Cree una nueva etiqueta en el contenedor web de GTM y elija "Etiqueta de datos" como configuración de la etiqueta.
Nota: Necesitará añadir la Data Client a la galería de GTM.
2. En la configuración de etiquetas, habilite las dos casillas "Enviar datos comunes" y "Enviar todo desde DataLayer".
El sistema analizará automáticamente los datos en GTM web y enviará toda la información disponible al servidor de GTM.
| Eche un vistazo a nuestro blog sobre cómo crear data layer en el lado del servidor de Google Tag Manager para obtener más información sobre el proceso de configuración. |
Envíe variables de data layer a Google Analytics 4
Nota: A continuación, describimos cómo configurar Google Tag para enviar datos. Si ya ha configurado Google Tag, no es necesario crear una nueva etiqueta. Simplemente omita los siguientes pasos y pase directamente a la sección sobre cómo crear una dimensión personalizada.
En este caso, solo necesita añadir los parámetros en la sección "Configuración de eventos compartidos", como con el código de data layer.
Configurar Google Tag en GTM
1. En la sección "Etiquetas" de GTM, haga clic en "Nueva" y escoja "Google Tag" como el tipo de etiqueta.
2. Agregue su ID de medición de GA4 y, en la sección "Configuración de eventos compartidos", enumere los parámetros que añadió a su código.
3. Como disparador, elija "Page View – All Pages".
Cree una dimensión personalizada en GA4
Existe una lista de parámetros estándar. Si los datos que deseas rastrear con la ayuda de data layer no están presentes en los eventos recomendados de Google Analytics, deberá añadirlos manualmente en su cuenta de GA4 como dimensiones personalizadas. Después de añadirlos, aparecerán en los informes de GA4.
1. En la cuenta de Google Analytics, haga clic en "Administración" → "Definiciones personalizadas".
2. Haga clic en "Crear dimensión personalizada" e introduzca el parámetro requerido:
- Nombre de la dimensión: El nombre que desea que aparezca en los informes.
- Ámbito de aplicación: Elija un evento, un usuario o un elemento.
- Parámetro del evento: Agregue el nombre de la variable o del evento según lo especificado en el fragmento de data layer (tenga en cuenta que en este campo se distingue entre mayúsculas y minúsculas).
Haga clic en "Guardar".
Compruebe la configuración de data layer
GTM Debug Mode
Para comprobar si Google Tag Manager detecta la variable, debe seguir unos sencillos pasos que son similares a la depuración habitual en GTM.
1. Haga clic en "Vista previa" y añada la URL de la página web que está depurando.
2. Cambie a la pestaña "Variable" y, si todo funciona correctamente, verá los datos necesarios en esta pestaña.
Si tiene problemas con Debug Mode en GTM, consulte nuestras guías:
Google Analytics 4
Para comprobar si Google Analytics está capturando los datos, vaya a "Administración" → DebugView.
Solución de problemas de data layer
Problema 1: La inserción de data layer no funciona
Si observa que las variables o eventos no se insertan correctamente, es probable que no esté utilizando la capitalización adecuada para los nombres de los objetos o que haya omitido las comillas.
Solución: use la capitalización correcta para los nombres de los objetos y asegúrese de incluir las comillas donde corresponda.
- Compruebe que "dataLayer" esté en CamelCase.
Correcto:
dataLayer.push({'variable_name': 'variable_value'});Incorrecto:
datalayer.push({'variable_name': 'variable_value'});- Asegúrese de que todos los nombres de las variables estén entre comillas.
Correcto:
dataLayer.push({'variable_name': 'variable_value'});Incorrecto:
dataLayer.push({variable_name': 'variable_value'});Problema 2: Las etiquetas no se activan
Si no puede activar las etiquetas en todas las ubicaciones necesarias de la página web, verifique los nombres de las variables en las diferentes páginas.
Solución: nombres de variables consistentes
El error más frecuente es la inconsistencia en el uso de mayúsculas y minúsculas en los nombres de las variables en las distintas páginas, por lo que es necesario revisar los nombres.
Correcto:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable_name': 'variable_value'});Incorrecto:
// Homepage:
dataLayer.push({'variable_name': 'variable_value'});
// Product page:
dataLayer.push({'variable Name': 'variable_value'});Resumen
Data layer de Google Tag Manager (GTM) es un componente fundamental de GTM. Nos permite capturar las interacciones de los usuarios con la página web y nos proporciona datos adicionales sobre las interacciones o su contexto. Si desea contar con una mejor estructura de datos, es esencial utilizar data layer.
El concepto de data layer puede resultar complejo de implementar y es probable que sea necesario contar con desarrolladores para crear una infraestructura de seguimiento avanzada.
Vamos a hacer un breve resumen:
- Recomendamos utilizar el método dataLayer.push para implementar data layer.
- Después de la implementación, puede utilizar data layer como puntos de datos, disparadores de eventos o ambos.
- Si está utilizando el seguimiento del lado del servidor, combine tanto el seguimiento del lado del cliente como el del lado del servidor para implementar data layer.
- Añada dimensiones personalizadas en GA4 (si utiliza esta herramienta) para poder visualizar los datos en los informes de GA4.
- Recuerde los errores frecuentes que pueden impedir que data layer funcione correctamente: use las mayúsculas y las minúsculas de forma adecuada y mantenga la consistencia en los nombres de las variables en todo el código que agregue y en la configuración de GTM.
¿Cambiar a GTM de servidor?
¡Stape tiene un montón de soluciones! Haz clic en Prueba gratis para registrarte y comprobarlas todas.
Prueba gratis
Comentarios