Ganchos de monitoramento para o SDK da Web

O Adobe Experience Platform Web SDK inclui ganchos de monitoramento que podem ser usados para monitorar vários eventos do sistema. Essas ferramentas são úteis para desenvolver suas próprias ferramentas de depuração e capturar logs do SDK da Web.

O SDK da Web aciona as funções de monitoramento independentemente de você ter habilitado a depuração.

onInstanceCreated onInstanceCreated

Essa função de retorno de chamada é disparada quando você cria com êxito uma nova instância do SDK da Web. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onInstanceConfigured onInstanceConfigured

Esta função de retorno de chamada é disparada pelo SDK da Web quando o comando configure é resolvido com êxito. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onBeforeCommand onBeforeCommand

Essa função de retorno de chamada é acionada pelo SDK da Web antes da execução de qualquer outro comando. Você pode usar essa função para recuperar as opções de configuração de um comando específico. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onCommandResolved onCommandResolved

Essa função de retorno de chamada é acionada ao resolver promessas de comando. Você pode usar essa função para ver as opções de comando e o resultado. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onCommandRejected onCommandRejected

Essa função de retorno de chamada é acionada antes da rejeição de uma promessa de comando e contém informações sobre o motivo da rejeição do comando. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onBeforeNetworkRequest onBeforeNetworkRequest

Essa função de retorno de chamada é disparada antes da execução de uma solicitação de rede. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onNetworkResponse onNetworkResponse

Essa função de retorno de chamada é acionada quando o navegador recebe uma resposta. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onNetworkError onNetworkError

Essa função de retorno de chamada é disparada quando a solicitação de rede falha. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onBeforeLog onBeforeLog

Essa função de retorno de chamada é acionada antes que o SDK da Web registre qualquer item no console. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onContentRendering onContentRendering

Esta função de retorno de chamada é disparada pelo componente personalization em vários estágios de renderização. A carga pode diferir, dependendo do parâmetro status. Consulte a amostra abaixo para obter detalhes sobre os parâmetros da função.

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

onContentHiding onContentHiding

Essa função de retorno de chamada é acionada quando um estilo pré-ocultação é aplicado ou removido.

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

Como especificar ganchos de monitoramento ao usar o pacote NPM specify-monitoris-npm

Se você estiver usando o SDK da Web por meio do pacote NPM, poderá especificar ganchos de monitoramento na função createInstasnce, conforme mostrado abaixo.

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

Exemplo example

O SDK da Web procura uma matriz de objetos em uma variável global chamada __alloyMonitors.

Para capturar todos os eventos do SDK da Web, você deve definir os ganchos de monitoramento antes que o código do SDK da Web seja carregado na página. Cada método de monitoramento captura um evento do SDK da Web.

Você pode definir trechos de monitoramento após o carregamento de código do SDK da Web na sua página, mas todos os trechos que foram acionados antes do carregamento da página não serão capturados.

Ao definir seu objeto de gancho de monitoramento, você só precisa definir os métodos para os quais deseja definir uma lógica especial.
Por exemplo, se você só se importa com onContentRendering, pode apenas definir esse método. Não é necessário usar todos os ganchos de monitoramento de uma só vez.

Você pode definir vários objetos de gancho de monitoramento. Todos os objetos com o método fornecido serão chamados quando o evento correspondente for acionado.

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