Guide Transmisión de eventos

La difusión de eventos permite a los desarrolladores web escuchar los eventos difundidos desde el widget Guide como la visualización de una plantilla o el clic en un punto de entrada. Los desarrolladores pueden entonces pasar los datos de los eventos a sistemas de registro de terceros, como una herramienta de informes analíticos de su elección. La difusión de eventos está pensada para personas responsables de la integración de Guide con un sitio web. Se requiere experiencia con tecnologías web front-end, como HTML, CSS y JavaScript.

Escucha de eventos

El siguiente ejemplo demuestra cómo escuchar el evento templateDisplayed en la página:

window.addEventListener("templateDisplayed", function(e) {console.info("Event type: " +  e.type + "  || Detail: " + JSON.stringify(e.detail));});

O bien, este es un ejemplo que incluye cargar Guide en una página y escuchar el evento templateDisplayed:

(function (i, s, o, r, g, v, a, m) {   
  g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;   
  i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i   [r].u = g; 
  a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
  a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m); 
})(window, document, 'script', 'cxone', '<LOADER-URL>');

cxone('init', '<BRAND-ID>');
cxone('guide', 'init', '<CHANNEL-ID>');

const guideEvents = ['templateDisplayed'
];
      
function handleEvent(event) {  
  console.log('Entire event:', event); 
  console.log('Event Detail property:', event.detail);
}
      
guideEvents.forEach(eventType => {
  window.addEventListener(eventType, handleEvent);
});

Estos son los eventos de Guide:

Eventos de la plantilla	eventos de oferta proactiva
templateDisplayed	proactiveOfferDisplayed
menuOpened	proactiveOfferSuccessful
menuClosed	proactiveOfferDeclined
entrypointOpened
entrypointClosed
pcqDisplayed
pcqFieldPopulated
pcqSubmitted

Carga de eventos de Guide

Los eventos Guide tienen las propiedades de un CustomEvent. La carga siempre incluye:

• type - El tipo de evento, por ejemplo, templateDisplayed o menuOpened.

• detalle - Una estructura con propiedades relevantes para el evento.

Por ejemplo:

templateDisplayed

Utilice el evento templateDisplayed para vigilar cuándo aparece una plantilla en una página. La plantilla puede ser una plantilla de canal único, una plantilla de canales múltiples o una plantilla de portal de clientes.

El evento devuelve lo siguiente:

• tipo configurado como templateDisplayed.

• detalle carga, que es específica del tipo de plantilla que se muestra.

menuOpened

Utilice el evento menuOpened para vigilar cuándo se hace clic en el botón de menú o cuándo se muestra un menú al recargar la página. Este evento pertenece a múltiples plantillas de canales y plantillas de portales de clientes.

El evento devuelve lo siguiente:

• tipo configurado como menuOpened.

• detalle carga, que es específica del tipo de menú abierto. Las opciones son:

menuClosed

Utilice el evento menuClosed para vigilar cuándo se hace clic en el botón para ocultar el portal del cliente o la plantilla de canales múltiples.

El evento devuelve lo siguiente:

• tipo configurado como menuClosed.

• detalle carga, que es específica del tipo de menú cerrado. Las opciones son:

entrypointOpened

Utilice el evento entrypointOpened para vigilar cuándo se abre un punto de entrada. Se considera que un punto de entrada está abierto cuando un visitante hace clic en un botón de punto de entrada o cuando se muestra un punto de entrada al actualizar la página.

En las plantillas de portal de clientes, lo siguiente se considera que abre un punto de entrada:

• Cuando se hace clic en el botón Guide después de que previamente se abrió y minimizó un punto de entrada.
• El visitante hace clic en un artículo para leerlo.
• El visitante hace clic en el enlace Más artículos.
• El visitante realiza una búsqueda en la base de conocimientos.
• El visitante hace clic en el botón para continuar el chat.

El evento devuelve lo siguiente:

• tipo configurado como entrypointOpened.

• detalle carga para el punto de entrada

entrypointClosed

Utilice el evento entrypointClosed para vigilar cuándo se cierra un punto de entrada. Se cierra un punto de entrada cuando se descarta el canal definido en el punto de entrada.

En el caso de un portal de clientes, si cambia los botones del punto de entrada, se cierra el punto de entrada anterior antes de que se muestre el nuevo.

El evento devuelve lo siguiente:

• tipo configurado como entrypointOpened.

• detalle carga para el punto de entrada

pcqDisplayed

Utilice el evento pcqDisplayed para vigilar cuándo se muestra una encuesta previa al contacto.

El evento devuelve lo siguiente:

pcqFieldPopulated

Utilice el evento pcqFieldPopulated para vigilar cuándo se edita un campo en una encuesta previa al contacto. Tenga en cuenta que este evento no se transmite si un visitante elimina un valor de un campo y el campo está en blanco.

El evento devuelve lo siguiente:

pcqSubmitted

Utilice el evento pcqSubmitted para vigilar cuándo el visitante envía exitosamente una encuesta previa al contacto.

El evento devuelve lo siguiente:

proactiveOfferDisplayed

Utilice el evento proactiveOfferDisplayed para vigilar cuándo se muestra una oferta proactiva en una página.

El evento devuelve lo siguiente:

proactiveOfferSuccessful

Utilice el evento proactiveOfferSuccessful para vigilar cuándo es exitosa una oferta proactiva. Una oferta proactiva tiene éxito cuando el visitante hace clic en un botón de llamada a la acción. En el caso de un botón de llamada a la acción de chat, el visitante debe iniciar el chat. En el caso del correo electrónico, el visitante debe enviar un mensaje de correo electrónico.

El evento devuelve lo siguiente:

proactiveOfferDeclined

Utilice el evento proactiveOfferDeclined para vigilar cuándo se rechaza una oferta proactiva en una página. Una oferta proactiva se rechaza cuando el visitante hace clic en un botón de llamada a la acción definido como Rechazado o hace clic en el ícono de cierre X en la esquina superior derecha de la oferta proactiva.

El evento devuelve

Detalles del botón en Cargas

Payloads for template.buttons

La carga varía según el tipo de canal al que se hace referencia en una plantilla.

Cargas para templateButton

Detalles sobre los botones de punto de entrada (templateButton).

Tipos de acciones para ofertas proactivas

El tipo de acción de la oferta proactiva puede ser iniciar un chat, hacer clic en un punto de entrada, hacer clic en un artículo o cerrar la oferta proactiva.

O si el visitante cierra la oferta proactiva con el botón X.