La capa de datos

La capa de datos es un objeto que utilizan Google Tag Manager y gtag.js para pasar información a las etiquetas. Los eventos o las variables pueden pasarse a través de la capa de datos. se pueden configurar con base en los valores de las variables.

Por ejemplo, si activas una campaña de remarketing etiqueta cuando el valor de purchase_total es superior a USD 100 o según el eventos específicos, p.ej., cuando se hace clic en un botón, tu capa de datos puede para que esos datos estén disponibles para tus etiquetas. El objeto de capa de datos es estructurados 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 al capa de datos de forma organizada y predecible, en lugar de analizar variables, información de transacciones, categorías de página y otros indicadores dispersos en toda la página. Una implementación de capa de datos propagada con variables y valores asociados te ayudará a garantizar que los datos relevantes estén disponibles cuando tu las etiquetas los necesitan.

Instalación

Para las instalaciones de páginas web de Tag Manager, debes crear una capa de datos. El El código destacado a continuación muestra dónde se establece la capa de datos, antes de la etiqueta. Se cargó el administrador.

<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 implementaciones estándar de gtag.js en las que la etiqueta se copió desde dentro producto y se agrega a una página web, el código para establecer la capa de datos se que se proporcionan. Agrega el código de la capa de datos a las implementaciones personalizadas de la etiqueta de Google 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 datos en cola mensajes de envío de la capa. Tag Manager procesa los mensajes según el orden de llegada, el primero en salir. : Cada mensaje se procesa uno a la vez, en el orden en que se recibió. Si el mensaje es un evento, cualquier etiqueta con condiciones de activación que se haya cumplido se activará antes de que Tag Manager pase al siguiente mensaje.

Si se realiza una llamada a gtag() o dataLayer.push() por código en una página, en una campaña Plantilla 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 cualquier no se garantiza que los valores actualizados de la capa de datos estén disponibles para el próximo evento. Para manejar estos casos, debes agregar el nombre de un evento a un mensaje tal como está enviar a la capa de datos y, a continuación, escuchar el nombre de ese evento con una etiqueta Activador de eventos.

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 parámetros de 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 etiquetas las APIs de consentimiento de administrador para configurar el comportamiento predeterminado y de actualización. Uso de la etiqueta Las APIs de consentimiento de administrador garantizan que las actualizaciones del consentimiento se procesen antes que cualquier elemento en cola. elementos de la capa de datos, de modo 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 tus datos. en cualquier punto de una cadena de eventos.

Cómo usar 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, quizás quiera activar una conversión etiqueta de seguimiento cuando un usuario hace clic en un botón de confirmación de compra. Los eventos pueden tener se llama cuando un usuario interactúa con los elementos del sitio web, como vínculos, botones, manuscritos, etcétera.

Para lograr esta funcionalidad, se llama a dataLayer.push() cuando se produce un evento. de que ocurra. 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 te gustaría realizar. 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 captar información, como valores ingresados o seleccionados en un formulario, metadatos asociados con un video que está reproduciendo el visitante, el color de un producto (p.ej., un automóvil) personalizada por el visitante, las URL de destino de los vínculos en los que hizo clic, etc.

Al igual que con los eventos, esta funcionalidad se logra llamando a la API de push(). para agregar o reemplazar variables de capa de datos en la capa de datos. La sintaxis básica para establecer variables de capa de datos dinámicas funciona de la siguiente manera:

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

Donde 'variable_name' es una cadena que indica el nombre de la capa de datos. variable que se establecerá, y 'variable_value' es una cadena que indica el valor de la variable de capa de datos que se debe establecer o reemplazar.

Por ejemplo: para establecer una variable de capa de datos con una preferencia de color cuando un visitante una herramienta de personalización de productos, podrías impulsar la siguiente variable de capa de datos:

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

Un solo envío, múltiples variables

Puedes enviar múltiples 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 variable a la capa de datos, el valor existente se reemplazará por el valor nuevo.

Conserva las variables de la capa de datos

Para conservar variables de capa de datos entre páginas web, llama a dataLayer.push() después se creó una instancia de la capa de datos en cada carga de página y se envían las variables a la capa de datos. Si deseas que estas variables de capa de datos estén disponibles para usar las etiquetas Administrador cuando se cargue el contenedor, agrega una llamada a dataLayer.push() arriba del 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 permanece en la página actual. Variables de capa de datos relevantes entre páginas (p.ej., visitorType) debe declararse en la capa de datos de cada de tu sitio web. Si bien no es necesario colocar el mismo conjunto de variables en en la capa de datos de cada página, deberías usar una convención de nomenclatura coherente. En otras palabras: si estableces la categoría de la página en la página de registro mediante una variable llamada pageCategory, tus páginas de productos y compras deben usar el pageCategory también.

Soluciona problemas

A continuación, se incluyen algunas sugerencias para la solución de problemas de la capa de datos:

No reemplaces la variable window.dataLayer: Cuando uses los datos directamente (p.ej., dataLayer = [{'item': 'value'}]), sobrescribirá cualquier valores existentes en dataLayer. Las instalaciones de Tag Manager deben crear instancias la capa de datos lo más arriba del código fuente posible, encima del contenedor snippet con window.dataLayer = window.dataLayer || [];. Después de declarar dataLayer, usa dataLayer.push({'item': 'value'}) para agregarle valores y, si esos deben estar disponibles para Tag Manager cuando se cargue la página, y ese La llamada dataLayer.push() debe estar por encima del código del contenedor de Tag Manager como en la nube.

El nombre del objeto dataLayer distingue mayúsculas de minúsculas: Si intentas enviar una variable o evento sin el revestimiento adecuado, el empuje 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. Capa de todos los datos los nombres de las variables 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 variables en las páginas: Si usas diferentes variables nombres para el mismo concepto en distintas páginas, se activen constantemente 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 la capa de datos que inició la etiqueta de Google o Tag Manager está 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 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 nuevo nombre de la capa de datos. p.ej., l=myNewName Actualizar todas las instancias de dataLayer en la etiqueta de Google snippet al 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

Reemplaza el valor del parámetro de capa de datos (que se destaca a continuación) en tu contenedor. snippet 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 renombradas, todas las referencias a tu capa de datos (es decir, cuando declaras los datos por encima del fragmento, o cuando se envían eventos o variables de capa de datos dinámicas a la capa de datos con el comando .push()) deben ajustarse para reflejar tu nombre de la 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 de la capa de datos personalizada

Si envías una función a la capa de datos, se invocará con este conjunto en un basado en el modelo de datos abstracto. Este modelo de datos abstracto puede obtener y establecer valores para una clave de datos y permite restablecer la capa de datos.

Importante: Si quieres usar métodos de capa de datos personalizados, debes usar .push para envía 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 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 el capa de datos. Esto es más útil con una página que permanezca abierta y que los datos y el tamaño de la capa sigue aumentando con el tiempo. Para restablecer la capa de datos, usa el siguiente código:

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