Hybrid A/B test

3

min

quiz

Hybrid tests are a mix between the “Classic A/B tests” and the “Server-side A/B tests”.

They allow you to run both front-end and back-end tests.

Create a new hybrid A/B test

From the back-office, go to “New project”:

A pop-in opens, select “Server-side A/B test”:

Select a type of test. You can choose between two types of tests:

  • 100 % server side
  • Hybrid, both server and client-side

In the case of a “hybrid test,” the test is injected into the kameleoon.js application file, which is not the case for the purely server-side tests.

Click on “Create”: the code editor opens.

Note: It is also possible to create and modify a hybrid test from the graphic editor. However, the code editor is the preferred interface.

Configure a hybrid A/B test from the code editor

The code editor is the recommended interface for creating a hybrid test.

It adapts to the particularities of hybrid tests by presenting both the functionalities of the classic code editor and those of the server-side code editor.

 

Header

The header displays the main information associated with the test:

  • its name (you can double-click to edit it) ;
  • its status (draft, online, paused, deviated or stopped);
  • the last interaction (last save or update, publication date…).

You can check that the changes you have made have been saved. Two types of backup are available:

  • automatic when the test is in draft, scheduled or paused;
  • manual for online and deviated tests (via the green button in the “Finalize” tab). This option is under development. Be careful! In the meantime, changes are taken into account immediately.

“Test” block

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

Test-specific code

For all variations, you can add, modify or remove JavaScript code, CSS and/or JSON data (select the corresponding tab at the top).

The JavaScript code is automatically checked when you leave the code editing area (for example, by clicking on the “CSS” tab). If an error is detected, a message is displayed at the bottom of the page.

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

All you have to do is correct! Once your JavaScript code is 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.

At the moment, this JSON is not integrated in any SDK. Patience, this feature is under development!

Code options

If you click on the 3-point menu associated with the “Test specific code” menu, a sub-menu opens and allows you to access options.

Choose here to include or exclude the original of the changes you have just made. If the box is checked, JavaScript, CSS and/or JSON data will also be injected on the original variation.

Tags and description

Edit the description of your test or the associated tags if you wish.

URL of the tested page

You can edit the URL of the tested page here. By default, the URL is the one you entered in the pop-up window for creating your hybrid A/B test.

Open graphic editor

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

Test results page

If your test has already been launched, a link will take you to the results page.

If your test is stopped, a green button at the bottom of the editor offers you direct access to the results page.

“Variations” block

By default, the Variations block is displayed when you access the code editor.

  • In the left part you can add, duplicate, rename or delete a variation.
  • On the right side, you can add, modify or remove code in JavaScript, CSS and/or JSON fields. It will apply to the selected variation. The code is checked in the same way as in the “Test” tab.

At the moment, JSON is not integrated in any SDK. Patience, this feature is under development!

 

Add a variation

Click on “+ Add a variation”.

The color circle associated with the variation fills up when the variation is selected. This allows you to navigate between the different variations of your hybrid test.

Variation menu

By clicking on the 3 points to the right of each variation, a menu opens.

The changes made via this menu then apply only to the selected variation.

  • Edit the options in the JavaScript code on the variation (you can choose between several display parameters);
  • If necessary, enter the redirection URL for the variation;
  • Find all the options available in the classic graphic editor.

JavaScript code options

  • Choose when the JavaScript code should run ;
  • If the JavaScript code is a pop-in, you can limit its display by enabling some of the options shown.

Redirection URL

By default, no redirection is set on the variation. However, you can set up a global redirection or a parameter redirection.

Preview

When you click, the preview URL opens in a new tab. You can then check the display of your variations.

Rename

Edit the names of your variations.

Duplicate

When you click, a copy of the variation is created.

Delete

A pop-in asks you to confirm your choice.

“Finalize” block

Finalization steps

In the left part, as in the case of an A/B test on the graphical editor, you must validate each of the 3 steps to be able to launch your test :

  • traffic distribution ;
  • targeting (contrary to a 100% server-side test);
  • tracking and goals.

Traffic distribution

Click the pencil icon to set up the traffic distribution on your A/B test.

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

Targeting

Click on the pencil icon to set the targeting of your hybrid A/B test: by web page or by visitor segment.

Tracking and goals

Select at least one goal that you want to associate with your hybrid A/B test.

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

Simulation

It is strongly recommended to simulate your hybrid A/B test to verify the display and targeting of the variations. To do so, simply click on the “Simulate” button to open the simulation mode in a new tab of your browser.

Test status

At the top right, an insert reminds you of the status of your test: draft, online, paused, deviated or stopped.

Note: Planning is not available in the case of a hybrid test.

Once your test is launched, you can change its status by clicking on the arrow to scroll through the possible actions.

Information

The insert is unfolded by default. You will find the website to which your hybrid A/B test is associated, as well as the creation date of your test.

IDs

The insert is unfolded by default. At a glance, you will find the ID of your test as well as the IDs of each of the variations of your hybrid A/B test.

Publish

The “Publish” button becomes active when the 3 necessary finalization steps have been completed.

Click on it to immediately launch your hybrid A/B test.

A summary pop-in shows the essential configuration of your test, as well as the procedure to follow. All you have to do is code your variations on the server side, using the generated IDs. You can follow these instructions.

You can copy everything at once by clicking on “Copy all” at the bottom left.

Click on “Publish”: a message will confirm that the test has been successfully launched and the status of the test will change from “Draft” to “Online”.

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

You stay on the code editor and can make changes to your test if necessary.

Save and update

During the creation of your test, you can save your changes and exit 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 still make changes to it. The saving of your changes is indicated at the top left of the code editor, just below the test name.

Two types of saving are available :

  • automatic when the test is in draft or paused;
  • manual for online and deviated tests.

Configure a hybrid A/B test from the graphic editor

Edit a variation

For the server-side tests, you can’t edit variations from the graphic editor.

In the case of the hybrid tests, you can edit the variations like the classic A/B tests (via the editor or via the code): edit elements of a variation, add new elements on a variation.

Targeting options

As for classic A/B tests, you can access targeting options. 

However, targeting is not server-side. Configuring a targeting on a hybrid test is useful in the case of integration of a third party tool because it allows you to send data to this tool.

Implement the test

After launching your test, a pop-in displays the IDs you need to implement in the code of your website:

To learn more about the back-end/front-end bridge, please read our developers documentation.

Find a hybrid A/B test

Tag

The “Server-side” tag is automatically associated with your test.

Filter

On your A/B dashboard, you can apply one or more filters to find a test. The “Server-side A/B test” filter is selectable in the “Type” filter category. Only the server-side and hybrid tests will be displayed.

Test card

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

You can also open the test in the code editor by clicking on the </> icon that appears at the hover at the bottom of the map.

As with all A/B test cards, it is also possible to duplicate the test and its configuration, delete it (if it is in draft or stopped), manage its status and view the results.