La capa de datos es un objeto que usan Google Tag Manager y gtag.js para pasar información a las etiquetas. Los eventos o las variables se pueden pasar a través de la capa de datos, y los activadores se pueden configurar en función de los valores de las variables.
Por ejemplo, si activas una etiqueta de remarketing cuando el valor de purchase_total
es superior a USD 100 o en función de eventos específicos, p.ej., cuando se hace clic en un botón, se puede configurar tu capa de datos para que esos datos estén disponibles para tus etiquetas. El objeto de la capa de datos está estructurado como JSON. Por ejemplo:
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
Las etiquetas de Google están diseñadas para hacer referencia fácilmente a la información que se agrega a la capa de datos de una manera organizada y predecible, en lugar de analizar variables, información de transacciones, categorías de páginas y otros indicadores dispersos en tu página. Una implementación de la capa de datos propagada con variables y valores asociados ayudará a garantizar que los datos relevantes estén disponibles cuando tus etiquetas los necesiten.
Instalación
Para las instalaciones de páginas web de Tag Manager, debes crear una capa de datos. En el siguiente código destacado, se muestra dónde se establece la capa de datos, antes de que se cargue Tag Manager.
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
En las implementaciones estándar de gtag.js en las que la etiqueta se copió desde el producto y se agregó a una página web, se proporciona el código para establecer la capa de datos. En las implementaciones personalizadas de la etiqueta de Google, agrega el código de la capa de datos al comienzo de la secuencia de comandos, como se muestra en el siguiente ejemplo destacado:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Cómo se procesa la información de la capa de datos
Cuando se cargue un contenedor, Tag Manager comenzará a procesar todos los mensajes push de la capa de datos en fila. Tag Manager procesa los mensajes según el orden en que se reciben: cada mensaje se procesa uno a la vez, en el orden en que se recibió. Si el mensaje es un evento, se activarán todas las etiquetas con condiciones de activación que se hayan cumplido antes de que Tag Manager pase al siguiente mensaje.
Si se realiza una llamada a gtag()
o dataLayer.push()
a través de código en una página, en una plantilla personalizada o en una etiqueta HTML personalizada, el mensaje asociado se pone en cola y se procesa después de que se evalúan todos los demás mensajes pendientes. Esto significa que no se garantiza que los valores de la capa de datos actualizados estén disponibles para el próximo evento.
Para controlar estos casos, debes agregar un nombre de evento a un mensaje a medida que se envía a la capa de datos y, luego, escuchar ese nombre de evento con un activador de eventos personalizados.
Usa una capa de datos con controladores de eventos
El objeto dataLayer
usa un comando event
para iniciar el envío de eventos.
La etiqueta de Google y Tag Manager usan una variable especial de la capa de datos llamada event
que usan los objetos de escucha de eventos de JavaScript para activar etiquetas cuando un usuario interactúa con elementos del sitio web. Por ejemplo, es posible que desees activar una etiqueta de seguimiento de conversiones cuando un usuario haga clic en un botón de confirmación de compra. Se puede llamar a los eventos cada vez que un usuario interactúa con elementos del sitio web, como vínculos, botones, desplazamiento, etcétera.
Para lograr esta funcionalidad, se llama a dataLayer.push()
cuando ocurre un evento. La sintaxis para enviar un evento con dataLayer.push()
es la siguiente:
dataLayer.push({'event': 'event_name'});
En el ejemplo anterior, event_name
es una cadena que describe el evento, como 'login'
, purchase
o search
.
Usa dataLayer.push()
para enviar datos de eventos cuando se produce una acción que deseas medir. Por ejemplo, para enviar un evento cuando un usuario hace clic en un botón, modifica el controlador onclick
del botón para llamar a dataLayer.push()
:
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
Puedes enviar variables de la capa de datos a la capa de datos de forma dinámica para capturar información como los valores ingresados o seleccionados en un formulario, los metadatos asociados con un video que el visitante está reproduciendo, el color de un producto (p.ej., un automóvil) que el visitante personalizó, las URLs de destino de los vínculos en los que se hizo clic, etcétera.
Al igual que con los eventos, esta funcionalidad se logra llamando a la API de push()
para agregar o reemplazar variables de la capa de datos en la capa de datos. La sintaxis básica para configurar variables de capas de datos dinámicos es la siguiente:
dataLayer.push({'variable_name': 'variable_value'});
Donde 'variable_name'
es una cadena que indica el nombre de la variable de la capa de datos que se establecerá y 'variable_value'
es una cadena que indica el valor de la variable de la capa de datos que se establecerá o reemplazará.
Por ejemplo, para establecer una variable de capa de datos con una preferencia de color cuando un visitante interactúa con una herramienta de personalización de productos, puedes enviar la siguiente variable de capa de datos dinámica:
dataLayer.push({'color': 'red'});
Un envío, varias variables
Puedes enviar varias variables y eventos a la vez:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
Cómo conservar las variables de la capa de datos
Para conservar las variables de la capa de datos entre las páginas web, llama a dataLayer.push()
después de que se haya creado una instancia de la capa de datos en cada carga de página y envía las variables a la capa de datos. Si deseas que estas variables de la capa de datos estén disponibles para Tag Manager cuando se cargue el contenedor, agrega una llamada a dataLayer.push()
sobre el código del contenedor de Tag Manager, como se muestra a continuación.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Cada variable declarada dentro del objeto de la capa de datos persistirá solo mientras
el visitante permanezca en la página actual. Las variables de la capa de datos que son relevantes en todas las páginas (p.ej., visitorType
) deben declararse en la capa de datos de cada página de tu sitio web. Si bien no es necesario que coloques el mismo conjunto de variables en la capa de datos de cada página, debes usar una convención de nombres coherente. En otras palabras, si configuras la categoría de la página en la página de registro con una variable llamada pageCategory
, tus páginas de productos y compras también deben usar la variable pageCategory
.
Solución de problemas
A continuación, se incluyen algunas sugerencias para solucionar problemas relacionados con la capa de datos:
No reemplaces la variable window.dataLayer
: Cuando uses la capa de datos directamente (p.ej., dataLayer = [{'item': 'value'}])
, se reemplazarán los valores existentes en dataLayer
. Las instalaciones de Tag Manager deben crear instancias de la capa de datos lo más arriba posible en el código fuente, por encima del fragmento de contenedor, con window.dataLayer =
window.dataLayer || [];
. Después de declarar dataLayer
, usa dataLayer.push({'item': 'value'})
para agregarle valores adicionales y, si esos valores deben estar disponibles para Tag Manager cuando se carga la página, esa llamada a dataLayer.push()
también debe estar por encima del código del contenedor de Tag Manager.
El nombre del objeto dataLayer
distingue mayúsculas de minúsculas: Si intentas enviar una variable o un evento sin la mayúscula o minúscula correcta, el envío no funcionará.
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
Se debe llamar a dataLayer.push
con objetos JavaScript válidos. Todos los nombres de variables de la capa de datos deben estar entre comillas.
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
Mantén la coherencia de los nombres de las variables en todas las páginas: Si usas nombres de variables diferentes para el mismo concepto en diferentes páginas, tus etiquetas no podrán activarse de forma coherente en todas las ubicaciones deseadas.
Incorrecto:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
Buena:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
Cambia el nombre de la capa de datos
El nombre predeterminado del objeto de la capa de datos que inicia la etiqueta de Google o Tag Manager es dataLayer
. Si prefieres usar un nombre diferente para tu capa de datos, puedes hacerlo editando el valor del parámetro de la capa de datos en tu etiqueta de Google o en el fragmento de contenedor de Tag Manager con el nombre que elijas.
gtag.js
Agrega un parámetro de consulta llamado "l" a la URL para establecer el nombre de la nueva capa de datos, p.ej., l=myNewName
. Actualiza todas las instancias de dataLayer
en el fragmento de la etiqueta de Google al nombre nuevo.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Tag Manager
Reemplaza el valor del parámetro de la capa de datos (destacado a continuación) en el fragmento de contenedor por el nombre que desees.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Una vez que cambies el nombre, todas las referencias a tu capa de datos (es decir, cuando declares la capa de datos por encima del fragmento o cuando envíes eventos o variables de capa de datos dinámicas a la capa de datos con el comando .push()
) se deben ajustar para reflejar el nombre de tu capa de datos personalizada:
<script>
myNewName = window.dataLayer || [];
myNewName.push({'variable_name': 'variable_value'});
</script>
Métodos de la capa de datos personalizados
Si envías una función a la capa de datos, se invocará con este conjunto en un modelo de datos abstracto. Este modelo de datos abstracto puede obtener y establecer valores en un almacén de par clave-valor, y también proporciona una forma de restablecer la capa de datos.
set
La función set
del modelo de datos abstracto te permite establecer valores para recuperarlos
mediante get.
window.dataLayer.push(function() {
this.set('time', new Date());
});
get
La función get
del modelo de datos abstracto te permite recuperar los valores que se establecieron.
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
restablecer
La función reset
en el modelo de datos abstracto te permite restablecer los datos en la
capa de datos. Esto es más útil con una página que permanecerá abierta y el tamaño de la capa de datos seguirá creciendo con el tiempo. Para restablecer la capa de datos, usa el siguiente código:
window.dataLayer.push(function() {
this.reset();
})