Passer au contenu principal
Regardez cette vidéo pour plus d’informations sur l’utilisation du Code editor. Dans cet article :
  • Un aperçu de l’interface et des principales fonctionnalités du Code editor.
  • Des instructions étape par étape pour créer des variations à l’aide du Code editor, notamment pour travailler avec du code HTML, CSS et JavaScript.
  • Des conseils pour optimiser vos variations pour un impact maximal.
  • Les bonnes pratiques pour tester et valider vos variations avant de lancer votre expérience.

​
Avantages utilisateur

Avec le Code editor de Kameleoon, vous pouvez créer, lancer et gérer des expériences basées sur le code sans utiliser le Graphic editor. Injectez du code JavaScript ou CSS directement dans vos variations et gagnez du temps.

​
Accéder au Code editor

​
Depuis le dashboard Experiments

Cliquez sur New experiment dans votre dashboard Experiments > With the code editor.
Ensuite, vous pouvez nommer votre test et l’associer à un site web et à une URL de page.

​
Structure du Code editor

Notre Code editor a la structure suivante :
  • Header : affiche le nom et le statut de l’expérience. Inclut également les boutons Simulate et Launch.
  • Panneau des variations : liste les variations et vous permet d’en ajouter de nouvelles. Chaque variation est sélectionnable pour modification.
  • Zone de code : vous pouvez éditer le code JavaScript (JS) ou CSS spécifique à la variation sélectionnée. Inclut des onglets pour basculer entre JS et CSS.
  • Barre latérale gauche : inclut les critères que vous devez définir avant de lancer votre expérience et les paramètres généraux.

​
Informations sur l’expérience

Le header affiche les informations principales associées à l’expérience :
  • son nom
  • son statut
  • la dernière interaction (par exemple, dernier enregistrement, mise à jour, date de lancement).
Survolez l’icône ? pour accéder à des informations supplémentaires sur l’expérience. Vous pouvez vérifier le statut de votre expérience et vous assurer que vos modifications ont été enregistrées. Deux types d’enregistrement sont disponibles :
  • Automatique, lorsque le statut de l’expérience est draft, scheduled ou paused.
  • Manuel, pour les expériences online et diverted (via le bouton vert dans l’onglet Finalize).

​
Actions du header

​
Simulate

Nous recommandons fortement de simuler votre expérience Developer A/B pour confirmer que votre expérience s’affiche et fonctionne correctement. Pour simuler votre expérience, cliquez sur Simulate pour ouvrir le mode simulation dans un nouvel onglet.

​
Schedule

Pour planifier votre expérience :
  1. Cliquez sur le menu à trois points à droite de Simulate > Schedule.
  2. Spécifiez une date de début, une date de fin, ou les deux.
  3. Configurez les options Advanced schedule si nécessaire.
  4. Cliquez sur Schedule pour confirmer la création de votre planification.
Cliquez sur +Add a schedule pour ajouter plusieurs planifications à votre expérience.

​
Estimer la durée

Pour estimer le temps nécessaire pour que votre expérience obtienne des résultats exploitables :
  1. Cliquez sur le menu à trois points à droite de Simulate > Estimate the duration.
  2. Spécifiez les informations requises.
  3. Cliquez sur Calculate.

​
Panneau Variations

​
Insérer votre code

Vous pouvez ajouter, modifier ou supprimer du code dans les champs JS et/ou CSS (sélectionnez l’onglet correspondant : JS ou CSS) pour toutes les variations. En haut à droite de la fenêtre de code se trouve une option d’agrandissement. Cliquez sur ce bouton pour agrandir la zone de code. Vous pouvez également diviser la fenêtre de code en deux, soit verticalement, soit horizontalement, à l’aide de boutons dédiés. Cliquez à nouveau sur le bouton pour restaurer la vue par défaut. Cliquez sur Add variation pour ajouter une nouvelle variation. Cliquez sur le chevron pour ajouter une code variation ou une URL redirection. Notre éditeur de code vous propose plusieurs fonctionnalités :
  • Auto-complétion JavaScript : lorsque vous commencez à taper, l’éditeur affichera une liste déroulante d’options d’auto-complétion suggérées, vous permettant de choisir la méthode, le paramètre ou la variable souhaité. Des informations au survol et la signature des méthodes sont également affichées, afin que vous puissiez compléter votre code avec moins d’erreurs.
  • Détection des erreurs de syntaxe : les erreurs de syntaxe de code sont soulignées, et une fenêtre au survol vous montrera plus d’informations sur l’erreur.
  • Sélection de couleur CSS : dans l’éditeur CSS, un sélecteur de couleur pop-up vous permet de remplir automatiquement vos valeurs RGBA.
