Create and publish an A/B test with the code editor

3

min

quiz

User benefits

With the Kameleoon code editor, you can create, launch and manage code-based A/B tests without using the graphic editor. Inject JavaScript or CSS code directly on your variations and save time.

Access the code editor

From the back office or the A/B dashboard

Click on “New project” from the left menu, or on “New test” from your A/B dashboard. The “Code-based A/B test” option gives access to the code editor.

Once the option is selected, you can name your test and associate it with a website and a page URL.

From the graphic editor

You can open a code-based test in the Code Editor via the Graphic Editor.

Open an existing test 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. Test tab

  3. Variations tab

  4. Finalize tab

  5. Save and exit

Header

The header displays the main information associated with the test:

  • 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 test and that the changes you made were saved. Two types of saving are available:

  • automatic when the test is in draft, scheduled and paused status (it is the case here);
  • manual for online and deviated tests (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.

Test tab

By default, the Variations tab is displayed. To access the Test one, simply click on “Test”.

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 at the bottom of the page.

You can display the error or choose to ignore the message by clicking on the cross and make it disappear. A sidebar then appears on the right side of the editor and allows you to identify and locate the piece of code that is causing the problem.

All you have to do is correct the piece of code. Once your JavaScript code has been identified as correct, the sidebar disappears. Your code will be checked again if you make changes to it.

If several errors have been detected, they will be displayed one after the other as you make corrections.

Code options

In the “Code options” sub-menu which appears when you click on the 3-point menu, you can include or exclude the original from these modifications.

Choisissez ici d’inclure ou d’exclure l’originale des modifications que vous venez d’effectuer. Si la case est cochée, le code JavaScript ou CSS sera également injecté sur la variante originale.

Tags and descriptions

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

URL of the tested page

Change the URL of the page for your A/B test here. By default, the URL is the one you entered in the pop-up window when creating your code-based A/B test.

Open the graphic editor

The graphical editor will then open instead of the code editor.

Results page

If the test 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 A/B test.

  • 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 “Test” tab.

Add a variation

Click on “+ Add a variation”.

The colored circle associated with the variant fills up when the variant is selected. You can navigate between the different variations of your test.

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 test must contain at least one variation.

Finalize tab

Finalization steps

On the left side, you need to validate each step to launch you code-based A/B test. 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 A/B test.

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

Targeting

Click the pencil iconto set up the targeting on your A/B test: 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 A/B test.

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 code-based A/B test 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 test:

  • the status of the test;
  • the URL of the tested page;
  • the main date associated with the test (creation, launch, stop);
  • the IDs of all the variations.

Click to pull down each menu.

Once your test 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 code-based A/B test is associated, as well as the date your test was created.

IDs

Click to unfold this insert. You will find the ID of your test as well as the ID of each of the variations of your code-based A/B test.

Activation buttons

These buttons become active when the 3 necessary finalization steps have been completed.

Schedule

You can schedule the start of your code-based A/B test 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 code-based A/B test.

A pop-in will confirm that the test 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 test if necessary.

Note: There may be a short latency time (up to 10 minutes) between the launch of an A/B test and its visibility on the website. Don’t worry if your test does not appear immediately!

Save and update

During the creation of your test, you can save your modifications and leave the code editor. Your test will be saved as a draft and you will be redirected to the A/B Dashboard.

Once your test 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 test name.

Two types of saving are available:

  • automatic when the test is in draft, scheduled and paused status (it is the case here);
  • manual for online and deviated tests (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 warns at the bottom of the page you of this situation.

Code-based A/B tests management

The tests created through the code editor can be retrieved on the A/B Dashboard.

Tag

The “Developer” tag is automatically associated with your code-based test created from the code editor.

Filter

On the A/B Dashboard, a filter enables the user to find its tests based on their type: A/B tests, MVT tests, server-side A/B tests and code-based A/B tests.

Only the tests created with the code editor will be displayed.

Card

By clicking on “Edit” or “Finalize”, the code editor opens in a new tab.

As with all A/B test cards, it is also possible to duplicate the test and its configuration, delete it, manage its status and access the results.