Überwachungshooks für Web SDK

Das Adobe Experience Platform Web SDK enthält Überwachungshooks, mit denen Sie verschiedene Systemereignisse überwachen können. Diese Tools sind nützlich für die Entwicklung Ihrer eigenen Debugging-Tools und zum Erfassen von Web SDK-Protokollen.

Das Web SDK Trigger die Überwachungsfunktionen unabhängig davon, ob Sie Debugging aktiviert haben.

onInstanceCreated onInstanceCreated

Diese Rückruffunktion wird ausgelöst, wenn Sie erfolgreich eine neue Web SDK-Instanz erstellt haben. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onInstanceConfigured onInstanceConfigured

Diese Rückruffunktion wird vom Web SDK ausgelöst, wenn der Befehl configure erfolgreich aufgelöst wurde. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onBeforeCommand onBeforeCommand

Diese Rückruffunktion wird vom Web SDK ausgelöst, bevor ein anderer Befehl ausgeführt wird. Mit dieser Funktion können Sie die Konfigurationsoptionen eines bestimmten Befehls abrufen. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onCommandResolved onCommandResolved

Diese Rückruffunktion wird beim Auflösen von Befehlsversprechen ausgelöst. Sie können diese Funktion verwenden, um die Befehlsoptionen und das Ergebnis anzuzeigen. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onCommandRejected onCommandRejected

Diese Rückruffunktion wird ausgelöst, bevor ein Befehlsversprechen zurückgewiesen wird. Sie enthält Informationen zum Grund der Ablehnung des Befehls. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onBeforeNetworkRequest onBeforeNetworkRequest

Diese Rückruffunktion wird ausgelöst, bevor eine Netzwerkanforderung ausgeführt wird. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onNetworkResponse onNetworkResponse

Diese Rückruffunktion wird ausgelöst, wenn der Browser eine Antwort erhält. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onNetworkError onNetworkError

Diese Rückruffunktion wird ausgelöst, wenn die Netzwerkanforderung fehlgeschlagen ist. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onBeforeLog onBeforeLog

Diese Rückruffunktion wird ausgelöst, bevor das Web SDK alles in der Konsole protokolliert. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onContentRendering onContentRendering

Diese Rückruffunktion wird in verschiedenen Phasen des Renderns von der Komponente personalization ausgelöst. Die Payload kann je nach dem Parameter status unterschiedlich ausfallen. Weitere Informationen zu den Funktionsparametern finden Sie im folgenden Beispiel.

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

onContentHiding onContentHiding

Diese Rückruffunktion wird ausgelöst, wenn ein Stil zum Vorab-Ausblenden angewendet oder entfernt wird.

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

Angeben von Überwachungshooks bei Verwendung des NPM-Pakets specify-monitoris-npm

Wenn Sie das Web SDK über das Paket NPM verwenden, können Sie Überwachungshooks in der Funktion createInstasnce angeben, wie unten dargestellt.

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

Beispiel example

Das Web SDK sucht nach einem Array von Objekten in einer globalen Variablen namens __alloyMonitors.

Um alle Web SDK-Ereignisse zu erfassen, müssen Sie Ihre Monitoring-Hooks definieren, bevor der Web SDK-Code auf Ihrer Seite geladen wird. Jede Überwachungsmethode erfasst ein Web SDK-Ereignis.

Sie können Überwachungs-Hooks nach dem Laden von Web SDK-Code auf Ihrer Seite definieren, aber alle Hooks, die vor dem Laden der Seite ausgelöst wurden, werden nicht erfasst.

Wenn Sie Ihr Überwachungs-Hook-Objekt definieren, müssen Sie nur die Methoden definieren, für die Sie eine spezielle Logik definieren möchten.
Wenn Sie sich beispielsweise nur für onContentRendering interessieren, können Sie diese Methode einfach definieren. Sie müssen nicht alle Überwachungshooks gleichzeitig verwenden.

Sie können mehrere Überwachungs-Hook-Objekte definieren. Alle Objekte mit der angegebenen Methode werden aufgerufen, wenn das entsprechende Ereignis ausgelöst wird.

<!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>