Use the Code editor

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

The Code editor is composed of a header and 3 blocks.

1. Header
2. Experiment tab
3. Variations tab
4. Finalize tab
5. 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.

Variation menu

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 iconto set up the traffic distribution on your experiment.

To change the traffic allocation, click and hold the mouse down to drag the slider of a variation; alternatively, enter the percentage directly by clicking on the number displayed to the right of the slider. The traffic that you don’t assign to any of your variations will be automatically attributed to “Traffic excluded”.

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.

Activation buttons

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.

For out more about scheduling

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.