CSTC Template : Vues de page artificielles

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

Déclencheur

• Changement d'historique : À moins que, dans le cas rare où le site web utilise des changements de hachage (identifié lorsque l'URL a un signe de hachage (#) et que la partie de l'URL qui change est après le signe de hachage).
  • Remarque, Les Variables Personnalisées ne sont actuellement pas disponibles avec le déclencheur de Changement d'Histoire.

• 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 l'URL d'origine 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 résolution d'erreur

• Vérifiez votre “chemin heureux” : Suivez le “chemin heureux” sur votre site web pour vous assurer que les APVs se déclenchent là où 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 Paiement.
• 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 qu'un pushState (sur le site web). Essayez de modifier les événements de changement d'URL dans le déclencheur de Changement d'Histoire pour exclure replaceState (dans le menu déroulant) et testez à nouveau. Cela résout généralement le problème.
• Sites web avec Paiements : Confirmez comment les APVs sont déclenchés au fur et à mesure que vous progressez à travers les étapes d'expédition, de facturation et d'autres étapes. N'oubliez pas de vérifier ce qui se passe lorsque vous modifiez (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 provoque le déclenchement de l'APV plus d'une fois, et que vous avez écarté la responsabilité de replaceState, 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 souhaitez 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 APV n'est pas suffisant, car vous aurez besoin d'un moyen de les distinguer dans notre cartographie.

Alternatives aux variables personnalisées (CVAR) :

• Les CVAR ne sont pas disponibles et donc, 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 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 Chemin (où /step1 sera ajouté à la fin de l'URL actuelle) : ${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, 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 :

Élément supprimé :

• Vous devrez d'abord identifier un élément sur la page qui :
  • n'existe pas avant de passer à l'étape pour laquelle vous souhaitez déclencher l'APV
  • est ajouté dynamiquement lorsque vous y accédez
  • n'existe sur aucune autre étape/page
• Le déclencheur se déclenchera plusieurs fois chaque fois que l'élément en question est ajouté à la page (attention aux faux positifs lors des tests)
• Lors des tests, assurez-vous de valider que les APV se déclenchent non seulement lors de la montée dans le flux mais aussi en avant et en arrière.

Élément devient visible :

• Ce déclencheur est mieux utilisé pour les pop-ups modales où il n'y a pas de flux réel et pas besoin de redéclencher plus d'une fois (par exemple, cela pourrait être une pop-up modale ‘ajouter au panier’).
  

Il y a 2 articles 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 que vous créez chaque déclencheur APV individuellement en fonction de certains caractères uniques 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 Chemin (où /add_to_cart sera ajouté à la fin de l'URL réelle) :

${window.location.pathname}/add_to_cart

Bien que vous puissiez théoriquement utiliser presque n'importe quel déclencheur, typiquement, dans une telle situation, votre option est limitée au déclencheur Élément Devient Visible.

• Le déclencheur Élément Devient Visible est l'option idéale dans le cas où le HTML de la fenêtre modale existe déjà sur la page même avant qu'il ne soit déclenché pour la première fois.
• Cependant, il convient de souligner qu'il se déclenche uniquement une fois par vue de page "naturelle", ce qui signifie qu'une fois qu'il a été déclenché, il ne sera pas déclenché à nouveau sur la même vue de page. Ce n'est pas un problème pour la plupart des sites web, sauf lorsque vous traitez avec des sites web SPA où, si vous l'avez utilisé une fois, tout déclencheur modal ultérieur NE sera PAS déclenché à nouveau, ce qui en fait un choix très problématique.
• Il est également judicieux de déclencher un APV lorsque la modale est fermée, c'est là que le déclencheur Élément Retiré 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 devrait être mis dans le Chemin :

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