US English (US)
ES Spanish

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Integration Hub
  • Contact Us
Spanish
US English (US)
ES Spanish
  • Docs home
  • Instalación y desarrolladores
  • Solución de problemas

Uso de Appcues con Turbolinks

Modificar la implementación Appcues para que sea compatible con aplicaciones que utilizan el marco Turbo

Updated at August 1st, 2025

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Home

  • Instalación y desarrolladores

    • Experiencias web

      • Experiencias móviles

        • Flujos de trabajo

          • Análisis y datos

            • Gestión de cuentas

              • Mejores prácticas

                • Integraciones

                  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.

                  ¿No está seguro de qué versión tiene su SDK Appcues ?

                  ¡Abre la consola de tu navegador y ejecuta Appcues .settings() para descubrirlo!

                  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();
                      }
                  });

                  Was this article helpful?

                  Yes
                  No
                  Give feedback about this article

                  Related Articles

                  • Pruebas de instalación/depuración
                  • Uso de Appcues con RequireJS (Desarrollador)
                  • Prueba de Appcues en una aplicación web encapsulada
                  • Uso de Appcues con iFrames
                  • Uso de Appcues con marcos Shadow DOM
                  Appcues logo

                  Product

                  Why Appcues How it works Integrations Security Pricing What's new

                  Use cases

                  Appcues Integration Hub User Onboarding Software Feature Adoption Software NPS & Surveys Announcements Insights Mobile Adoption

                  Company

                  About
                  Careers

                  Support

                  Developer Docs Contact

                  Resources

                  The Appcues Blog Product Adoption Academy GoodUX Case studies Webinar Series Made with Appcues Appcues University

                  Follow us

                  Facebook icon Twitter icon grey Linkedin icon Instagram icon
                  © 2022 Appcues. All rights reserved.
                  Security Terms of Service Privacy Policy

                  Knowledge Base Software powered by Helpjuice

                  Expand