L'API Monitoring consente di creare strumenti per monitorare il comportamento e il rendimento dei tag. Per eseguire questa operazione, utilizza il metodo dell'API Custom Template addEventCallback. Questo metodo consente di specificare un callback di evento che verrà richiamato al termine di un evento. Questo callback riceverà informazioni sull'evento, consentendoti di creare implementazioni di monitoraggio dei tag personalizzate. Puoi anche aggiungere metadati ai tag per consentire un monitoraggio più granulare.
L'API Monitoring può supportare diversi casi d'uso per il monitoraggio, ad esempio lo stato dei tag, i tempi di esecuzione e i metadati. L'obiettivo finale di questi pixel di monitoraggio è inviare i dati a un endpoint a tua scelta. I log di questo endpoint sono quindi accessibili per raccogliere dati di monitoraggio, che possono essere visualizzati in una dashboard o utilizzati per attivare un sistema di avvisi.
Stato del tag.
La tecnica relativa allo stato dei tag mostrata in questo esempio utilizza addEventCallback per conteggiare lo stato di attivazione dei tag su una pagina. Verrà eseguito il loop di tutti i tag attivati per l'evento e verrà conteggiato il numero di tag che hanno avuto esito positivo, non riuscito, che hanno generato un'eccezione o che sono scaduti. Questi totali vengono poi aggiunti all'URL del pixel di monitoraggio come parametri di query. Il pixel di monitoraggio avrà un URL simile a questo:
https://www.example.com/monitoring?ctid=GTM-XXXXXX&success=4&failure=1&exception=1&timeout=0
L'URL di pixel può essere impostato utilizzando il seguente esempio di codice:
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();
Tempi di esecuzione
Questa tecnica utilizza addEventCallback per aiutarti a raccogliere dati sui tempi di esecuzione dei tag. Per ogni tag attivato per questo evento, viene aggiunto un parametro di ricerca all'URL del pixel che include l'ID del tag e il tempo di esecuzione. In questo modo viene inviato un pixel simile al seguente:
https://www.example.com/monitoring?ctid=GTM-XXXXXX&tag12=1200&tag50=400&tag1=6000
L'URL di pixel può essere impostato utilizzando il seguente esempio di codice:
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();
Metadati
Puoi creare dashboard utili utilizzando i dati di base forniti dall'API Monitoring. Tuttavia, in alcuni casi potrebbe essere necessario monitorare solo un sottoinsieme di tag. Per facilitare questa operazione, utilizza la sezione Metadati dei tag per specificare coppie chiave-valore arbitrarie in una definizione di tag. Questi valori saranno inclusi nell'oggetto dati evento quando si verifica un callback di evento.
Ad esempio, viene aggiunto un tag a un contenitore per una nuova campagna pubblicitaria. Il contenitore ha molti tag esistenti, ma ti interessa solo monitorare questo nuovo tag.
Per identificare questo tag da un callback di evento, aggiungi i metadati al tag:
- Nella definizione del tag, fai clic su Impostazioni avanzate > Metadati tag aggiuntivi.
- Fai clic su Includi nome tag per selezionarla.
- In Chiave per nome tag, inserisci un valore. In questo esempio viene utilizzato "name" come valore. Il nome del tag verrà incluso nei dati sull'evento man mano che vengono inviati.
- Fai clic su + Aggiungi metadati e inserisci una coppia Chiave e Valore. Questo esempio utilizza una chiave denominata "gruppo" e un valore di "Campagna 2019".
- Utilizza +Aggiungi metadati per aggiungere altre righe di coppie chiave/valore, se necessario.
In un modello personalizzato, lo sviluppatore può identificare questo tag controllando i valori impostati nei metadati:
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();
Questo genera un URL di pixel simile al seguente:
https://www.example.com/monitoring/campaignPixel?ctid=GTM-XXXXXX&status=success
Se lo desideri, puoi monitorare tutti i tag del gruppo "Campagna 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();
Il risultato è un pixel di monitoraggio simile al seguente:
https://www.example.com/monitoring/campaign2019?ctid=GTM-XXXXXX&Conversion%20Pixel%202019=failure