Créer un test sur une application web monopage

3

min

quiz

Qu’est-ce qu’une application monopage ?

Définition

Une application web monopage (ou « single page app » en anglais) est un site web accessible via une page web unique. La finalité étant de fluidifier et d’améliorer l’expérience de navigation du visiteur sur le site en évitant de charger une nouvelle page web à chaque action du visiteur sur la page.

On retrouve surtout ce type d’application sur site web mobile ou sur des sites ayant vocation à être utilisés principalement sur appareil mobile (Mappy par exemple).

Mais tous les cas d’application monopage ne concernent pas un site web entier. Il y a trois cas possibles :

  • votre site web est constitué d’une seule page ;
  • une partie de votre site web est monopage (le tunnel de d’achat, par exemple) ;
  • un contenu d’une de vos pages est rafraîchi dynamiquement sans charger l’URL (par exemple lorsqu’un visiteur interagit avec un contenu de votre page ce qui déclenche un rafraîchissement de la page).

Nous allons détailler plus après les procédures à suivre dans chaque cas.

Impact sur les tests A/B

Une seule page se charge dans le navigateur du visiteur, les pages suivantes sont affichées dynamiquement en fonction des actions de l’utilisateur. Cela a un impact sur les tests A/B car Kameleoon ne se chargera qu’à la première page vue par le visiteur. Lorsqu’un visiteur navigue d’une page à l’autre, Kameleoon n’en est tout simplement pas conscient.

Si votre site web entier est une application monopage

Lors de l’installation de Kameleoon, votre CSM identifiera votre site web en tant qu’application monopage et activera une option spécifique.

Cette option permet à Kameleoon de détecter la navigation des visiteurs entre les pages en observant les changements dynamiques d’URL. Lorsqu’un changement se produit, Kameleoon recharge tout son moteur.

Le comportement de Kameleoon dans ce cas particulier est décrit dans notre documentation développeurs.

Si une partie de votre site web est monopage

Par exemple, votre tunnel d’achat peut être monopage afin d’optimiser l’expérience utilisateur.

Utilisez alors l’API dédiée et insérez le code dans le script global de votre site Kameleoon :

if (location.href.indexOf("mySPAWebsitePart") != -1)

{

   Kameleoon.API.Core.enableSinglePageSupport() ;

}

Grâce à ce code, Kameleoon enregistrera la navigation entre chaque étape de votre tunnel et rechargera son moteur pour exécuter à nouveau toutes vos expériences.

(Remplacez « mySPAWebsitePart » par l’URL de votre tunnel)

Si le contenu d’une de vos pages est rafraîchi dynamiquement sans charger l’URL

Cette situation est plus complexe que les deux précédentes. Par exemple, une action dans la même page rafraîchit dynamiquement le contenu de la page sans charger l’URL.

Supposons que vous meniez une expérience sur une page de produit pour mettre à jour l’ensemble de la mise en page. Lorsqu’un visiteur arrive sur cette page, Kameleoon lui attribue une variante. Mais le visiteur peut interagir avec une liste déroulante et lorsqu’il sélectionne une option dans cette liste, le contenu de la page est rafraîchi dynamiquement. Kameleoon ne pourra pas détecter cette action et la page originale continuera d’être affichée au visiteur. Pour éviter cela, vous pouvez implémenter ce morceau de code sur votre site web ou dans la section de script global du site Kameleoon. Ce code permettra de prendre en compte les changements qui se produisent dans la liste déroulante et rechargera le moteur Kameleoon, affichant alors la même variante au visiteur.

var dropDownList = Kameleoon.API.Utils.querySelectorAll("#mydropdownID")[0];
Kameleoon.API.Utils.addEventListener(dropDownList, "change", function() {
Kameleoon.API.Core.load();
});

Plugin React pour app monopage

Kameleoon propose également un plugin React pour les apps monopages. Il permet à un développeur d’utiliser les API de Kameleoon pour modifier les propriétés des composants React.