Guide du développeur de l'API Monitoring

L'API Monitoring vous permet de créer des outils permettant de surveiller le comportement et les performances de vos balises. Pour ce faire, utilisez la méthode de l'API Custom Template addEventCallback. Cette méthode vous permet de spécifier un rappel d'événement qui sera appelé à la fin d'un événement. Ce rappel recevra des informations sur l'événement, ce qui vous permettra de créer vos propres implémentations de surveillance des balises. Vous pouvez également ajouter des métadonnées à vos tags pour un contrôle plus précis.

L'API Monitoring peut prendre en charge plusieurs cas d'utilisation de surveillance, tels que l'état des tags, les temps d'exécution et les métadonnées. L'objectif final de ces pixels de surveillance est d'envoyer des données au point de terminaison de votre choix. Les journaux de ce point de terminaison sont ensuite accessibles pour collecter des données de surveillance. Ces données peuvent ensuite être affichées dans un tableau de bord ou utilisées pour déclencher un système d'alerte.

l'état de la balise ;

La technique d'état des balises présentée dans cet exemple utilise addEventCallback pour comptabiliser l'état de déclenchement des balises sur une page. Cette opération passe en boucle toutes les balises déclenchées pour l'événement et comptabilise le nombre de balises ayant réussi, échoué, généré une exception ou expiré. Ces totaux sont ensuite ajoutés à l'URL du pixel de surveillance en tant que paramètres de requête. L'URL du pixel de surveillance est semblable à celle-ci:

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

Vous pouvez configurer l'URL de pixel à l'aide de l'exemple de code suivant:

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();

Temps d'exécution

Cette technique utilise addEventCallback pour vous aider à collecter des données sur les temps d'exécution de vos balises. Pour chaque balise déclenchée pour cet événement, un paramètre de requête est ajouté à l'URL du pixel. Il inclut l'ID de la balise et la durée d'exécution. Un pixel semblable à celui-ci est alors envoyé:

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

Vous pouvez configurer l'URL de pixel à l'aide de l'exemple de code suivant:

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();

Métadonnées

Vous pouvez créer des tableaux de bord utiles à l'aide des données de base fournies par l'API Monitoring. Toutefois, vous pouvez souhaiter ne surveiller qu'un sous-ensemble de tags. Pour vous faciliter la tâche, utilisez la section Métadonnées des balises afin de spécifier des paires clé/valeur arbitraires dans une définition de balise. Ces valeurs seront incluses dans l'objet de données d'événement lors d'un rappel d'événement.

Par exemple: une balise est ajoutée à un conteneur pour une nouvelle campagne publicitaire. Le conteneur comporte déjà de nombreuses balises, mais vous souhaitez uniquement surveiller cette nouvelle balise.

Pour identifier cette balise dans un rappel d'événement, ajoutez des métadonnées à la balise:

1. Dans la définition de la balise, cliquez sur Paramètres avancés > Métadonnées de balise supplémentaires.
2. Cliquez sur Inclure le nom de la balise pour la cocher.
3. Dans Clé pour nom de tag, saisissez une valeur. Cet exemple utilise la valeur "name". Le nom de la balise sera alors inclus dans les données d'événement lors de leur envoi.
4. Cliquez sur +Ajouter des métadonnées, puis saisissez une paire clé/valeur. Cet exemple utilise une clé appelée "group" et la valeur "Campaign 2019".
5. Cliquez sur + Ajouter des métadonnées pour ajouter des lignes supplémentaires de paires clé/valeur, si vous le souhaitez.

Dans un modèle personnalisé, le développeur peut identifier cette balise en vérifiant les valeurs définies dans les métadonnées:

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();

Vous obtenez alors une URL de pixel qui se présente comme suit:

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

Si vous le souhaitez, vous pouvez ensuite surveiller tous les tags du groupe "Campagne 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();

Le pixel de surveillance doit ressembler à ce qui suit:

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