Modèle CSTC : Vue de page artificielle

Cela s'applique si votre site web entier (ou un flux/assistant spécifique) est une application à page unique qui utilise des changements d'historique pour modifier l'URL en conséquence lorsque les utilisateurs passent entre les différentes pages/étapes.

Déclencheur recommandé :

• Changement d'historique (sauf dans de rares cas où le site utilise des changements de hachage (identifiés lorsque l'URL a un signe de hachage (#) et la partie de l'URL qui change est après le signe de hachage)).
  • Notez que les Variables Personnalisées ne sont actuellement pas disponibles avec le déclencheur Changement d'historique.
• Événements de changement d'URL : changement vers popstate, pushState à moins qu'ils ne soient déjà sélectionnés par défaut. C'est la configuration recommandée dans 95 % des cas.
• Le déclencheur se déclenche lorsque : Toutes les pages. À moins qu'il n'y ait une raison spécifique de le limiter à des URL spécifiques uniquement, auquel cas vous pouvez utiliser la condition de déclencheur “Personnalisé”.

Modification de l'URL

Typiquement, vous conserverez la nouvelle URL réelle sans aucune modification. Par conséquent, dans le champ de saisie du chemin, vous voudrez utiliser la syntaxe suivante (copier-coller et noter les accolades) :

${window.location.pathname}${window.location.hash.replace('#', '?__')}

Directives de test et de dépannage

• Vérifiez votre “chemin heureux” : Suivez le “chemin heureux” sur votre site web pour vous assurer que les APVs se déclenchent là où et comme prévu.
• Vérifiez les “déclencheurs doubles” : Par exemple, lors du changement de variantes de produit sur les pages de description de produit, ou lors du passage à une page donnée comme le Checkout. (Sélectionner uniquement popstate et pushState peut généralement atténuer cela).
• APVs inattendus : Si vous repérez des APVs non justifiés qui se déclenchent, cela pourrait être causé par un changement d'historique replaceState se déclenchant en même temps que pushState (sur le site web). Essayez de modifier les eventslisteners de changement d'URL dans le déclencheur Changement d'historique pour exclure replaceState (du menu déroulant) et testez à nouveau. Cela résout généralement le problème.
• Sites web avec Checkouts : Confirmez comment les APVs sont déclenchés au fur et à mesure que vous progressez à travers les étapes d'expédition, de facturation et autres. N'oubliez pas de vérifier ce qui se passe lorsque vous éditez (revenez) aux étapes précédemment remplies (c'est-à-dire si les APVs se déclenchent ou non, etc.).
• APVs se déclenchant plusieurs fois : Si vous rencontrez une situation où le passage entre (certaines) pages fait que l'APV se déclenche plus d'une fois, et que vous avez écarté replaceState comme responsable, alors vous pourriez essayer d'activer l'option “Debouncing” et d'ajuster le délai à n'importe quel nombre jusqu'à 500 millisecondes.
• Révision des changements d'historique sur votre site web : Si vous voulez voir par vous-même quels changements d'historique se produisent sur votre site web, vous pouvez exécuter le code suivant dans la console et regarder la sortie console.warn (en jaune) dans la console :

(function(){var oldpushState=window['history']['pushState'];window['history']['pushState']=function(e){console.warn('pushState détecté');return oldpushState.apply(this,arguments);};var oldreplaceState=window['history']['replaceState'];window['history']['replaceState']=function(e){console.warn('replaceState détecté');return oldreplaceState.apply(this,arguments);}})();

La sortie sera "pushState détecté"  ou "replaceState détecté", ou les deux. 

Si le SPA n'a pas de changements d'URL lorsque vous passez entre les pages/étapes, alors simplement avoir des APVs n'est pas suffisant, car vous aurez toujours besoin d'un moyen de les distinguer dans les mappages Contentsquare.

Alternatives aux Variables Personnalisées (CVAR) :

• Jusqu'à ce que les CVAR soient disponibles bientôt dans le snippet APV, nous recommandons de modifier l'URL qui nous est transmise en ajoutant une valeur unique à l'URL.
• Cela pourrait être manuel si c'est un flux relativement limité, et que vous créez chaque déclencheur APV individuellement en fonction d'un caractère unique de chaque étape/page (par exemple, un élément HTML ajouté dynamiquement qui n'existe sur aucune autre page/étape).
• Par exemple, vous pourriez utiliser cette syntaxe dans le champ Path (où /step1 sera ajouté à la fin de l'URL réelle) comme ceci : ${window.location.pathname}/step1
• Si le flux en question a quelque chose sur la page qui désigne chaque étape (par exemple, un widget de fil d'Ariane), vous pourriez envisager d'ajouter son texte à l'étape et de le rendre dynamique en utilisant l'interpolation, par exemple (où div.step-box.active est le sélecteur CSS qui contient le texte du fil d'Ariane) : ${window.location.pathname}/${document.querySelector("div.step-box.active").textContent}

Déclencheurs Recommandés :

Bien que vous puissiez théoriquement utiliser presque n'importe quel déclencheur, typiquement, dans une telle situation, vos meilleures options sont les déclencheurs Insertion d'Élément, Élément Devient Visible ou Suppression d'Élément. La première chose que vous voudriez faire est de déterminer comment le SPA est construit - si les étapes (ou du moins leurs conteneurs parents supérieurs) sont préchargées, si leur visibilité est basculée lorsque vous passez entre les étapes, ou si le contenu est généré et détruit dynamiquement chaque fois que vous passez entre les étapes.

• Si chaque étape est ajoutée/détruite dynamiquement, alors le déclencheur Insertion d'Élément est probablement votre meilleur choix.
• Si les étapes du SPA sont préchargées, alors vous voudrez utiliser le déclencheur Élément Devient Visible de manière similaire.

Cependant, vous devez garder à l'esprit ce qui suit pour les deux déclencheurs :

• • Pour utiliser le déclencheur Element Insertion, vous devez d'abord identifier un élément sur la page qui 1) n'existe pas avant de passer à l'étape pour laquelle vous souhaitez déclencher l'APV, 2) est ajouté dynamiquement lorsque vous y accédez et 3) n'existe pas sur une autre étape/page.
  • Si vous configurez votre déclencheur Element Insertion pour se déclencher plusieurs fois par vue de page (à chaque fois que l'élément en question est ajouté à la page), faites attention à tout déclenchement positif erroné lors des tests.
  • Lors des tests, assurez-vous de valider que les APV se déclenchent non seulement en montant dans le flux mais aussi en avant et en arrière.
  • Le déclencheur Element Insertion lui-même est simple à configurer - vous avez juste besoin du sélecteur CSS pour l'élément discuté ci-dessus et de définir où vous souhaitez qu'il se déclenche (si le SPA sans changements d'URL est confiné à une partie spécifique du site web uniquement, nous recommandons d'utiliser les conditions personnalisées pour ne se déclencher que sur cette URL au lieu de l'ensemble du site web afin d'éviter d'éventuels déclenchements indésirables ailleurs).
  • Une logique similaire s'applique ici comme pour Element Insertion.
• Le déclencheur Element Removal est similaire au déclencheur Element Added, donc toutes les mêmes choses s'appliquent. Cependant, en général, vous n'aurez pas besoin d'utiliser ce déclencheur car celui d'Insertion devrait suffire.

Il y a 2 éléments que vous devez configurer :

• Modifier l'URL pour la distinguer de la page sur laquelle elle se trouve
• Utiliser le déclencheur le plus approprié

Cette valeur pourrait être manuelle si c'est un flux relativement limité, et vous créez chaque déclencheur APV individuellement en fonction de certains caractères uniques de chaque étape/page (comme un élément HTML ajouté dynamiquement qui n'existe sur aucune autre page/étape). Par exemple, vous pourriez utiliser cette syntaxe dans le champ Chemin (où /add_to_cart sera ajouté à la fin de l'URL réelle) :

${window.location.pathname}/add_to_cart

Déclencheurs recommandés : 

Bien que vous puissiez théoriquement utiliser presque n'importe quel déclencheur, typiquement, dans une telle situation, vos options sont limitées aux déclencheurs Élément Devient Visible et Insertion d'Élément. (Par exemple, Clic ou Touche d'Élément n'est pas aussi fiable car il se déclenchera même s'il y avait en réalité un problème sur la page et que la pop-up n'a pas fonctionné). 

Pour déterminer quel déclencheur vous devriez utiliser, vous pouvez vérifier si le contenu en question (pop-up modale, etc.) existe dans le HTML lorsque la page en question se charge pour la première fois ou non. Cela est dû au fait que, souvent, l'élément est préchargé mais caché, ce qui signifie que le déclencheur Insertion d'Élément ne fonctionnera pas. Vous pouvez y parvenir en suivant ces étapes :

1. Dupliquez votre page dans un nouvel onglet (clic droit sur l'onglet > dupliquer, ou de toute autre manière)

2. Déclenchez le contenu que vous souhaitez faire apparaître dans l'APV.

3. Recherchez un élément unique à l'intérieur du contenu nouvellement ajouté qui ne se trouve nulle part ailleurs sur la page.

4. Maintenant, vérifiez l'onglet dupliqué pour cet même élément (sans déclencher la modale).

Si l'élément n'existe pas au chargement de la page (ce qui signifie qu'il a été ajouté dynamiquement), vous voudrez utiliser le déclencheur Insertion d'Élément. Si, en revanche, le contenu en question est présent dans le HTML mais est simplement caché, vous voudrez plutôt utiliser le déclencheur Élément Devient Visible.

• Pour utiliser le déclencheur Insertion d'Élément, vous voudrez d'abord identifier un élément dans la modale qui n'existe pas avant son ouverture.
• Le déclencheur Insertion d'Élément lui-même est simple à configurer - vous avez juste besoin du sélecteur CSS pour l'élément discuté ci-dessus et de définir si vous souhaitez qu'il se déclenche partout ou le limiter à des pages spécifiques.
• Le déclencheur Élément Devient Visible doit être utilisé dans le cas où le HTML de la pop-up modale existe déjà sur la page même avant qu'il ne soit déclenché pour la première fois.
• Pour les déclencheurs Insertion d'Élément et Élément Devient Visible, vous pouvez choisir si vous souhaitez qu'ils se déclenchent chaque fois que l'élément en question est ajouté à la page, - ce qui signifie que vous aurez un APV pour chaque fois que la modale est ouverte (mais pas fermée) - ou une fois par vue de page.
• Le déclencheur Élément Devient Visible ne fonctionnera pas si l'élément en question n'existe pas au chargement de la page. Cela signifie que vous pouvez rarement rencontrer une situation où l'élément en question est ajouté à la page après que notre balise a été exécutée. Vous pouvez contacter votre responsable de la réussite CSQ pour obtenir de l'aide dans ce cas. 

Il est également judicieux de déclencher un APV lorsque la modale est fermée, c'est là que le déclencheur Élément Supprimé est utile. Toutes les mêmes choses s'appliquent, et puisque vous êtes de retour sur la page "originale", vous n'avez pas à modifier l'URL, donc ce qui suit doit être mis dans le Chemin :

 ${window.location.pathname}${window.location.hash.replace('#', '?__')}