La API de Monitoring te permite desarrollar herramientas para monitorizar 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 monitorizar 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 endpoint para recoger 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 cuántas etiquetas se activan correctamente, cuántas no se activan, cuántas suponen una excepción o cuántas agotan el tiempo de espera. Después, estos totales se añaden a la URL del píxel de monitorizació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 de Monitoring. Sin embargo, en algunos casos es recomendable monitorizar solo un 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 eventos 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:
- En la definición de la etiqueta, haz clic en Configuración avanzada > Otros metadatos de la etiqueta.
- Haz clic en Incluir el nombre de la etiqueta para marcar esta opción.
- 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.
- 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".
- Utiliza la opción + Añadir metadatos para incluir las filas de pares clave-valor que quieras.
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 monitorizar 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