Comment lancer un AB Test ? - 2 - Créer un A/B Tests dans Kameleoon

Insertion du code JavaScript de la variation, création des objectifs

Publié par Adrien Millet le 2020-09-27

Cet article est le 2ème de notre série consacrée au guide du lancement d'un A/B Tests sous Kameleoon. Si vous ne l'avez pas déjà consulté, vous pouvez retrouver ici la 1ère partie consacrée à l'élaboration du code javascript de la variation

Finaliser le code de la variation pour Kameleoon

Nous avons obtenu précédemment obtenu le code suivant

document.querySelector("body > main > div > div > div > div > div > h2").innerText = "Comment les CRO travaillent-ils en France ? Notre livre blanc "
document.querySelector('#formContainer2 > form > div > div.text-center.ct-u-paddingTop30 > button').setAttribute("style","background-color:green")

Le script Kameleoon est déployé hors TMS dès l'ouverture de la balise head, et va se déclencher dès le début du chargement de la page. Conséquence : le script Kameleoon peut se charger avant que les éléments que nous souhaitons modifier soient disponibles. Pour contourner ce problème, nous vous conseillons d'utiliser la fonction Kameleoon runWhenElementPresent pour chacun des éléments que nous modifions.

Le code que vous obtenez est alors :

console.log("[ED - 1] Landing Page Acquisition Livre Blanc - Variation 1 - 1")
Kameleoon.API.Core.runWhenElementPresent("body > main > div > div > div > div > div > h2", function(elements) {
document.querySelector("body > main > div > div > div > div > div > h2").innerText = "Comment les CRO travaillent-ils en France ? Notre livre blanc "
})

Kameleoon.API.Core.runWhenElementPresent("#formContainer2 > form > div > div.text-center.ct-u-paddingTop30 > button", function(elements) {
document.querySelector('#formContainer2 > form > div > div.text-center.ct-u-paddingTop30 > button').setAttribute("style","background-color:green")
})

Autre réflexe à avoir : l'ajout d'un console.log en début de code pour suivre l'évolution des variations. Si le code javaScript de votre variation est amené à évoluer, vous devrez incrémenter le numéro de suivi ; passant ainsi à :

console.log("[ED - 1] Landing Page Acquisition Livre Blanc - Variation 1 - 2")

De cette manière, vous serez certain que la version que vous êtes en train de recetter est bien la dernière sur laquelle vous travaillez. (Vous pourrez constater que parfois Kameleoon peut mettre jusqu'à 10 minutes avant de se mettre à jour ; vous pouvez aussi mal avoir vidé vos cookies être en réalité exposé à l'ancienne variation lors de la phase de recette)

Insérer le code de suivi dans Kameleoon

Dans "A/B Tests" > "Vue d'ensemble", cliquez sur "Nouveau Test". Sélectionnez ensuite "Test A/B développeur". Indiquez ensuite le nom de votre test.

Dans ce cas de figure, notre test n'effectue aucun ciblage sur des données personnelles. Comme nous avons paramétré Kameleoon de manière à ce qu'il se déclenche en mode restreint lorsque l'utilisateur n'a pas donné son consentement Personnalisation ou lorsqu'il est optout, il va donc être intéressant de paramétrer ce test en "Technical"

Cliquez ensuite sur "Créer"

Votre test est à présent créé dans Kameleoon ! Vous pouvez à présent copier le code précéedemment obtenu dans la Variantes > Variante 1

Votre variation est prête !


Code de ciblage

Dans ce cas de figure c'est assez simple : l'AB Test doit simplement se déclencher en Home Page

Pour cela on va utiliser le code suivant

document.location.hostname + document.location.pathname == "www.eloquentdata.fr/"

De cette façon vous pourrez cibler la homeapage eloquentdata.fr, même lorsque l'url de cette dernière contient des paramètres, par exemple une campagne d'acquisition mailing avec des utms pourra donner www.eloquentdata.fr?utm_source=newsletter&utm_medium=email&utm_campaign=octobre2020/ et sur cette page l'A/B Test se déclenchera bien

Le code de ciblage à intégrer dans Kameleoon doit retourner "true" lorsque les conditions sont valides. Pour insérer le code de ciblage dans Kameleoon, vous devez donc entrer le code suivant dans Finaliser > Ciblage

if(document.location.hostname + document.location.pathname == "www.eloquentdata.fr/"){return true}

Paramétrage des objectifs dans Kameleoon

Pour ce test, nous souhaitons suivre le volume de visiteurs qui vont remplir le formulaire pour télécharger le livre blanc. Cela revient à suivre le nombre de consultations de la page de confirmation https://eloquentdata.fr/confirmation.php

Allez dans KPIs > Objectifs > Nouvel objectif > Nommez votre objectif, dans notre cas nous l'appellerons "ED : Page de confirmation" > sélectionnez "dont le nom contient" = "https://eloquentdata.fr/confirmation.php"

Vous devez à présent associer cet objectif à votre test. Pour celà, retournez dans l'onglet d'édition de votre test > Finaliser > puis dans "suivi et objectifs", ajoutez l'objectif "ED : Page de confirmation"

Votre test est à présent configuré dans Kameleoon. Vous devez à présent le recetter