La capa de datos

La capa de datos es un objeto que utilizan Google Tag Manager y gtag.js para enviar información a las etiquetas. Los eventos o las variables se pueden transferir 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 100 EUR o, en función de eventos específicos (por ejemplo, cuando se hace clic en un botón), la capa de datos se puede configurar para que los datos estén disponibles en 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 añade a la capa de datos de forma organizada y predecible, en lugar de analizar variables, información de las transacciones, categorías de páginas y otras señales repartidas por tu página. Si implementas una capa de datos con variables y valores asociados, te asegurarás de que haya datos relevantes disponibles cuando las etiquetas los necesiten.

Instalación

En las instalaciones de páginas web de Tag Manager, debes crear una capa de datos. El código destacado de abajo 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 se ha copiado la etiqueta desde el producto y se ha añadido 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, añade el código de la capa de datos al principio de la secuencia de comandos, como se muestra en el siguiente ejemplo:

<!-- 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 empieza a procesar todos los mensajes push de la capa de datos en cola. Tag Manager procesa los mensajes de uno en uno en el mismo orden en el que se reciben. Si el mensaje es un evento, las etiquetas con condiciones de activador que se hayan cumplido se activarán antes de que Tag Manager pase al siguiente mensaje.

Si el código hace una llamada gtag() o dataLayer.push() en una página, en una plantilla personalizada o en una etiqueta HTML personalizada, el mensaje asociado se pondrá en cola y se procesará cuando se evalúen los demás mensajes pendientes. Esto significa que los valores actualizados de la capa de datos pueden no estar disponibles para el próximo evento. En ese caso, puedes añadir el nombre de un evento a un mensaje cuando se envíe a la capa de datos y, a continuación, procesar 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 configurar los ajustes de consentimiento en Tag Manager. Como la configuración de consentimiento tiene que aplicarse antes de que se activen las etiquetas correspondientes de un contenedor de Tag Manager, debes aplicar las APIs de consentimiento de Tag Manager para configurar el consentimiento predeterminado y actualizar el comportamiento. Las APIs de consentimiento de Tag Manager sirven para que las actualizaciones de consentimiento se procesen antes que los elementos en cola de la capa de datos y que, así, todas las etiquetas activadas por el mismo evento tengan el mismo estado del consentimiento.

Importante: Puedes usar Google Tag Assistant para consultar el estado de la capa de datos en cualquier momento en una cadena de eventos.

Utilizar una capa de datos con gestores 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 se usa en los procesadores de eventos JavaScript para iniciar la activación de etiquetas cuando los usuarios interactúan con elementos del sitio web. Por ejemplo, puedes hacer que se active una etiqueta de seguimiento de conversiones cuando un usuario haga clic en el botón para confirmar una compra. Puede llamarse a los eventos siempre que el usuario interactúe con elementos del sitio web, como enlaces, botones, desplazamientos, etc.

Esta función se ejecuta 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'});

Aquí event_name es una cadena que describe el evento, como 'login', purchase o search.

Usa dataLayer.push() para enviar datos de eventos cuando se produzca una acción que quieras medir. Por ejemplo, si quieres enviar un evento cuando un usuario haga 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 capa de datos a la capa de datos de forma dinámica para capturar información como los valores que has introducido o seleccionado en un formulario, los metadatos asociados a un vídeo que reproduce un visitante, el color de un producto (por ejemplo, un coche) personalizado por el usuario, las URLs de destino de los enlaces en los que se ha hecho clic, etc.

Del mismo modo que con los eventos, si quieres utilizar esta función, tendrás que llamar a la API push() para añadir o sustituir variables de la capa de datos. La sintaxis básica para definir variables de capa de datos dinámicas es la siguiente:

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

Aquí 'variable_name' es una cadena que indica el nombre de la variable de capa de datos que se va a definir, y 'variable_value' es una cadena que indica el valor de la variable de capa de datos que se va a definir o a sustituir.

Por ejemplo, si quieres definir una variable como una preferencia de color cuando un visitante interactúe con una herramienta de personalización de productos, puedes enviar la siguiente variable dinámica de capa de datos:

dataLayer.push({'color': 'red'});

Enviar varias variables a la vez

Puedes enviar varias variables y eventos a la vez:

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

Importante: Si envías a la capa de datos una variable que tenga el mismo nombre que otra, el valor de la nueva sobrescribirá el de la que ya tenías.

Conservar variables de la capa de datos

Para mantener las mismas variables de la capa de datos en varias páginas web, llama a dataLayer.push() después de que se haya creado la instancia de la capa de datos cada vez que se cargue la 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, añade 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 -->

Las variables que se declaren en el objeto de la capa de datos se mantendrán hasta que los visitantes salgan de la página. Las variables de la capa de datos que sean relevantes en todas las páginas (por ejemplo, visitorType) deben declararse en la capa de cada página de tu sitio web. Aunque no tienes que incluir el mismo conjunto de variables en la capa de datos de cada página, debes utilizar una convención de nomenclatura uniforme. En otras palabras, si especificas la categoría de la página de registro con la variable pageCategory, también debes usar la variable pageCategory en tus páginas de productos y de compra.

Solucionar problemas

A continuación incluimos algunos consejos para solucionar problemas con la capa de datos:

No sobrescribas la variable window.dataLayer: si usas la capa de datos directamente (por ejemplo, dataLayer = [{'item': 'value'}])), se sobrescribirán los valores de dataLayer. Al usar Tag Manager se debe crear una instancia de la capa de datos tan arriba como sea posible en el código fuente, sobre el fragmento de contenedor, usando window.dataLayer = window.dataLayer || [];. Después de declarar dataLayer, utiliza dataLayer.push({'item': 'value'}) para añadirle más valores. Si esos valores deben estar disponibles en Tag Manager cuando se cargue la página, dataLayer.push() también debe estar por encima del código de contenedor de Tag Manager.

El nombre del objeto dataLayer distingue entre mayúsculas y minúsculas: si intentas enviar una variable o un evento sin las mayúsculas y minúsculas correspondientes, no se enviará la información.

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 capa de datos deben escribirse entre comillas.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Usa los mismos nombres de variables en todas las páginas: si usas nombres diferentes para el mismo concepto en cada página, las etiquetas no se podrán activar de manera uniforme en todas las ubicaciones.

Incorrecto:

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

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

Correcto:

// 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 iniciado por la etiqueta de Google o Tag Manager es dataLayer. Si quieres cambiar el nombre de esta capa, debes editar el valor del parámetro de la capa de datos en la etiqueta de Google o en el fragmento del contenedor de Tag Manager y añadir el nombre que quieras.

gtag.js

Añade un parámetro de consulta llamado "l" a la URL para indicar el nuevo nombre de la capa de datos (por ejemplo, l=myNewName). Cambia todas las instancias de dataLayer en el fragmento de la etiqueta de Google por el nuevo nombre.

<!-- 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

Sustituye el valor de parámetro de la capa de datos (resaltado a continuación) que aparece en el fragmento de contenedor por el nombre que quieras ponerle.

Importante: No sustituyas el valor de parámetro que no aparezca resaltado.

<!-- 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 cambiado el nombre, todas las referencias que se hagan a la capa de datos (es decir, cuando esta se declare antes del fragmento o cuando se envíen a ella eventos o variables dinámicas con el comando .push()) se deben ajustar para reflejar el nombre personalizado de la capa de datos:

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

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

Métodos de capa de datos personalizados

Si envías una función a la capa de datos, se invocará con esa función establecida en un modelo de datos resumen. Este modelo de datos resumen puede obtener y definir valores en un almacén de valores clave y, además, proporciona una forma de restablecer la capa de datos.

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

set

La función set del modelo de datos resumen te permite establecer valores para recuperarlos mediante la función get.

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

get

La función get del modelo de datos resumen te permite recuperar valores que se hayan configurado previamente.

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 del modelo de datos resumen te permite restablecer los datos de la capa de datos. Esta opción es más útil si una página sigue abierta y el tamaño de la capa de datos sigue creciendo. Para restablecer la capa de datos, utiliza el siguiente código:

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