El SDK de Javascript Appcues proporciona una función que le permite escribir código personalizado que puede activarse cuando ocurren eventos específicos relacionados con Appcues en el navegador.

Definición de función

on(nombreEvento, funciónDevoluciónDeCall, [contexto])

La función on toma tres parámetros (uno opcional):

1. eventName: Cadena

El nombre del evento a escuchar. Puede ser cualquiera de nuestros eventos nativos, incluyendo:

• flujo_iniciado
• flujo_completado
• flujo_omitido
• paso_iniciado
• paso_completado
• paso omitido
• paso_interactuado
• formulario enviado
• campo de formulario enviado
• nps
• cualquier otro evento que se encuentre en nuestra Referencia de eventos Appcues o Referencia de eventos de flujo
• todo

También se pueden enviar eventos personalizados click-to-track siempre que tenga activada la función de transmisión de eventos en su cuenta. Al crear un receptor para un evento click-to-track específico, simplemente use el nombre del evento como en este código:

Appcues.on('My Custom Event', function(e) {console.log(e)})

El valor "all" registrará su función de escucha para todos los eventos del cliente de Appcues . Para obtener una referencia completa de nuestros eventos del cliente, consulte la Referencia de eventos Appcues y la Referencia de eventos del cliente.

2. callbackFn: Función

La función que se llamará cuando ocurra el evento especificado.

Al registrarse para un evento específico, a esta función se le pasan los siguientes parámetros:

• evento: Objeto: el objeto de evento: consulte Referencia de eventos Appcues y Referencia de eventos del lado del cliente para obtener una definición completa de los objetos de evento.

Al registrarse para todos los eventos utilizando el valor "todos", mencionado anteriormente, a esta función se le pasan los siguientes parámetros:

• eventName : cadena: el nombre del evento específico para esta llamada en particular (uno de los valores de la lista anterior)
• evento : Objeto: el objeto de evento: consulte Referencia de eventos Appcues y Referencia de eventos del lado del cliente para obtener una definición completa de los objetos de evento.

Un ejemplo simple para escuchar todos los eventos Appcues y registrarlos en la consola podría verse así:

Appcues.on("all", function(e, a) {
    console.log(e); // logs the event name
    console.log(a); // logs the event object
})

3. contexto: Objeto

(opcional, poco común): el contexto de Javascript en el que se llamará la función de devolución de llamada. Esto se usaría para especificar un contexto "this" dentro de la función de devolución de llamada.

Ejemplo de uso

Supongamos que quiero acceder a un punto final REST en uno de mis servidores con la respuesta del campo de formulario que se origina en un flujo Appcues . Para simplificar, asumiremos una solicitud GET y usaremos la API Fetch estándar.

Appcues.on("form_field_submitted", function(eventObject) {

    // We'll narrow this down to a particular step, so we're only handling
    // the submission for a particular form field.
    if (eventObject.stepId === "-L7634-Gsu4Q1HfEG-8-") {
       const responseValue = eventObject.interaction.value;
       const encodedResponseData = encodeURIComponent(responseValue);
       const url = "https://example.com/form?data=" + encodedResponseData; 
       fetch(url)
         .then(function(response) {
           if(response.ok) {
              console.log("Successfully sent a form response");
          }
          else {
              console.log("Problem sending form response", response.status);
          }
         })
         .catch(function(error) {
          console.log("Error sending form response", error);
         });
  }
});

Este ejemplo sirve principalmente para ilustrar cómo registrar y gestionar un evento Appcues . La forma en que envíes estos datos a tu servidor (o hagas lo que quieras con los datos del evento) depende de ti. ¡Que te diviertas!