Monitoraggio degli hook per Web SDK

Adobe Experience Platform Web SDK include hook di monitoraggio utilizzabili per monitorare vari eventi di sistema. Questi strumenti sono utili per sviluppare strumenti di debug personalizzati e per acquisire i registri dell’SDK web.

Web SDK attiva le funzioni di monitoraggio indipendentemente dal fatto che sia stato abilitato il debug.

onInstanceCreated onInstanceCreated

Questa funzione di callback viene attivata quando è stata creata correttamente una nuova istanza di Web SDK. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onInstanceConfigured onInstanceConfigured

Questa funzione di callback viene attivata dall'SDK Web quando il comando configure è stato risolto. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onBeforeCommand onBeforeCommand

Questa funzione di callback viene attivata da Web SDK prima dell'esecuzione di qualsiasi altro comando. È possibile utilizzare questa funzione per recuperare le opzioni di configurazione di un comando specifico. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onCommandResolved onCommandResolved

Questa funzione di callback viene attivata quando si risolvono le promesse di comando. È possibile utilizzare questa funzione per visualizzare le opzioni e i risultati del comando. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onCommandRejected onCommandRejected

Questa funzione di callback viene attivata prima che una promessa di comando venga rifiutata e contiene informazioni sul motivo per cui il comando è stato rifiutato. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onBeforeNetworkRequest onBeforeNetworkRequest

Questa funzione di callback viene attivata prima dell'esecuzione di una richiesta di rete. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onNetworkResponse onNetworkResponse

Questa funzione di callback viene attivata quando il browser riceve una risposta. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onNetworkError onNetworkError

Questa funzione di callback viene attivata quando la richiesta di rete non riesce. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onBeforeLog onBeforeLog

Questa funzione di callback viene attivata prima che l’SDK web registri qualsiasi elemento nella console. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onContentRendering onContentRendering

Questa funzione di callback viene attivata dal componente personalization in varie fasi del rendering. Il payload può variare a seconda del parametro status. Per informazioni dettagliate sui parametri della funzione, consulta l’esempio seguente.

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

onContentHiding onContentHiding

Questa funzione di callback viene attivata quando viene applicato o rimosso uno stile di pre-hiding.

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

Specificare gli hook di monitoraggio quando si utilizza il pacchetto NPM specify-monitoris-npm

Se si utilizza Web SDK tramite il pacchetto NPM, è possibile specificare hook di monitoraggio nella funzione createInstasnce, come illustrato di seguito.

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

Esempio example

Web SDK cerca un array di oggetti in una variabile globale denominata __alloyMonitors.

Per acquisire tutti gli eventi Web SDK, è necessario definire gli hook di monitoraggio prima che il codice Web SDK venga caricato sulla pagina. Ogni metodo di monitoraggio acquisisce un evento Web SDK.

Puoi definire gli hook di monitoraggio dopo il caricamento del codice Web SDK sulla pagina, ma gli hook attivati prima del caricamento della pagina non verranno acquisiti.

Quando definisci l’oggetto hook di monitoraggio, devi solo definire i metodi per i quali desideri definire una logica speciale.
Ad esempio, se ti interessa solo onContentRendering, puoi semplicemente definire tale metodo. Non è necessario utilizzare tutti gli hook di monitoraggio contemporaneamente.

È possibile definire più oggetti hook di monitoraggio. Tutti gli oggetti con il metodo specificato verranno chiamati quando viene attivato l'evento corrispondente.

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