Überwachungs-Hooks für Web SDK

Adobe Experience Platform Web SDK enthält Überwachungs-Hooks, mit denen Sie verschiedene Systemereignisse überwachen können. Diese Tools sind nützlich, um eigene Debugging-Tools zu entwickeln und Web SDK-Protokolle zu erfassen.

Die Web SDK-Trigger übernehmen die Überwachungsfunktionen unabhängig davon, ob Sie „Debugging​ aktiviert ​.

onInstanceCreated onInstanceCreated

Diese Rückruffunktion wird ausgelöst, wenn Sie erfolgreich eine neue Web SDK-Instanz erstellt haben. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onInstanceConfigured onInstanceConfigured

Diese Rückruffunktion wird von der Web-SDK ausgelöst, wenn der configure erfolgreich aufgelöst wurde. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onBeforeCommand onBeforeCommand

Diese Rückruffunktion wird von Web SDK ausgelöst, bevor ein anderer Befehl ausgeführt wird. Mit dieser Funktion können Sie die Konfigurationsoptionen eines bestimmten Befehls abrufen. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onCommandResolved onCommandResolved

Diese Rückruffunktion wird ausgelöst, wenn Befehlszusagen aufgelöst werden. Sie können diese Funktion verwenden, um die Befehlsoptionen und das Ergebnis anzuzeigen. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onCommandRejected onCommandRejected

Diese Rückruffunktion wird ausgelöst, bevor eine Befehlszusage abgelehnt wird, und enthält Informationen über den Grund, warum der Befehl abgelehnt wurde. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onBeforeNetworkRequest onBeforeNetworkRequest

Diese Rückruffunktion wird ausgelöst, bevor eine Netzwerkanfrage ausgeführt wird. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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 Netzwerkanfrage fehlgeschlagen ist. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onBeforeLog onBeforeLog

Diese Rückruffunktion wird ausgelöst, bevor Web SDK etwas in der Konsole protokolliert. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

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

onContentRendering onContentRendering

Diese Rückruffunktion wird von der personalization-Komponente in verschiedenen Renderingphasen ausgelöst. Die Payload kann je nach status unterschiedlich sein. Siehe folgendes Beispiel für Details zu den Funktionsparametern.

 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 Überwachungs-Hooks bei Verwendung des NPM-Pakets specify-monitoring-npm

Wenn Sie Web SDK über das NPM-Paket verwenden, können Sie Überwachungs-Hooks in der createInstance 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

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

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

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

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 Ihnen beispielsweise nur onContentRendering wichtig ist, können Sie einfach diese Methode definieren. Sie müssen nicht alle Überwachungs-Hooks 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>