In this article:
– An overview of the Code editor’s interface and main features
– Step-by-step instructions for creating variations using the Code editor, including working with HTML, CSS, and JavaScript code
– Tips for optimizing your variations for maximum impact, such as using custom code to create unique design elements
– Best practices for testing and validating your variations before launching your experiment
User benefits
With the Kameleoon Code editor, you can create, launch and manage code-based experiments without using the Graphic editor. Inject JavaScript or CSS code directly into your variations and save time.
Access the Code editor
From the Experiments dashboard
Click on New experiment on your Experiments dashboard.
The In the Code editor option will give you access to the Code editor.
Then you can name your test and associate it with a website and a page URL.
From the Graphic editor
You can open a Developer experiment in the Code Editor via the Graphic Editor.
Open an existing experiment or Click on the burger icon > General set-up > Open Code editor.
Structure of the Code editor
Our Code editor has the following structure:
- Top bar: Displays the experiment name, experiment status and last interaction.
- Variation panel: Lists variations with an option to add new ones. Each variation is selectable for editing.
- Main code area: Allows editing JavaScript (JS) or CSS code specific to the selected variation, with tabs to toggle between JS and CSS.
- Finalize button on the top-right corner for saving and publishing changes.
- Bottom options: Includes a “Save and exit” button for saving changes without finalizing and an expand option for the code area.
Top bar
The header displays the main information associated with the experiment:
- its name (double-click to edit);
- its status (draft, online, planned, paused, deviated, stopped);
- the last interaction (last save or update, date of launch, etc).
You can check the status of your experiment and that the changes you made were saved. Two types of saving are available:
- automatic when the experiment is in draft, scheduled and paused status (this is the case here);
- manual for online and diverted experiments.
Variations panel
For all variations, you can add, modify or remove code on the JS and/or CSS fields (select the corresponding tab at the top: JS/CSS).
At the bottom right of the code window is an expand option.
Click on this button to expand the code area or use the following keyboard shortcut (while editing your code):
- On Windows: CTRL + B
- On MAC OS: Control + SHIFT + B
To add a variation, click on + Add a variation.
The colored circle associated with the variation becomes full when the variation is selected. You can navigate between the different variations of your experiment.
Our code editor provides you with several features:
- JavaScript auto-complete. As you start typing, the editor will display a drop-down list of suggested intelligent auto-completion options, allowing you to pick the desired method, parameter or variable. Hover information and method signature information is also shown so you can complete your code with fewer errors.
- Syntax error detection. Code syntax errors are underlined and a hover window will show you information about the error so you can correct it before compiling or running the code, avoiding lengthy delays and further errors.
- CSS color selection. In the CSS editor, a pop-up color selector allows you to automatically fill in your RGBA values, so you don’t have to use another tool to generate the values then cut and paste them into your CSS code.
Click on the 3 dots to display the variation menu.
You can:
- Edit JS code options on the variation (you can choose between several display settings);
- Edit the URL redirection of the variation;
- Preview, rename, duplicate or delete your variation.
Changes made via this menu then only apply to the selected variation.
JavaScript code options
This pop-in allows you to configure specific behaviors for the JavaScript code.
- Load this JavaScript code after page load (at DOMReady): Ensures the code runs only after the DOM is fully loaded.
- This JavaScript code corresponds to a pop-in: Marks the code as related to a pop-in feature.
- Limit the number of displays during a given visit: Allows setting a maximum number of displays per visit.
- Limit the number of displays for a given visitor: Restricts the total number of displays for a visitor across sessions.
- Define a minimum delay between 2 displays: Sets a delay between consecutive displays of the code’s output.
Click Edit to apply these settings.
Redirect to a URL
By default, no redirection is set on the variation. However, you can set up a global redirection or a redirection by parameter.
Preview
When you click, the preview URL will open in a new tab. You can then check the display of your variations.
Rename
Edit the name of your variations.
Duplicate
A copy of the variation will be generated.
Delete
A pop-in will ask you to confirm your choice.
You cannot delete a variation if it is the last one, as the experiment must contain at least one variation.
Finalize
Please note that during the year, the creation of variations and the finalization flow will merge into a single streamlined process. This update will introduce a first step on the left menu of the Finalization page, specifically dedicated to variation creation. Stay tuned for more details as this enhancement is implemented.
Click on the Finalize button to access the Finalization flow of your code-based experiment.
For reference, the general code applicable to your experiment or personalizations can now be found on the Finalization page. Make sure to review this page to ensure all elements are correctly configured before publishing.
Finalization steps
The steps are the same as in the Graphic editor:
- traffic distribution;
- targeting;
- tracking tools and goals.
When you click, each step will display the details of the chosen configuration.
Learn more about these Finalization steps
Experiment code
You can find the general code of your experiment here.
A toggle in the upper-right corner allow you yo Add code to the original too.
Simulate
It is strongly recommended that you simulate your Developer A/B experiment to check the display and targeting of variations. To do this, simply click on the Simulate button to open the simulation mode in a new tab in your browser.
Schedule
You can schedule the start of your Developer A/B experiment by setting a start date, an end date, or both.
Advanced planning options are also available.
Launch
Click on the Launch button to immediately launch your Developer A/B experiment.
A pop-in will confirm that the experiment has been successfully launched and its status will change from Draft to Online.
You stay on the Code editor and can make changes to your experiment if necessary.
Note: There may be a short latency time (up to 10 minutes) between the launching of an experiment and its visibility on the website. So don’t worry if your experiment does not appear immediately!
Save and update
During the creation of your experiment, you can save your modifications and leave the Code editor. Your experiment will be saved as a draft and you will be redirected to the Experiments Dashboard.
Once your experiment is online, you can always make changes to it. You can check that your changes have been saved in the top left corner of the code editor, just below the experiment name.
Two types of saving are available:
- automatic when the experiment is in draft, scheduled and paused status (this is the case here);
- manual for online and diverted experiments (via the green button in the Finalize tab).
Developer A/B experiments management
The experiments created through the Code editor can be retrieved on the Experiments Dashboard.
Tag
The “Developer” tag is automatically associated with your Developer A/B experiment created from the Code editor.
Filter
On the Experiments Dashboard, a filter enables the user to find their tests by type: classic A/B experiments, MVT experiments, server-side A/B experiments and developer A/B experiments.
Only the experiments created with the Code editor will be displayed.
Card
When you click on Finalize, the Code editor will open in a new tab.
If your experiment has already been launched, you can modify it in the code editor by opening the three-dot menu on the right.
As with all experiments cards, it is also possible to duplicate the experiment and its configuration, delete it, manage its status and access the results.
