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.
Select JS/CSS to create an experiment using your custom JS/CSS code.
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
The Code editor is composed of a header and 3 blocks.
- Header
- Experiment tab
- Variations tab
- Finalize tab
- Save and exit
Header
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 (via the green button in the Finalize tab, as we will see below).
Experiment tab
By default, the Variations tab is displayed. To access the Experiment one, simply click on Experiment.
Test-specific code
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
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.
Also add JavaScript and CSS code to the original
With this option located at the top right of the code window, you can include or exclude the original from your modifications.
If the box is checked, the JavaScript or CSS code will also be injected into the original variation.
Tags and descriptions
Edit your experiment description or associated tags if you want to.
URL of the tested page
Change the URL of the page for your test here. By default, the URL is the one you entered in the pop-up window when creating your Developer A/B experiment.
Open the Graphic editor
The Graphic editor will then open instead of the Code editor.
Results page
If the experiment has already been launched, you will also see a link to access the results.
Variations tab
This is the default view for the Graphic Editor.
It allows you to inject JavaScript and/or CSS code into the selected variation(s) of your experiment.
- On the left-hand side, you can add, duplicate, rename or delete a variation.
- On the right-hand side, you can add, modify or delete code in the JS and/or CSS fields. This will apply to the selected variation. The JS code is checked as in the Experiment tab.
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
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.
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;
- Find all the options already displayed in theGgraphic editor.
Changes made via this menu then only apply to the selected variation.
JavaScript code options
- Choose when the JavaScript code should run;
- If the JavaScript code corresponds to a pop-in, you can limit its display by activating some of the options presented.
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 tab
Finalization steps
On the left-hand side, you need to validate each step to launch your Developer A/B experiment. 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.
Traffic distribution
Click the pencil icon
Confirm your choice: the step will be validated, with a green check indicating it in the Code editor.
Targeting
Set up the targeting on your experiment: by web page or by segment.
Confirm your choice: the step will be validated, with a green check indicating it in the Code editor.
Tracking tools and goals
Select at least one goal in order to activate Kameleoon as a reporting tool, then select the other tracking tools you may wish to associate with your experiment.
Confirm your choice: the step will be validated, with a green check indicating it in the Code editor.
Simulation
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.
Status
On the right-hand side, you can read information related to this experiment:
- the status of the experiment;
- the URL of the tested page;
- the main date associated with the experiment (creation, launch, stop);
- the IDs of all the variations.
Click to pull down each menu.
Once your experiment is launched, you can change its status by clicking on the arrow to scroll through the possible actions.
Informations
Click to unfold this insert. You will find the website to which your Developer A/B experiment is associated, as well as the date on which your test was created.
IDs
Click to unfold this insert. You will find the ID of your experiment as well as the ID of each of the variations of your Developer A/B experiment.
These buttons become active when the 3 necessary finalization steps have been completed.
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.
Publish
Click on the Publish 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.
Create and launch a server-side or hybrid experiment
Important Notice: Sunset of SDK / Hybrid type of experiments
Effective September 30, 2023, we will be deprecating the use of SDK / Hybrid type of experiments. This means that these options will no longer be supported beyond the specified date. For further details and guidance on migrating from SDK / Hybrid experiments to supported alternatives, please refer to the updated documentation or reach out to our support team.
You can also create 100% server-side or hybrid experiments using the Code editor.
