L’éditeur de code Kameleoon vous permet de modifier directement vos pages en quelques clics et de lancer vos tests A/B en injectant directement du code JavaScript ou CSS sur vos variantes. Découvrez ses principales fonctionnalités !

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.

 

1. Header

2. Bloc Test

3. Bloc Variantes

4. 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 »). Cette option est en cours de développement. Attention ! En attendant, les modifications sont prises en compte immédiatement.

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. Cette option est en cours de développement. Attention ! En attendant, les modifications sont prises en compte immédiatement. Une bannière vous le rappelle en bas de page.

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.

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.

Qu’est-ce qu’une clé API ?

 

La clé API est un système d’authentification avec des outils tiers qui permet le transfert de données de manière plus sécurisée que le système login/mot de passe classique.

Elle est associée à un compte utilisateur. C’est un utilisateur Super Admin qui active la clé API du compte utilisateur. Une fois activée, chaque utilisateur peut générer une nouvelle clé API s’il le souhaite.

Elle peut être utilisée pour toutes les intégrations qui proposent ce système d’authentification.

 

Activer la clé API

 

C’est à l’utilisateur Super Admin de se rendre sur la page « Utilisateurs & droits ».

À l’ajout d’un compte utilisateur, rendez-vous dans l’onglet « Autorisations compte » :

Pour activer la clé API, passez le toggle sur « ON ».

Cliquez sur « Ajouter » : une clé est automatiquement générée. 

En tant qu’utilisateur, vous retrouvez cette clé sur votre profil.

C’est cette clé qu’il vous faudra renseigner lors de l’intégration avec d’autres outils. Cette authentification autorise l’accès aux données liées aux sites que vous avez configurés dans la section « Gestion des autorisations ».

Une fois créée, la clé API est activée par défaut mais peut être désactivée à tout moment.

Lorsque vous désactivez la clé API, vous pouvez la réactiver ou en générer une nouvelle :

 

Renseigner la clé API dans ContentSquare

 

Pour le moment, seul ContentSquare utilise ce système d’authentification.  

Sur le Dashboard ContentSquare, rendez-vous dans le menu des paramètres. 

Sélectionnez la rubrique « Intégrations» :

Dans les intégrations, sélectionnez Kameleoon :

Renseignez ensuite vos identifiants et votre clé API :