Gracias por consultar la versión preliminar de la nueva documentación sobre la plataforma de etiquetas de Google. Este sitio web está en versión beta pública. (Comentarios)

Guía para desarrolladores de la API Monitoring

Organízate con las colecciones Guarda y clasifica el contenido según tus preferencias.

La API de Monitoring te permite desarrollar herramientas para supervisar el comportamiento y el rendimiento de tus etiquetas. Para ello, se utiliza el método addEventCallback de la API Custom Template. Con este método, puedes especificar una retrollamada de evento para que se invoque al final del evento. Esta retrollamada recibirá información sobre el evento para que puedas desarrollar tus propias implementaciones de supervisión de etiquetas. También puedes añadir metadatos a las etiquetas para que la supervisión sea más precisa.

La API de Monitoring se puede usar para supervisar distintos elementos, como el estado de las etiquetas, los tiempos de ejecución y los metadatos. El objetivo final de estos píxeles de monitorización es enviar datos al punto final que elijas. Después, se puede acceder a los registros de este punto final para extraer los datos de monitorización y mostrarlos en un panel o activar un sistema de alertas.

Estado de la etiqueta

La técnica de monitorización del estado de las etiquetas que mostramos en el siguiente ejemplo usa addEventCallback para registrar el estado de activación de las etiquetas de una página. Se ejecuta en bucle en todas las etiquetas que se activan en el evento y calcula el número de etiquetas que se activan correctamente, no se activan, suponen una excepción o agotan el tiempo de espera. Después, estos totales se añaden a la URL del píxel de supervisión en forma de parámetros de consulta. El píxel de supervisión tendrá una URL similar a esta:

https://www.example.com/monitoring?ctid=GTM-XXXXXX&success=4&failure=1&exception=1&timeout=0

La URL del píxel se puede configurar con el siguiente código de ejemplo:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let successCount = 0;
  let failureCount = 0;
  let exceptionCount = 0;
  let timeoutCount = 0;

  const tagData = eventData['tags'];
  const timingData = [];
  for (let i in tagData) {
    let entry  = tagData[i];
    switch (entry.status) {
      case 'success':
        successCount++;
        continue;
      case 'failure':
        failureCount++;
        continue;
      case 'exception':
        exceptionCount++;
        continue;
      case 'timeout':
        timeoutCount++;
        continue;
    }
  }
  let url = 'https://www.example.com/monitoring?ctid=' + containerId +
      '&success=' + successCount +
      '&failure=' + failureCount +
      '&exception=' + exceptionCount +
      '&timeout=' + timeoutCount;
  sendPixel(url);
});
data.gtmOnSuccess();

Plazos de ejecución

Esta técnica usa addEventCallback para recoger datos sobre los tiempos de ejecución de las etiquetas. Por cada etiqueta que se activa en el evento, se añade a la URL del píxel un parámetro de consulta que incluye el ID de la etiqueta y el tiempo de ejecución. De esta forma, se envía un píxel similar al siguiente:

https://www.example.com/monitoring?ctid=GTM-XXXXXX&tag12=1200&tag50=400&tag1=6000

La URL del píxel se puede configurar con el siguiente código de ejemplo:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring?ctid=' + containerId;
  const tagData = eventData['tags'];
  const timingData = [];
  for (let i in tagData) {
    let entry = tagData[i];
    timingData.push('&tag' + entry['id'] + '=' + entry['executionTime']);
  }
  url += timingData.join('');
  sendPixel(url);
});
data.gtmOnSuccess();

Metadatos

Puedes crear paneles útiles con los datos básicos de la API Monitoring. Sin embargo, en algunos casos es recomendable supervisar un solo subconjunto de etiquetas. Para ello, puedes especificar pares clave-valor arbitrarios en la sección Otros metadatos de la etiqueta. Estos valores se incluirán en el objeto de datos de evento cuando se invoque una retrollamada al evento.

Por ejemplo, se añade una etiqueta a un contenedor de una nueva campaña publicitaria. El contenedor tiene muchas etiquetas, pero es posible que solo te interese supervisar la nueva.

Para identificar esa etiqueta en una retrollamada al evento, debes añadir metadatos a la etiqueta:

  1. En la definición de la etiqueta, haz clic en Configuración avanzada > Otros metadatos de la etiqueta.
  2. Haz clic en Incluir el nombre de la etiqueta para marcar esta opción.
  3. En Clave del nombre de la etiqueta, introduce un valor. En el siguiente ejemplo, se usa el valor "name". De esta forma, se incluirá el nombre de la etiqueta en los datos del evento cuando se envíen.
  4. Haz clic en + Añadir metadatos e introduce un par de Clave y Valor. En este ejemplo se usa la clave "group" y el valor "Campaign 2019".
  5. Utiliza la opción + Añadir metadatos para incluir las filas de pares clave-valor que quieras.

Captura de pantalla de la interfaz de usuario de Tag Manager, que muestra la ubicación de la sección Otros metadatos de la etiqueta

En una plantilla personalizada, el desarrollador puede consultar los valores definidos en los metadatos para identificar esta etiqueta:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring/campaignPixel?ctid=' + containerId;
  const tagData = eventData['tags'];
  for (let i in tagData) {
    let entry = tagData[i];
    if (entry['name'] === 'Conversion Pixel 2019') {
      url += '&status=' + entry['status'];
      break;
    }
  }
  sendPixel(url);
});
data.gtmOnSuccess();

De esta forma, se crea una URL de píxel similar a la siguiente:

https://www.example.com/monitoring/campaignPixel?ctid=GTM-XXXXXX&status=success

Si quieres, puedes supervisar todas las etiquetas del grupo "Campaign 2019":

const addEventCallback = require('addEventCallback');
const encode = require('encodeUriComponent');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring/campaign2019?ctid=' + containerId;
  const tagData = eventData['tags'];
  for (let i in tagData) {
    let entry = tagData[i];
    if (entry['group'] === 'Campaign 2019') {
      url += '&' + encode(entry['name']) + '=' + entry['status'];
      break;
    }
  }
  sendPixel(url);
});
data.gtmOnSuccess();

Así, se crearía un píxel de supervisión similar a este:

https://www.example.com/monitoring/campaign2019?ctid=GTM-XXXXXX&Conversion%20Pixel%202019=failure