Documentación Experience Platform Guía del SDK web

Monitorización de vínculos para SDK web

Última actualización: 31 de octubre de 2024

Temas:

Creado para:

Desarrollador

El SDK web de Adobe Experience Platform incluye vínculos de monitorización que puede utilizar para monitorizar varios eventos del sistema. Estas herramientas son útiles para desarrollar sus propias herramientas de depuración y capturar registros del SDK web.

El SDK web déclencheur las funciones de supervisión independientemente de si ha habilitado la depuración.

`onInstanceCreated`

Esta función de llamada de retorno se activa cuando se crea correctamente una nueva instancia del SDK web. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.instance`	Función	La función de instancia utilizada para llamar a los comandos del SDK web.

`onInstanceConfigured`

El SDK web activa esta función de devolución de llamada cuando el comando configure se resuelve correctamente. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.config`	Objeto	Objeto que contiene la configuración utilizada para la instancia del SDK web. Estas son las opciones pasadas al comando `configure` con todos los valores predeterminados agregados.

`onBeforeCommand`

El SDK web activa esta función de llamada de retorno antes de ejecutar cualquier otro comando. Puede utilizar esta función para recuperar las opciones de configuración de un comando específico. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.commandName`	Cadena	Nombre del comando del SDK web antes del cual se ejecuta esta función.
`data.options`	Objeto	Objeto que contiene las opciones pasadas al comando SDK web.

`onCommandResolved`

Esta función de llamada de retorno se activa al resolver las promesas de comandos. Puede utilizar esta función para ver las opciones y el resultado del comando. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.commandName`	Cadena	Nombre del comando del SDK web ejecutado.
`data.options`	Objeto	Objeto que contiene las opciones pasadas al comando SDK web.
`data.result`	Objeto	Objeto que contiene el resultado del comando SDK web.

`onCommandRejected`

Esta función de llamada de retorno se activa antes de que se rechace una promesa de comando y contiene información sobre el motivo por el que se rechazó el comando. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.commandName`	Cadena	Nombre del comando del SDK web ejecutado.
`data.options`	Objeto	Objeto que contiene las opciones pasadas al comando SDK web.
`data.error`	Objeto	Objeto que contiene el mensaje de error devuelto por la llamada de red del explorador (`fetch` en la mayoría de los casos), junto con el motivo por el que se rechazó el comando.

`onBeforeNetworkRequest`

Esta función de llamada de retorno se activa antes de que se ejecute una solicitud de red. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.requestId`	Cadena	`requestId` generado por el SDK web para habilitar la depuración.
`data.url`	Cadena	La dirección URL solicitada.
`data.payload`	Objeto	Objeto de carga de solicitud de red que se convertirá al formato JSON y se enviará en el cuerpo de la solicitud, a través de un método `POST`.

`onNetworkResponse`

Esta función de llamada de retorno se activa cuando el explorador recibe una respuesta. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.requestId`	Cadena	`requestId` generado por el SDK web para habilitar la depuración.
`data.url`	Cadena	La dirección URL solicitada.
`data.payload`	Objeto	El objeto de carga útil que se convertirá al formato JSON y se enviará en el cuerpo de la solicitud, a través de un método `POST`.
`data.body`	Cadena	El cuerpo de respuesta en formato de cadena.
`data.parsedBody`	Objeto	Objeto que contiene el cuerpo de respuesta analizado. Si se produce un error al analizar el cuerpo de respuesta, este parámetro es indefinido.
`data.status`	Cadena	El código de respuesta en formato entero.
`data.retriesAttempted`	Entero	El número de reintentos realizados al enviar la solicitud. Cero significa que la solicitud se realizó correctamente en el primer intento.

`onNetworkError`

Esta función de llamada de retorno se activa cuando falla la solicitud de red. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.requestId`	Cadena	`requestId` generado por el SDK web para habilitar la depuración.
`data.url`	Cadena	La dirección URL solicitada.
`data.payload`	Objeto	El objeto de carga útil que se convertirá al formato JSON y se enviará en el cuerpo de la solicitud, a través de un método `POST`.
`data.error`	Objeto	Objeto que contiene el mensaje de error devuelto por la llamada de red del explorador (`fetch` en la mayoría de los casos), junto con el motivo por el que se rechazó el comando.

`onBeforeLog`

Esta función de llamada de retorno se activa antes de que el SDK web registre algo en la consola. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.componentName`	Cadena	Nombre del componente que generó el mensaje de registro.
`data.level`	Cadena	El nivel de registro. Niveles compatibles: `log`, `info`, `warn`, `error`.
`data.arguments`	Matriz de cadenas	Los argumentos del mensaje de registro.

`onContentRendering`

El componente personalization activa esta función de llamada de retorno en varias fases de la representación. La carga útil puede variar según el parámetro status. Consulte el ejemplo siguiente para obtener más información sobre los parámetros de función.

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

Parámetro	Tipo	Descripción
`data.instanceName`	Cadena	Nombre de la variable global donde se almacena la instancia del SDK web.
`data.componentName`	Cadena	Nombre del componente que generó el mensaje de registro.
`data.payload`	Objeto	El objeto de carga útil que se convertirá al formato JSON y se enviará en el cuerpo de la solicitud, a través de un método `POST`.
`data.status`	Cadena	El componente `personalization` notifica al SDK web del estado de la representación. Valores compatibles: `rendering-started`: indica que el SDK web está a punto de procesar propuestas. Antes de que el SDK web empiece a procesar una vista o un ámbito de decisión, en el objeto `data` puede ver las propuestas que están a punto de ser representadas por el componente `personalization` y el nombre del ámbito. `no-offers`: indica que no se recibió carga útil para los parámetros solicitados. `rendering-failed`: indica que el SDK web no pudo procesar una propuesta. `rendering-succeeded`: indica que se ha completado el procesamiento para un ámbito de decisión. `rendering-redirect`: indica que el SDK web procesará una propuesta de redirección.

`onContentHiding`

Esta función de llamada de retorno se activa cuando se aplica o elimina un estilo de ocultamiento previo.

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

Parámetro Tipo Descripción

data.instanceName Cadena Nombre de la variable global donde se almacena la instancia del SDK web.

data.componentName Cadena Nombre del componente que generó el mensaje de registro.

data.status

Cadena

El componente personalization notifica al SDK web del estado de la representación. Valores compatibles:

hide-containers
show-containers

Cómo especificar los enlaces de monitorización al utilizar el paquete NPM

Si utiliza el SDK web a través del paquete NPM, puede especificar los vínculos de supervisión en la función createInstasnce, como se muestra a continuación.

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

Ejemplo

El SDK web busca una matriz de objetos en una variable global llamada __alloyMonitors.

Para capturar todos los eventos del SDK web, debe definir los vínculos de monitorización antes de cargar el código del SDK web en la página. Cada método de monitorización captura un evento de SDK web.

Puede definir los vínculos de supervisión después de la carga de código del SDK web en su página, pero los vínculos que se hayan activado antes de la carga de la página no se capturarán.

Al definir el objeto de vínculo de monitorización, solo necesita definir los métodos para los que desea definir una lógica especial.
Por ejemplo, si solo le importa onContentRendering, puede definir ese método. No es necesario utilizar todos los ganchos de monitorización a la vez.

Puede definir varios objetos de enlace de monitorización. Se llama a todos los objetos con el método dado cuando se activa el evento correspondiente.

TIP

Consulte a continuación una página de ejemplo con todos los enlaces de monitorización implementados.

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

recommendation-more-help