Implementación Appcues + Turbolinks

Con la versión 4.53.0 del SDK y posteriores, Appcues ofrece un nuevo camino para las aplicaciones web que ejecutan los frameworks Turbolinks . Este documento detalla los pasos necesarios para implementar Appcues correctamente con este framework.

Ajuste de la configuración del script Appcues

Al incluir la propiedad customContainer en la ventana, el objeto "Configuración Appcues " le permitirá especificar dónde se cargará el contenido Appcues en su aplicación web. Esto le permite establecer un contenedor permanente que Turbolinks ignorará para que sus experiencias Appcues no se interrumpan.

<script>
  window.AppcuesSettings = {
    customContainer: '.appcues-wrapper'
  };
</script>
<script src="//fast.appcues.com/ACCOUNT_ID.js"></script>

Crear contenedor permanente Appcues

En su aplicación web, deberá crear una ubicación permanente para el contenedor de contenido Appcues . En nuestro ejemplo, usamos un div al final del cuerpo de la página de la aplicación.

<div data-turbolinks-permanent>
  <div class='appcues-wrapper'></div>
</div>

Crear una devolución de llamada de la página Appcues

Querrá crear una devolución de llamada que se inicialice después de la identificación Appcues para activar la llamada .page de Appcues en cada llamada de carga de turbolinks si no está viendo una "vista previa" en caché de la página:

document.addEventListener("turbolinks:load", function (e) {
    if (!document.documentElement.hasAttribute("data-turbolinks-preview")) {
      window.Appcues.page();
    }
});

¿Estás utilizando una biblioteca Turbolinks más nueva?

Un proceso de implementación similar se aplica a la última versión de Turbo, simplemente reemplace "turbolinks" con "turbo" en los nombres de propiedades y eventos.

<div data-turbo-permanent>
  <div class='appcues-wrapper'></div>
</div>

document.addEventListener("turbo:load", function (e) {
    if (!document.documentElement.hasAttribute("data-turbo-preview")) {
      window.Appcues.page();
    }
});