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.
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!
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.
Data layer es necesario si desea:
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.
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.
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' }];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 |
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.
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.
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:
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:
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’
});
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".
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'
});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".
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'
}
}];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.
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:
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.
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. |
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.
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".
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:
Haga clic en "Guardar".
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:
Para comprobar si Google Analytics está capturando los datos, vaya a "Administración" → DebugView.
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.
Correcto:
dataLayer.push({'variable_name': 'variable_value'});Incorrecto:
datalayer.push({'variable_name': 'variable_value'});Correcto:
dataLayer.push({'variable_name': 'variable_value'});Incorrecto:
dataLayer.push({variable_name': 'variable_value'});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.
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'});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:
¡Stape tiene un montón de soluciones! Haz clic en Prueba gratis para registrarte y comprobarlas todas.
Comentarios