Configurer un test sur une pop-in

Il est parfois nécessaire de ne lancer un test A/B que lorsqu'un événement est déclenché sur votre site web. Par exemple, un clic sur un bouton d'ajout au panier ouvre une pop-in de confirmation et le test ne doit s'exécuter qu'à partir de ce moment-là, pour ne comptabiliser dans le test que les visiteurs qui auront réellement vu la pop-in. 

Deux étapes sont nécessaires pour créer ce genre de test : l'ajout d'un code JavaScript à votre page, puis la définition du critère de ciblage. 

Ajout du script

Pour ajouter votre JavaScript, deux options s'offrent à vous :

  • Modifier le code source de la page : idéalement, optez pour cette solution qui vous garantit plus de rapidité.
  • Ajouter un script sans modifier le code source de la page : si vous n'avez pas accès au code source de votre page, pas de panique ! Kameleoon a pensé à tout.

Directement dans le code source

Si vous avez la possibilité de modifier le code source de votre page, il suffit de déclencher un événement JavaScript lors de l'ouverture de votre pop-in et de définir un ciblage sur le nom de cet événement.

Pour cela, rajouter tout simplement au code de votre page l'instruction :

 Kameleoon.API.triggerEvent("Nom de l'événement")

lorsque la pop-in s'ouvre à l'écran ou au clic sur le bouton d'ajout au panier par exemple.

Via les préférences

Si vous ne pouvez pas modifier le code source de votre page, il existe une solution offerte par Kameleoon qui vous permet d'ajouter, à la volée sur une page un script personnalisé. Celui-ci s'exécutera à chaque appel du script Kameleoon par vos pages. Pour cela connectez-vous à votre espace personnel et utilisez le menu latéral de gauche pour vous rendre sur la page « Mes sites ».

mes_sites_fr.png

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

bloc_site_fr.png

Cliquez sur l'onglet "Général" et joutez votre script dans la partie « Script personnalisé global ».

config_general_fr.png

Ci-dessous un exemple de script personnalisé, que vous pouvez utiliser. Il suffit ensuite de positionner le nom de l'évènement envoyé dans le ciblage de votre test. Kameleoon ne lancera le test que lorsque l'évènement JavaScript sera reçu.

//Utilisation de la fonction de l'API triggerEvent, au clic sur le bouton d'ajout au panier, qui ouvre la pop-in de confirmation
jQuery("#add-to-cart-button").click(function(){
   Kameleoon.API.triggerEvent("KAM_POPUP_OPENED"); //Le nom de l'évènement doit être positionné au niveau de la popup de configuration du ciblage.
});

//ou bien, utilisation de la fonction dès l'apparition de la pop-in
Kameleoon.API.runWhenElementPresent("#POPUP_ELEMENT_ID", function(){
   Kameleoon.API.triggerEvent("KAM_POPUP_OPENED");
}, 200);

Via l'éditeur

Vous pouvez également ajouter votre script depuis l'éditeur. Pour cela, cliquez sur le menu Capture_d_e_cran_2018-05-25_a__14.35.15.png situé à gauche du nom de votre test, puis sur « Test en cours d'édition » et enfin « Code spécifique au test ».

Sans_titre.png

Une pop-in s'ouvre, vous permettant d'injecter votre code JavaScript.

Veillez à cocher la case « Ajouter également le code JavaScript et CSS sur l'originale », sinon les résultats ne remonteront pas pour la page originale.

Définition du ciblage

Au moment de lancer votre test, lors de la deuxième étape de la procédure « Finaliser », choisissez de lancer le test sur « Un segment avancé spécifique » afin d'ouvrir l'éditeur de segments.

Si vous avez déjà créé votre segment, cliquez sur « Sélectionner un segment existant » pour le sélectionner. Sinon, créez-en un nouveau.

Capture_d_e_cran_2018-05-25_a__15.25.10.png

Dans la partie « Technique », sélectionnez le critère « Événement personnalisé » en double-cliquant dessus ou en le déposant dans la partie droite.

Capture_d_e_cran_2018-05-25_a__15.30.27.png

Indiquez alors le nom de l'événement, qui correspond à celui que vous avez ajouté dans votre code JavaScript. Kameleoon ne lancera le test que lorsque l'événement JavaScript sera déclenché.

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk