Bénéfices utilisateur Grâce à l’éditeur de code Kameleoon, vous pouvez créer, lancer et gérer des tests A/B sans passer par…
Bénéfices utilisateur
Grâce à l’éditeur de code Kameleoon, vous pouvez créer, lancer et gérer des tests A/B sans passer par l’éditeur graphique ! Injectez du code JavaScript ou CSS directement sur vos variantes et gagnez du temps.
Accéder à l’éditeur de code
Depuis le back-office ou le dashboard A/B
Cliquez sur “Nouveau projet” depuis le menu de gauche du back-office, ou sur “Nouveau test” depuis votre dashboard A/B : une pop-in s’ouvre et vous permet de choisir entre plusieurs types de test. L’option “Test A/B développeur” donne accès à l’éditeur de code.
Une fois l’option sélectionnée, la pop-in se transforme pour vous laisser nommer votre test et lui associer un site et l’URL d’une page. Cliquez ensuite sur “Créer” : l’éditeur de code A/B s’ouvre.
Depuis l’éditeur graphique
Vous pouvez ouvrir un test A/B développeur déjà créé en cliquant sur “Ouvrir un test existant”.
Pour ouvrir directement l’éditeur de code, cliquez sur le menu burger en haut à gauche > Configuration générale > Ouvrir l’éditeur de code
Structure de l’éditeur de code A/B
L’éditeur de code est composé d’un header et de 3 blocs.
-
Header
-
Bloc Test
-
Bloc Variantes
-
Bloc Finaliser
Header
Le header affiche les informations principales associées au test :
-
son nom (vous pouvez double-cliquer sur le nom du test pour le modifier) ;
-
son statut (brouillon, planifié, en ligne, en pause, dévié ou arrêté) ;
-
la dernière interaction (dernier enregistrement ou mise à jour, date de mise en ligne…)
Vous pouvez vérifier que les modifications que vous avez apportées ont bien été enregistrées. Deux types de sauvegarde sont disponibles :
-
automatique lorsque le test est en brouillon, planifié ou en pause ;
-
manuelle pour les tests en ligne et les tests déviés (via le bouton vert dans l’onglet « Finaliser »).
Bloc Test
Par défaut, le bloc Variantes est affiché. Pour accéder au bloc Test, cliquez simplement sur “Test”.
Code spécifique au test
Pour toutes les variantes, vous pouvez ajouter, modifier ou supprimer du code JavaScript et/ou CSS (sélectionnez l’onglet correspondant en haut).
Le code JavaScript est automatiquement vérifié lorsque vous quittez la zone de modification du code (par exemple, en cliquant sur l’onglet “CSS”). Si une erreur est détectée, un message vous en avertit en bas de page.
Vous pouvez afficher l’erreur ou choisir d’ignorer le message en cliquant sur la croix pour le faire disparaître. Une barre latérale apparaît alors sur la droite de l’éditeur et vous permet d’identifier et de situer le morceau de code qui pose problème.
Il ne vous reste plus qu’à corriger ! Une fois votre code JavaScript identifié comme correct, la barre latérale disparaît. Votre code sera à nouveau vérifié si vous lui apportez des modifications.
Si plusieurs erreurs ont été détectées, elles seront affichées l’une après l’autre au fil de vos corrections.
Options du code
Si vous cliquez sur le menu 3 points associé au menu “Code spécifique au test”, un sous-menu s’ouvre et vous permet d’accéder à des options.
Choisissez ici d’inclure ou d’exclure l’originale des modifications que vous venez d’effectuer. Si la case est cochée, le code JavaScript ou CSS sera également injecté sur la variante originale.
Tags et description
Éditez la description de votre test ou les tags associés si vous le souhaitez.
URL de la page testée
Modifiez ici l’URL de la page concernée par votre test A/B. Par défaut, l’URL est celle que vous avez renseignée dans la pop-in de création de votre test A/B développeur.
Ouvrir l’éditeur graphique
L’éditeur graphique s’ouvrira alors en lieu et place de l’éditeur de code.
Page de résultats du test
Si votre test a déjà été lancé, un lien vous propose d’accéder à la page de résultats.
Si votre test est arrêté, un bouton vert en bas de l’éditeur vous propose un accès direct à la page de résultats.
Bloc Variantes
Par défaut, le bloc Variantes est affiché lorsque vous accédez à l’éditeur de code.
Il vous permet d’injecter du code JavaScript et/ou CSS sur les variantes de votre test A/B.
-
Dans la partie de gauche, vous pouvez ajouter, dupliquer, renommer ou supprimer une variante.
-
Dans la partie de droite, vous pouvez ajouter, modifier ou supprimer du code dans les champs JavaScript et/ou CSS. Il s’appliquera à la variante sélectionnée. Le code est vérifié de la même manière que dans l’onglet « Test ».
Ajouter une variante
Cliquez sur “+ Ajouter une variante”.
Le cercle de couleur associé à la variante se remplit lorsque cette dernière est sélectionnée. Naviguez ainsi entre les différentes variantes de votre test.
Menu de la variante
Au clic sur les 3 points à droite de chaque variante, un menu s’ouvre.
Les modifications effectuées via ce menu s’appliquent alors uniquement à la variante sélectionnée.
-
Éditez les options du code JavaScript sur la variante (vous pouvez choisir entre plusieurs paramètres d’affichage) ;
-
Renseignez éventuellement l’URL de redirection de la variante ;
-
Retrouvez toutes les options disponibles dans l’éditeur graphique classique.
Options du code JavaScript
-
Choisissez à quel moment le code JavaScript doit s’exécuter ;
-
Si le code JavaScript correspond à une pop-in, vous pouvez en limiter l’affichage en activant certaines des options présentées.
Rediriger vers une URL
Par défaut, aucune redirection n’est paramétrée sur la variante. Vous pouvez cependant mettre en place une redirection globale ou par paramètre.
Prévisualiser
Au clic, l’URL de prévisualisation s’ouvre dans un nouvel onglet. Vous pouvez alors vérifier l’affichage de vos variantes.
Renommer
Éditez le nom de vos variantes.
Dupliquer
Au clic, une copie de la variante est créée.
Supprimer
Une pop-in vous demande de confirmer votre choix.
Bloc Finaliser
Étapes de finalisation
Dans la partie de gauche, comme dans le cas d’un test A/B sur l’éditeur graphique, vous devez valider chacune des 3 étapes pour pouvoir lancer votre test :
-
distribution du trafic ;
-
ciblage ;
-
suivi et objectifs.
Au clic, chaque étape se déroule pour afficher les détails de la configuration choisie.
Répartition du trafic
Cliquez sur l’icône crayon pour paramétrer la répartition du trafic sur votre test A/B.
Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.
Ciblage
Cliquez sur l’icône crayon pour paramétrer le ciblage de votre test A/B : par page web ou par segment
de visiteurs.
Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.
Suivi et objectifs
Sélectionner au moins un objectif afin d’activer Kameleoon comme outil de reporting, puis sélectionnez les autres outils de suivi que vous souhaitez éventuellement associer à votre test A/B.
Confirmez votre choix : l’étape est validée, un check vert l’indique dans l’éditeur de code.
Simulation
Il est fortement recommandé de simuler votre test A/B développeur afin de vérifier l’affichage et le ciblage des variantes. Pour cela, cliquez simplement sur le bouton “Simuler” pour ouvrir le mode simulation dans un nouvel onglet de votre navigateur.
Statut du test
À droite, un encart rappelle le statut de votre test : brouillon, planifié, en ligne, en pause, dévié ou arrêté.
Une fois votre test lancé, vous pouvez modifier son statut en cliquant sur la flèche pour dérouler les actions possibles.
Informations
Cliquez pour dérouler cet encart. Vous retrouvez le site auquel votre test A/B développeur est associé, ainsi que la date de création de votre test.
Identifiants
Cliquez pour dérouler cet encart. Vous retrouvez l’identifiant de votre test ainsi que les identifiants de chacune des variantes de votre test A/B développeur.
Boutons d’activation
Ces boutons deviennent actifs lorsque les 3 étapes de finalisation nécessaires ont été réalisées.
Planification
Vous pouvez planifier le lancement de votre test A/B développeur en définissant une date de début, une date de fin ou bien les deux.
Des options de planification avancée sont également à votre disposition.
Pour plus d’informations sur la planification
Mise en ligne
Cliquez sur le bouton “Mettre en ligne” pour publier immédiatement votre test A/B développeur.
Une pop-in vous confirme le bon lancement du test et le statut de ce dernier passe de “Brouillon” à “En ligne”.
Vous restez sur l’éditeur de code et pouvez apporter des modifications à votre test si nécessaire.
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 !
Enregistrement et mise à jour
Au cours de la création de votre test, vous pouvez enregistrer vos modifications et quitter l’éditeur de code. Votre test sera sauvegardé en tant que brouillon et vous serez redirigé vers le tableau de bord A/B.
Une fois votre test en ligne, vous pouvez toujours lui apporter des modifications. L’enregistrement de ces dernières est indiqué en haut à gauche de l’éditeur de code, juste sous le nom du test.
Deux types de sauvegarde sont disponibles :
-
automatique lorsque le test est en brouillon, planifié ou en pause ;
-
manuelle pour les tests en ligne et les tests déviés.
Retrouver un test A/B développeur
Tag
Le tag “A/B développeur” est automatiquement associé à votre test créé à partir de l’éditeur de code.
Filtre
Sur la page “Vue d’ensemble” de votre dashboard A/B, il vous est possible d’appliquer un ou plusieurs filtre(s) afin de retrouver plus facilement un test. Le filtre “Test A/B développeur” est sélectionnable dans la catégorie de filtres “Type”. Ne s’afficheront alors que les tests créés via l’éditeur de code.
Carte
En cliquant sur « Éditer » ou « Finaliser » (icône crayon), l’éditeur de code s’ouvre dans un nouvel onglet.
Vous pouvez également ouvrir le test dans l’éditeur de code en cliquant sur l’icône </> qui apparaît au hover sur le bas de la carte.
Comme avec toutes les cartes de test A/B, il est également possible de dupliquer le test et sa configuration, de le supprimer, de gérer son statut et de consulter les résultats.
Créer et lancer un test A/B server-side ou hybride
Vous pouvez également créer des tests 100% côté serveur ou hybride grâce à l’éditeur de code.
Retrouvez ici notre documentation sur les tests server-side
Retrouvez ici notre documentation sur les tests hybrides
