Créer un test sur une application web monopage

Qu'est ce qu'une application web monopage ?

Définition

Une application web monopage (ou « Single page application » 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 principalement ce type d'application sur site web mobile ou sur des sites ayant vocation à être utilisés principalement sur appareil mobile (Par exemple, http://fr.mappy.com/).

Impact sur l'A/B testing

Dans le cas d'une application web monopage, une seule page web est chargée dans le navigateur du visiteur, la page web suivante étant affichée dynamiquement en fonction des actions de l'utilisateur. Cela a donc un impact pour vos tests A/B car Kameleoon ne chargera sur le site Internet qu'à la première page vue par le visiteur : lorsqu'un visiteur navigue d'une page à l'autre, Kameleoon ne le sait tout simplement pas. Si un test a lieu sur une autre page web que la page d'arrivée du visiteur, il faut donc indiquer à Kameleoon que le visiteur a navigué sur une autre page du site afin que Kameleoon détermine s'il faut lancer le test A/B ou non.

Création du test

Pour lancer un test sur une application web monopage, ajouter un code JavaScript pour créer un événement personnalisé et configurez le ciblage de votre test.

Ajout du code JavaScript

Tout d'abord, connectez-vous à votre espace personnel. Utilisez le menu latéral de gauche pour vous rendre sur la page « Sites configurés ».

Pour le site depuis lequel vous souhaitez lancer un test A/B au déclenchement d'un événement, cliquez sur le bouton « Configuration avancée ».

Ajoutez votre script dans le champs « Script de tracking personnalisé ».

Ci-dessous un exemple de script personnalisé, que vous pouvez utiliser.

jQuery(document).ajaxComplete(function() { // Fonction appelée à chaque fois qu'un appel asynchrone type Ajax est exécuté sur votre site
	Kameleoon.API.triggerEvent("LAUNCH_ABT"); // Appel de la fonction triggerEvent de l'API pour indiquer à Kameleoon qu'un test doit être lancée.
});

Vous pouvez également ajouter du code JavaScript sur toutes les variantes de votre test depuis l'éditeur. Pour cela, vous pouvez consulter notre article à ce sujet

Cibler le test

Une fois votre script en place, il ne vous restera plus qu'à éditer le ciblage associé à votre test pour y ajouter le critère de ciblage « Événement personnalisé ».

Pour cela, lors de la finalisation de votre test, sélectionnez « Lancer le test sur : Un segment avancé spécifique » lors de l'étape 2.

Dans la partie « Technique », sélectionnez l'option de ciblage « Événement personnalisé ».

Indiquez alors le nom de l'événement, qui correspondra à celui que vous avez ajouté dans la fonction triggerEvent, ici LAUNCH_ABT. Kameleoon ne lancera le test que lorsque l'événement JavaScript sera déclenché.

Rafraichissement de la page

Une fois l'événement déclenché et le test actif, Kameleoon exécutera les changements prévus dans votre variante. Cependant, si la page est raffraichie, après une action de l'utilisateur sur la page, et que le bloc initialement modifié par Kameleoon est mis à jour, le bloc de référence sera alors affiché au visiteur. Pour palier à ce comportement, il est conseillé de gérer vos changements et votre variante avec du code JavaScript.

Imaginons que vous souhaitiez par exemple modifier le texte d'un bouton. Pour ce faire, vous pouvez utiliser le code JavasScript suivant :

function changeButtonText() {
   Kameleoon.API.runWhenElementPresent("#CTA-ADD-TO-CART", function(){
      	jQuery("#CTA-ADD-TO-CART").text("Acheter maintenant")
   }, 200);
}

changeButtonText(); // Fonction appelée une première fois au chargement de la page
jQuery(document).ajaxComplete(function() {
    changeButtonText(); // Fonction ré-exécutée après chaque appel asynchrone
});
Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk