La capa de datos

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 mayor que $100, o según 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 se estructura 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 forma organizada y predecible, en lugar de analizar variables, información de transacciones, categorías de página y otras señales dispersas por tu página. Una implementación de capas de datos propagada con variables y valores asociados ayudará a garantizar que los datos relevantes estén disponibles cuando las etiquetas los necesiten.

Instalación

Para las instalaciones de páginas web de Tag Manager, debe crear una capa de datos. El código destacado a continuación 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 carga un contenedor, Tag Manager comienza a procesar todos los mensajes push de la capa de datos en cola. Tag Manager procesa los mensajes por orden de llegada, en orden de recepción. Si el mensaje es un evento, cualquier etiqueta con condiciones de activador que se cumplan se activará antes de que Tag Manager pase al siguiente mensaje.

Si se realiza una llamada gtag() o dataLayer.push() por 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 evaluar el resto de los mensajes pendientes. Esto significa que no se garantiza que los valores actualizados de Data Layer estén disponibles para el próximo evento. Para manejar estos casos, debes agregar un nombre de evento a un mensaje a medida que se envía a la capa de datos y, luego, detectar ese nombre de evento con un activador de evento personalizado.

Importante: No uses las etiquetas HTML personalizadas para implementar código basado en gtag.js. En su lugar, usa las plantillas de etiquetas nativas de Tag Manager para Google Ads, Analytics y Floodlight.

Importante: No uses etiquetas HTML personalizadas para establecer la configuración de consentimiento en Tag Manager. Dado que la configuración de consentimiento debe aplicarse antes de que las etiquetas relevantes se activen en un contenedor de Tag Manager, debes aplicar las API de consentimiento de Tag Manager para configurar el comportamiento predeterminado y de actualización. El uso de las API de consentimiento de Tag Manager garantiza que las actualizaciones de consentimiento se procesen antes de que los elementos en cola de la capa de datos hagan que todas las etiquetas activadas por el mismo evento vean el mismo estado de consentimiento.

Punto clave: puedes usar Google Tag Assistant para inspeccionar el estado de tu capa de datos en cualquier momento de una cadena de eventos.

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 de capa de datos especial llamada event que usan los objetos de escucha de eventos de JavaScript para activar etiquetas cuando un usuario interactúa con los elementos del sitio web. Por ejemplo, es posible que desee activar una etiqueta del 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, pergaminos, etcétera.

Esta función se logra llamando a dataLayer.push() cuando se produce 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 string 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 a fin de llamar a dataLayer.push():

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Puedes enviar variables de capas 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 reproduce el visitante, el color de un producto (p.ej., un automóvil) personalizado por el visitante, las URL de destino de los vínculos en los que se hace clic, etcétera.

Al igual que con los eventos, esta funcionalidad se logra mediante una llamada a la API de push() para agregar o reemplazar variables de capa de datos en la capa de datos. La sintaxis básica para configurar las variables dinámicas de la capa de datos es la siguiente:

dataLayer.push({'variable_name': 'variable_value'});

En el que 'variable_name' es una string que indica el nombre de la variable de capa de datos que se establecerá y 'variable_value' es una string que indica el valor de la variable de capa de datos que se configurará o reemplazará.

Por ejemplo, para configurar 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 solo envío, varias variables

Puedes enviar varias variables y eventos a la vez:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Importante: Si envías una variable con el mismo nombre que una variable existente a la capa de datos, el valor existente se reemplazará por el valor nuevo.

Conserva las variables de la capa de datos

Para conservar las variables de la capa de datos entre páginas web, llama a dataLayer.push() después de que se cree una instancia de la capa de datos en cada carga de página y envía las variables a la capa de datos. Si quieres que estas variables de capa de datos estén disponibles en Tag Manager cuando se cargue el contenedor, agrega una llamada 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 capa de datos persistirá solo mientras el visitante permanezca en la página actual. Las variables de capa de datos relevantes en las páginas (p.ej., visitorType) deben declararse en la capa de datos de cada página del sitio web. Si bien no es necesario colocar 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 página en la página de registro con una variable llamada pageCategory, las páginas de productos y compras también deben usar la variable pageCategory.

Solución de problemas

A continuación, le ofrecemos algunas sugerencias para la solución de problemas de las capas de datos:

No reemplaces la variable window.dataLayer: Cuando uses la capa de datos directamente (p.ej., dataLayer = [{'item': 'value'}]), se reemplazará cualquier valor existente en el dataLayer. Las instalaciones de Tag Manager deben crear una instancia de la capa de datos lo más alto posible en el código fuente, por encima del fragmento de contenedor o cualquier fragmento de la página de Optimize que oculte el fragmento, mediante window.dataLayer = window.dataLayer || [];. Después de declarar el dataLayer, usa dataLayer.push({'item': 'value'}) para agregarle valores adicionales. Si esos valores deben estar disponibles para Tag Manager cuando se cargue la página, esa llamada a dataLayer.push() también debe estar arriba 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 el uso de mayúsculas adecuado, 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 de JavaScript válidos. Todos los nombres de variables de 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 las páginas: Si usas nombres de variables diferentes para el mismo concepto en páginas diferentes, tus etiquetas no se activarán de forma coherente en todas las ubicaciones deseadas.

Mala:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Bueno:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Cambiar el nombre de la capa de datos

El nombre predeterminado del objeto de 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 capa de datos en tu etiqueta de Google o el fragmento del contenedor de Tag Manager con el nombre que elijas.

gtag.js

Agrega un parámetro de búsqueda llamado “l” a la URL para establecer el nombre nuevo de la 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 (que se destaca a continuación) en el fragmento de tu contenedor con el nombre que elijas.

Importante: No reemplaces el valor del parámetro no destacado.

<!-- 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 renombrados, todas las referencias a tu capa de datos (es decir, cuando declaras la capa de datos sobre el fragmento o cuando envías eventos o variables de capa de datos dinámicas a la capa de datos con el comando .push()) deben ajustarse para reflejar el nombre de tu capa de datos personalizada:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Nota: Solo se admite un objeto dataLayer por página.

Métodos personalizados de la capa de datos

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 clave-valor, y también proporciona una forma de restablecer la capa de datos.

Importante: Si quieres usar métodos de capas de datos personalizados, debes usar .push para enviar datos a la variable dataLayer directamente. Si usas gtag, la función se interpretará como un comando no válido y se ignorará.

set

La función set en el modelo de datos abstracto te permite establecer valores para recuperar a través de get.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

La función get en el modelo de datos abstracto te permite recuperar valores establecidos.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

reset

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 paso del tiempo. Para restablecer la capa de datos, usa el siguiente código:

window.dataLayer.push(function() {
  this.reset();
})