Use the Code editor

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

5 min

Advanced

Was this content useful?

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 on your variations and save time.

Access the Code editor

From the Experiments dashboard

Click on “New experiment” from your Experiments dashboard.

The “Developer A/B” option gives access to the Code editor.

Once the option is selected, you can name your experiment 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 launching…).

You can verify 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 (it is the case here);
  • manual for online and deviated experiments (via the green button in the “Finalize” tab, as we will see below). This option will be available soon. In the meantime, modifications are taken into account immediately, so be careful! A banner at the bottom of the page warns you of this situation.

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).

The JS code is automatically checked when you leave the code modification area (for example when clicking on the “CSS” tab, in the same way as in the pop-ins of the Graphic editor.

If an error is detected, a message warns you.

All you have to do is correct the piece of code. Your code will be checked again if you make changes to it.

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 on the original variation.

Tags and descriptions

Edit your experiment description or associated tags if you need to.

URL of the tested page

Change the URL of the page for your experiment 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 on the selected variation(s) of your experiment.

  • On the left side, you can add, duplicate, rename or delete a variation.
  • On the right side, you can add, modify or delete code on the JS and/or CSS fields. It will apply to the selected variation. The JS code is checked as in the “Experiment” tab.

Add a variation

Click on “+ Add a variation”.

The colored circle associated with the variation fills up 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 the Graphic 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 by parameter one.

Preview

When you click, the preview URL opens 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 is generated.

Delete

A pop-in asks you to confirm your choice.

You cannot delete a variations if it is the last one. The experiment must contain at least one variation.

Finalize tab

Finalization steps

On the left 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 displays the details of the chosen configuration.

Traffic distribution

Click the pencil iconto set up the traffic distribution on your experiment.

Confirm your choice: the step is validated, a green check indicates it in the Code editor.

Targeting

Set up the targeting on your experiment: by page or by segment.

Confirm your choice: the step is validated, a green check indicates 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 is validated, a green check indicates 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 so, simply click on the “Simulate” button to open the simulation mode in a new tab of your browser.

Status

On the right 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 your experiment 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 more information on schedule

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 launch of an experiment and its visibility on the website. 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 (it is the case here);
  • manual for online and deviated 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 its experiments based on their type: classic A/B experiments, MVT tests, server-side A/B experiments and developer A/B experiments.

Only the experiments created with the Code editor will be displayed.

Card

By clicking on “Finalize”, the Code editor opens 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

You can also create 100% server-side or hybrid experiments using the Code editor.

Find here our documentation on server-side experiments

Find here our documentation on hybrid experiments

  • In this article :