Las aplicaciones de página única ( SPA ) solo activan la carga completa de la página al cargarse por primera vez. De lo contrario, navegar por las páginas de la aplicación puede provocar un cambio en la URL, pero no activa la carga de la página. Hay dos maneras de notificar Appcues sobre estos cambios de página para que Appcues determinar el contenido correcto que se mostrará al usuario final:

1. Appcues puede detectar automáticamente los cambios de página. Tenga en cuenta que esta es la opción predeterminada y no es necesario realizar ninguna acción si siguió nuestra guía de instalación después del 23 de mayo de 2022.
2. Se puede notificar manualmente Appcues sobre cambios de página a través de Llamada .page() Appcues .

Detección automática de cambios de página

Nota: Puede ignorar esta sección si siguió nuestra guía de instalación después del 23 de mayo de 2022. Para habilitar la detección automática de cambios de página, solo necesita configurar "enableURLDetection" como verdadero en la ventana del objeto de configuración de Appcues . El siguiente código debe colocarse justo encima de la etiqueta de script que carga el script Appcues :

<script type="text/javascript">
  window.AppcuesSettings = {
    enableURLDetection: true
  };
</script>
<script src="//fast.appcues.com/ACCOUNT_ID.js"></script>

Y listo. Con esta configuración activada, Appcues detectará automáticamente los cambios de página.

Instrucciones del manual de React y React-router

Puede haber casos en los que no se desee la detección automática de cambios de página . Si desea desactivar esta opción, configure la opción enableURLDetection como "false" en el fragmento anterior o elimínela por completo. A continuación, encontrará instrucciones sobre cómo instalarla según su SPA . Para obtener instrucciones detalladas sobre la instalación de Appcues en React, Angular, Vue y otros frameworks de aplicaciones, consulte la documentación de instalación de frameworks en Appcues Studio.

Llamada .identify() de Appcues .
En su aplicación, lo más probable es que tenga algún tipo de autenticación de usuario donde se identifique a sus usuarios. Si bien puede incluir... Appcues .identify() a tu archivo HTML . Para evitar la sobreidentificación de los usuarios, te recomendamos llamarlo cuando se produzca la autenticación de usuarios en tu aplicación. Siempre debe haber una llamada inicial a identify() al cargar la aplicación.

Aquí hay un ejemplo con autenticación de Firebase:

import React, {Component} from 'react';
import firebase from 'firebase';

class App extends Component {

  componentWillMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        
        // now that we have a reference to the user, we can identify them with Appcues
        window.Appcues.identify(user.uid, {
          email: user.email,
          displayName: user.displayName
        });
        
      }
    })
  }

  render() {
    // render function
  }
}

Llamada .page() Appcues .
Puedes llamar a la función Appcues .page() para Appcues cuando estés en una nueva página o vista. Esto hace que Appcues revise la página actual y las propiedades del usuario y compruebe si hay contenido que deba mostrarse. Por lo tanto, lo ideal en una aplicación React es llamar a Appcues .page() cada vez que haya un evento de navegación o una nueva vista.

¿Cómo se ve esto en React? Bueno, si usas react -router v3 , podrías usar el evento onUpdate:

<Router onUpdate={() => window.Appcues.page()}

Si está usando la versión v4 o superior, entonces puede usar useEffect para escuchar los cambios de ubicación:

 import { useLocation } from “react-router-dom”;
 import { useEffect } from “react”;

 let location = useLocation();

 useEffect(() => {
   window.Appcues.page()
 }, [location]);

Instrucciones del manual de AngularJS

Llamada .page() Appcues .
Puedes llamar a la función Appcues .page() para avisar Appcues cuando estés en una nueva página/vista. Esto hace que Appcues revise la página actual y las propiedades del usuario y compruebe si hay contenido que deba mostrarse. Por lo tanto, lo ideal en una aplicación Angular sería llamar a Appcues .page() cada vez que haya un evento de navegación o una nueva vista.

¿Cómo se ve esto en Angular? Si usas el enrutador ui de angular , podrías usar el evento $viewContentLoaded , ya que parece que se activaría después de que el estado cambie y estés en una nueva página de tu aplicación. Sin embargo, este evento se activa antes de que se actualice la URL . Appcues comprobará la URL de la página anterior, no la que acabas de visitar. Una solución que hemos encontrado es usar el evento $locationChangeSuccess , que se emite después de cambiar una URL, según la documentación . Esto garantizará que la URL que Appcues comprueba sea la correcta (es decir, la actual).

Para depurar la llamada .page Appcues en aplicaciones de una sola página, publique algo solo con su `user_ID` y compruebe si el flujo se muestra automáticamente. Si necesita actualizar la página para que aparezca Appcues , significa que está en el lugar incorrecto. Avísenos y podemos revisarlo. Consulte nuestra documentación de pruebas para obtener más información sobre cómo realizar una prueba restrictiva de contenido activo.

¡Aquí hay un ejemplo!

// For example, in your App.js:
  angular.module('yourapp').run(function($rootScope, $window) {
   $rootScope.$on('$locationChangeSuccess', function() {
       if ($window.Appcues) {
          $window.Appcues.page();
        }
     });
   });

Instrucciones manuales de Angular 2, 4 y 5

Llamada .page() Appcues .
Puedes llamar a la función Appcues .page() para Appcues cuando estés en una nueva página o vista. Esto hace que Appcues revise la página actual y las propiedades del usuario y compruebe si hay contenido que deba mostrarse. Idealmente, llamarías a Appcues .page() cada vez que haya un evento de navegación o una nueva vista.

¿Cómo se ve esto en Angular 2, 4 y 5? Sugerimos usar el evento NavigationEnd para activarlo. Appcues .page() :

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      window.Appcues && window.Appcues.page();
    }
  });

Nota: Si usa Typescript y recibe el error "La propiedad ' Appcues ' no existe en el tipo 'Window & typeof globalThis '", deberá asegurarse de que Appcues esté declarada como variable global. Una forma de hacerlo es con el siguiente fragmento:

declare global {
  interface Window { Appcues: any; }
}

Casos especiales en los que puede no ser deseable la detección automática de cambio de página

Los sitios que usan parámetros de consulta para actualizar el estado de la página, pero no para indicar páginas independientes, podrían no querer habilitar la detección automática de cambios de página. Esto provocaría que los cambios de página se enviaran a Appcues con cada cambio de parámetro de consulta, lo cual podría no ser el comportamiento deseado. Por ejemplo, una página que usa parámetros de consulta para indicar un filtro de búsqueda podría actualizar su parámetro de búsqueda con cada pulsación de tecla (p. ej., https://app.example.com/results?search=test ). Aunque la página sea la misma, la URL ha cambiado para incluir el parámetro de consulta de búsqueda. En este caso, Appcues lo consideraría un nuevo cambio de página, detendría cualquier experiencia en curso y volvería a buscar contenido para mostrar al usuario final. Para gestionar estos casos, siga las instrucciones anteriores para notificar manualmente Appcues sobre cambios de página.