Exemple de test A/B en 10 étapes

3

min

quiz

Pour vous aider dans la mise en place de vos tests A/B, nous vous proposons un petit exercice de travaux pratiques.

Nous allons voir ensemble, pas à pas, comment imaginer un test, le configurer et le mettre en ligne.

C’est parti !

 

1. Imaginer son test et cerner ses objectifs

La société SnapEvent, spécialisée dans la location de lieux d’exception pour l’organisation d’événements publics et privés, cherche à étoffer son catalogue. En effet, son portefeuille clients augmente rapidement et induit une demande croissante en nouveaux lieux, en particulier parisiens. Elle voudrait donc mettre en avant son option « Louer mon bien » afin d’attirer de nouveaux propriétaires depuis la page d’accueil du site, sans dégrader pour autant l’expérience des autres visiteurs (et donc potentiellement diminuer le nombre de réservations).

Pour le moment, l’action « Louer mon bien » n’apparaît que dans le footer. Dans le cadre de cet exercice de travaux pratiques, nous souhaitons mettre en place un test A/B permettant de tester plusieurs possibilités :

  1. Conserver l’action uniquement dans le footer (situation actuelle) ;
  2. Ajouter l’option dans le menu ;
  3. Ajouter l’option dans le sticky header.

 

2. Lancer l’éditeur

Une fois sur la page d’accueil de SnapEvent, nous utilisons le raccourci clavier suivant pour lancer l’éditeur Kameleoon :

 

3. Créer un nouveau test

Nous cliquons ensuite sur « Créer un test A/B classique ».

Nous renseignons le titre de notre test et choisissons de lui associer une courte description sur l’hypothèse testée.

cliquant sur « Créer le test », nous validons ces choix et accédons à l’interface de l’éditeur graphique.

 

4. Créer les variantes

Par défaut, une première variante (Variante 1) existe déjà. Pour afficher les actions de modification, nous cliquons sur la variante afin d’en dérouler le menu.

Pour davantage de clarté, nous renommons la première variante « MENU », car elle va être associée à une modification du menu de la page d’accueil.

Dans cette variante de la page d’accueil, nous cherchons en effet à faire apparaître l’option « Louer mon bien » dans le menu en jaune tout en haut de la page.

Pour cela, il nous suffit de cliquer sur la variante puis sur l’ajout d’un nouvel élément.

Nous choisissons ensuite l’option « Paragraphe ».

Dans la pop-in, nous entrons le texte « Louer mon bien ». Il est possible de mettre en forme ce texte. Ici, la police sélectionnée est Rawline, la couleur est la nuance de jaune faisant partie de la charte graphique du site, la taille de caractère est égale à 13 pixels et l’ensemble se trouve en majuscules et en gras.

Une fois validé, l’élément est ajouté à la page. Par défaut, il apparaît au centre. Il faut donc le déplacer pour qu’il vienne compléter le menu.

Pour cela, nous cliquons sur la boîte à outils qui se trouve sur la gauche de l’éditeur. L’onglet « Position » permet, grâce à l’option « Placer avant », d’insérer notre texte entre deux éléments préexistants : le numéro de téléphone et la rubrique « Mon compte ».

Voici le résultat de cette manipulation :

Nous sélectionnons ensuite l’élément ajouté et lui associons, grâce à l’onglet « Style » de la boîte à outils, une URL pour renvoyer au clic vers la page concernée.

En cas d’erreur, il nous aurait été possible de revenir en arrière grâce à l’outil Historique, situé sur la droite de l’éditeur.

La modification que nous venons d’effectuer constitue la première variante testée. Dans une seconde variante, le nouvel élément va cette fois s’insérer dans le sticky header blanc, juste à droite de « Prestations événementielles ».

Pour ajouter une nouvelle variante, nous cliquons sur le signe + dans le menu des variantes et la renommons « STICKY HEADER ».

Nous répétons les même manipulations pour adapter l’élément aux autres éléments de la page d’accueil.

Nous obtenons rapidement ce résultat :

Nous souhaitons placer des trackers sur nos nouveaux éléments : le « Louer mon bien » du menu jaune et celui du sticky header blanc. Pour cela, dans l’éditeur, nous sélectionnons dans la première variante l’élément créé et, dans l’onglet « Tracking » de la boîte à outils, lui associons un tracking de clics.

Il s’affiche ensuite dans la partie basse de la boîte à outils, sous la mention « Associés à l’élément » : il a bien été pris en compte.

Nous répétons l’opération pour la seconde variante. Ce deuxième tracker se nommera « clic-louer-mon-bien-header ».

Nous retrouverons les deux trackers à l’étape 8 de l’exercice.

 

5. Répartir le trafic

Une fois les variantes du test créées, nous entrons dans la phase de finalisation.

Un clic sur le menu « Finaliser » en haut à droite de l’éditeur nous permet d’accéder au panneau déroulant.

 

La première étape de cette finalisation consiste à répartir le trafic sur nos variantes.

Lorsque nous cliquons sur « Répartition du trafic », la pop-in qui s’ouvre nous donne la possibilité de régler, grâce à des curseurs, le pourcentage de visiteurs alloué à chaque variante.

Nous souhaitons répartir équitablement le trafic entre d’un côté la version originale de la page et de l’autre les variantes que nous venons de créer. La moitié des visiteurs verra l’originale ; l’autre moitié, l’une des deux variantes.

Pour mettre en place cette répartition, nous cliquons sur le cadenas de l’originale pour déverrouiller les modifications, puis cliquons sur le pourcentage à droite et indiquons 50. Il ne nous reste plus qu’à entrer le nombre 25 pour chaque variante.

