Surveillance des hooks pour Web SDK

Adobe Experience Platform Web SDK comprend des hooks de surveillance que vous pouvez utiliser pour surveiller divers événements système. Ces outils sont utiles pour développer vos propres outils de débogage et pour capturer les journaux Web SDK.

Web SDK déclenche les fonctions de surveillance que vous ayez ou non activé débogage.

onInstanceCreated onInstanceCreated

Cette fonction de rappel est déclenchée lorsque vous avez réussi à créer une instance de Web SDK. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onInstanceCreated(data) {
    // data.instanceName
    // data.instance
}

onInstanceConfigured onInstanceConfigured

Cette fonction de rappel est déclenchée par le SDK Web lorsque la commande configure est résolue avec succès. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

 onInstanceConfigured(data) {
     // data.instanceName
     // data.config
 }

onBeforeCommand onBeforeCommand

Cette fonction de rappel est déclenchée par Web SDK avant l’exécution de toute autre commande. Vous pouvez utiliser cette fonction pour récupérer les options de configuration d’une commande spécifique. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onBeforeCommand(data) {
    // data.instanceName
    // data.commandName
    // data.options
}

onCommandResolved onCommandResolved

Cette fonction de rappel est déclenchée lors de la résolution des promesses de commande. Vous pouvez utiliser cette fonction pour afficher les options de commande et le résultat. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onCommandResolved(data) {
    // data.instanceName
    // data.commandName
    // data.options
    // data.result
},

onCommandRejected onCommandRejected

Cette fonction de rappel est déclenchée avant le rejet d’une promesse de commande et contient des informations sur la raison du rejet de la commande. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onCommandRejected(data) {
    // data.instanceName
    // data.commandName
    // data.options
    // data.error
}

onBeforeNetworkRequest onBeforeNetworkRequest

Cette fonction de rappel est déclenchée avant l’exécution d’une requête réseau. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onBeforeNetworkRequest(data) {
    // data.instanceName
    // data.requestId
    // data.url
    // data.payload
}

onNetworkResponse onNetworkResponse

Cette fonction de rappel est déclenchée lorsque le navigateur reçoit une réponse. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onNetworkResponse(data) {
    // data.instanceName
    // data.requestId
    // data.url
    // data.payload
    // data.body
    // data.parsedBody
    // data.status
    // data.retriesAttempted
}

onNetworkError onNetworkError

Cette fonction de rappel est déclenchée lorsque la requête réseau a échoué. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onNetworkError(data) {
    // data.instanceName
    // data.requestId
    // data.url
    // data.payload
    // data.error
},

onBeforeLog onBeforeLog

Cette fonction de rappel est déclenchée avant que Web SDK ne consigne quoi que ce soit dans la console. Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

onBeforeLog(data) {
    // data.instanceName
    // data.componentName
    // data.level
    // data.arguments
}

onContentRendering onContentRendering

Cette fonction de rappel est déclenchée par le composant personalization à différentes étapes du rendu. La payload peut varier en fonction du paramètre status . Voir l’exemple ci-dessous pour plus d’informations sur les paramètres de la fonction.

 onContentRendering(data) {
     // data.instanceName
     // data.componentName
     // data.payload
     // data.status
}

onContentHiding onContentHiding

Cette fonction de rappel est déclenchée lorsqu’un style de masquage préalable est appliqué ou supprimé.

onContentHiding(data) {
    // data.instanceName
    // data.componentName
    // data.status
}

Spécification des hooks de surveillance lors de l’utilisation du package NPM specify-monitoring-npm

Si vous utilisez le Web SDK via le package NPM, vous pouvez spécifier des hooks de surveillance dans la fonction createInstance , comme illustré ci-dessous.

var monitor = {
  onBeforeCommand(data) {
    console.log(data);
  },
  ...
};
var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy", monitors: [monitor] });
alloy("config", { ... });
alloy("sendEvent", { ... });

Exemple example

Le SDK Web recherche un tableau d’objets dans une variable globale appelée __alloyMonitors.

Pour capturer tous les événements Web SDK, vous devez définir les hooks de surveillance avant le chargement du code Web SDK sur votre page. Chaque méthode de surveillance capture un événement Web SDK.

Vous pouvez définir des hooks de surveillance après le chargement du code Web SDK sur votre page, mais les hooks déclenchés avant le chargement de la page ne seront pas capturés.

Lorsque vous définissez votre objet de hook de surveillance, il vous suffit de définir les méthodes pour lesquelles vous souhaitez définir une logique spéciale.
Par exemple, si vous vous souciez uniquement de onContentRendering, vous pouvez simplement définir cette méthode. Il n’est pas nécessaire d’utiliser tous les hooks de surveillance en même temps.

Vous pouvez définir plusieurs objets de hook de surveillance. Tous les objets avec la méthode donnée seront appelés lorsque l’événement correspondant sera déclenché.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.__alloyMonitors = window.__alloyMonitors || [];
    window.__alloyMonitors.push({
      onInstanceCreated(data) {
        // data.instanceName
        // data.instance
      },
      onInstanceConfigured(data) {
        // data.instanceName
        // data.config
      },
      onBeforeCommand(data) {
        // data.instanceName
        // data.commandName
        // data.options
      },
      // Added in version 2.4.0
      onCommandResolved(data) {
        // data.instanceName
        // data.commandName
        // data.options
        // data.result
      },
      // Added in version 2.4.0
      onCommandRejected(data) {
        // data.instanceName
        // data.commandName
        // data.options
        // data.error
      },
      onBeforeNetworkRequest(data) {
        // data.instanceName
        // data.requestId
        // data.url
        // data.payload
      },
      onNetworkResponse(data) {
        // data.instanceName
        // data.requestId
        // data.url
        // data.payload
        // data.body
        // data.parsedBody
        // data.status
        // data.retriesAttempted
      },
      onNetworkError(data) {
        // data.instanceName
        // data.requestId
        // data.url
        // data.payload
        // data.error
      },
      onBeforeLog(data) {
        // data.instanceName
        // data.componentName
        // data.level
        // data.arguments
      }
      onContentRendering(data) {
        // data.instanceName
        // data.componentName
        // data.payload
        // data.status
      },
      onContentHiding(data) {
        // data.instanceName
        // data.componentName
        // data.status
      }
    });
  </script>
  <script>
      !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
      []).push(o),n[o]=function(){var u=arguments;return new Promise(
      function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
      (window,["alloy"]);
    </script>
    <script src="alloy.js" async></script>
</head>
<body>
  <h1>Monitor Test</h1>
</body>
</html>