Kameleoon fournit une API et plusieurs fonctionnalités recommandées pour écrire votre code JavaScript. Notez que Kameleoon n’inclut pas jQuery ; à la place, il utilise la version déjà présente sur votre site web. Comme Kameleoon peut se charger avant jQuery, vous devez vous assurer que jQuery est entièrement chargé avant d’exécuter le code JavaScript de votre variation. Pour vérifier si jQuery a été chargé, utilisez le code suivant : 
Kameleoon.API.Core.runWhenConditionTrue(function(){
 return typeof jQuery != "undefined"; 
 //allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.
 
}, function(){
 //Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function
 
 Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){
 
 //Enter here your JavaScript code
 jQuery("#bloc-2345").text("My new text");
 
 });
 
}, 200);
Le code JavaScript ne s’exécute pas directement dans l’éditeur. Pour prévisualiser votre modification, simulez votre expérience.
Si vous souhaitez plus d’informations sur Kameleoon.API.Core, vous pouvez consulter notre documentation pour développeurs : Cliquez sur le menu à trois points pour afficher le menu de variation. Vous pouvez :
  • Renommer une variation
  • Prévisualiser une variation
  • Ajouter une limite d’affichage
  • Supprimer une variation
Les modifications apportées dans ce menu ne s’appliquent qu’à la variation sélectionnée.

​
Renommer la variation

Cliquez sur Rename variation pour modifier le nom d’une variation. Saisissez son nouveau nom et cliquez sur l’icône X ou appuyez sur entrée pour confirmer.

​
Aperçu

Cliquez sur Preview variation pour ouvrir votre variation dans un nouvel onglet et vérifier son affichage.

​
Ajouter une limite d’affichage

Cliquez sur Add a display limit pour contrôler la fréquence d’affichage d’une variation. Activez les limites que vous souhaitez. Survolez l’icône ? pour afficher une infobulle fournissant plus d’informations sur une limite. Cliquez sur Save pour confirmer vos choix.

​
Supprimer

Cliquez sur Delete variation > Yes pour supprimer une variation. Vous ne pouvez pas supprimer la dernière variation : vous devez avoir au moins une variation dans votre expérience.

​
Dupliquer

Cliquez sur l’icône de duplication à droite du menu à trois points pour générer une copie de la variation.

​
Barre latérale gauche

Dans la barre latérale gauche, vous trouverez les critères que vous devez définir avant de lancer votre expérience. Vous ne pouvez pas lancer votre expérience sans avoir complété ces étapes.

​
Étapes de finalisation

Les étapes sont les mêmes que dans le Graphic editor :
  • Targeting
  • Traffic allocation
  • Goals
  • Integrations
Cliquez sur chacune de ces sections et définissez les critères requis. Une coche verte apparaîtra à côté des sections lorsque vous les aurez complétées, et le bouton Launch deviendra bleu. En savoir plus sur ces étapes de finalisation

​
Paramètres généraux

Vous trouverez ici les paramètres généraux de votre expérience. Ce menu se compose des sections suivantes :
  • Main information
  • Experiment code
  • Experiment custom script
  • Advanced settings

​
Main information

Ici, vous pouvez gérer les informations principales de votre expérience. Vous pouvez spécifier l’URL que l’éditeur charge, les tags de votre expérience et son hypothèse.

​
Experiment code

Vous trouverez ici le code général de votre expérience. Kameleoon applique ce code à chacune des variations de votre expérience. Cliquez sur le toggle pour ajouter ce code à la variation originale.

​
Experiment custom script

Le code JavaScript ajouté dans cette section vous permet d’écrire du code global qui s’applique spécifiquement à l’expérience. Ce code s’exécute en parallèle du script global de Kameleoon, garantissant que toutes les modifications sont automatiquement supprimées à la fin de l’expérience. De plus, ce script s’exécute avant le code Experiment et le code Variation, et il s’exécute indépendamment des conditions de ciblage que vous avez définies, ce qui signifie qu’il s’exécutera toujours dès que Kameleoon se chargera.

​
Advanced settings

Ici, vous pouvez accéder aux paramètres avancés de votre expérience.
Fenêtre d’attribution personnalisée
Utilisez cette section pour définir une fenêtre d’attribution en jours et heures. La fenêtre d’attribution est la période durant laquelle les conversions et revenus d’un visiteur sont liés à une variation spécifique. Par défaut, la fenêtre d’attribution est définie au niveau du site web, mais vous pouvez la personnaliser ci-dessous avant de lancer votre expérience. En savoir plus sur les fenêtres d’attribution personnalisées ici.
Display limits
Consultez la section ci-dessus sur les limites d’affichage. Vous pouvez configurer des limites d’affichage dans Advanced settings ou dans le menu Variation. La section Advanced settings offre un aperçu de toutes les limites que vous avez configurées, quel que soit l’endroit où elles ont été définies.
Options de code JavaScript
Activez cette option pour charger le code JavaScript de l’expérience après le chargement de la page. Cette option garantit que tous les éléments de la page sont entièrement chargés avant d’exécuter le code JavaScript, évitant les conflits et améliorant les performances. Elle évite les problèmes liés au contenu dynamique ou aux scripts s’exécutant trop tôt, ce qui peut être utile si vos variations dépendent d’éléments qui se chargent après le rendu initial de la page.