Monitorar ganchos do Web SDK

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 Web SDK.

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

onInstanceCreated onInstanceCreated

Essa função de retorno de chamada é disparada quando você cria com êxito uma nova instância do Web SDK. 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 Web SDK 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 Web SDK 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 Web SDK 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-monitoring-npm

Se você estiver usando o Web SDK por meio do pacote NPM, poderá especificar ganchos de monitoramento na função createInstance, 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 Web SDK procura uma matriz de objetos em uma variável global chamada __alloyMonitors.

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

Você pode definir trechos de monitoramento após o carregamento de código do Web SDK 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>