Nous cliquons ensuite sur « Poursuivre » pour nous rendre à l’étape suivante.

 

6. Cibler

Il est ensuite nécessaire de définir le ciblage du test. Nous cherchons à attirer en priorité des propriétaires parisiens : nous allons donc cibler cette population.

Un clic sur « Cibler un segment » nous permet d’accéder à l’option de création d’un nouveau segment. Le segment builder apparaît.

Nous glissons-déposons la condition « Géolocalisation de l’IP » (catégorie « Caractéristiques du visiteur ») dans la partie droite du segment builder, et décidons de n’inclure que les visiteurs en provenance de Paris.

Nous affinons cette condition en excluant les utilisateurs sur smartphone. Cela signifie que seuls les visiteurs répondant à ces critères pourront voir nos variantes. Tous les autres n’auront accès qu’à la version originale de notre page d’accueil.

Pour pouvoir identifier très rapidement notre segment par la suite et le réutiliser dans d’autres expériences, nous le renommons « parisiens » et validons sa création. Il nous suffit alors de cliquer sur « Poursuivre » pour accéder à l’étape suivante.

 

7. Sélectionner un outil de suivi

Dans la pop-in de sélection d’un outil de suivi, nous restons sur l’onglet dédié aux objectifs Kameleoon pour activer Kameleoon en tant qu’outil de suivi. Il faut ensuite lui associer au moins un objectif pour qu’il puisse suivre les performances de vos variantes et vous présenter des résultats.

8. Associer un objectif

Par défaut, seul l’objectif « Engagement » est paramétré (cet objectif est atteint si le visiteur a visité d’autres pages après la page d’arrivée). Mais nous avons créé, lors de l’étape 4, deux trackings de clic, qui nous sont alors proposés dans la liste des objectifs. Nous allons les sélectionner en cliquant sur la ligne qui leur correspond. Pour choisir l’un d’eux en tant qu’objectif principal, nous cliquons sur l’étoile qui l’accompagne.

En poursuivant la finalisation du test, nous accédons à son récapitulatif. C’est le moment de vérifier que tout nous convient :

  • Le trafic est bien réparti pour moitié entre nos deux variantes ;
  • Le segment avancé « parisiens » est bien ciblé ;
  • L’outil de reporting Kameleoon est bien sélectionné ;
  • Les trois objectifs que nous avons choisis sont bien associés au test.

Chaque catégorie peut être déroulée pour afficher les détails.

 

9. Simuler

Tout est ok, il est presque temps de lancer notre test ! Mais avant, il est très important de simuler notre expérience afin de vérifier l’affichage et le ciblage des variantes.

Nous fermons la pop-in de récapitulatif et, dans le menu de finalisation, cliquons sur la quatrième étape, qui nous mène vers la simulation du test.

Une nouvelle page s’ouvre avec le panneau de simulation.

Dans notre exemple, nous ne correspondons pas à toutes les conditions de ciblage : notre statut est « Non ciblé ». En cliquant sur l’onglet « Ciblage », nous affichons l’ensemble des conditions et notre statut par rapport à ces dernières. Ici, nous sommes connectés depuis un ordinateur : la condition « Type d’appareil » que nous avons paramétrée dans notre segment est Vraie. Cependant, notre IP ne se trouve pas géolocalisée à Paris : cette condition est Fausse.

Ces éléments nous permettent de vérifier le ciblage de notre test. Dans notre cas, tout fonctionne comme prévu et correspond à nos attentes initiales. Nous souhaiterions tout de même vérifier l’affichage de la page d’accueil dans le cas où toutes les conditions de ciblage seraient Vraies. Pour ce faire, il nous suffit, dans l’onglet « Expériences », de cliquer sur « Forcer l’affichage ». La page de simulation se recharge et nous permet d’effectuer les vérifications.

Dernière étape : s’assurer que nos objectifs sont convenablement configurés. Dans l’onglet « Objectifs » du panneau de simulation, le statut Converti / Non converti de chaque objectif est indiqué, sur le même principe que le Vrai / Faux des conditions de ciblage :

Nous n’avons pas encore cliqué sur les nouveaux éléments de nos variantes. Il est donc normal que les trackings de clics associés n’aient pas été convertis. Il nous suffit de cliquer sur l’un de ces éléments et de constater que le statut change et devient « Converti » : tout va bien !

Nous pouvons quitter la simulation en cliquant sur « Fermer » en bas à droite de la page. L’étape devient verte dans le panneau de finalisation. Cette confirmation est indépendante du comportement sur le panneau de simulation : elle indique seulement que le mode simulation a été utilisé.

 

10. Lancer le test

Retour sur l’éditeur graphique. Notre test est prêt à être mis en ligne. Un clic sur « Lancer » dans le panneau de finalisation, puis sur « Mettre en ligne », et hop !

Note : Il peut exister un court temps de latence (jusqu’à 10 minutes) entre la mise en ligne d’un test A/B et sa visibilité sur le site. Ne vous inquiétez pas si votre test n’apparaît pas immédiatement !

Selon le trafic journalier sur notre site, ainsi que nos objectifs et le taux de fiabilité que nous voulons atteindre, il nous faudra attendre plus ou moins de temps avant de pouvoir analyser les résultats du test.

Dans notre cas, nous aurons attendu 5 jours. Il nous aurait été possible d’estimer cette durée grâce à l’outil  inclus dans le panneau de finalisation de l’éditeur.

 

Si vous cherchez des informations sur certains points qui n’auraient pas été abordés dans cet article, n’hésitez pas à consulter notre documentation sur l’A/B testing et à utiliser la barre de recherche à votre disposition.

 

(NB : SnapEvent ne fait pas partie des clients de Kameleoon, ce test A/B est fictif.)