Set up and launch a hybrid A/B experiment

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

5 min

Advanced

Was this content useful?

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

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

Create a new hybrid A/B experiment

On the Experiment dashboard, click on “New Experiment”

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

Select a type of experiment. You can choose between two types of experiments:

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

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

Click on “Create”: the Code editor opens.

Note: It is also possible to create and modify a hybrid experiment from the Graphic editor. However, the Code editor is the preferred interface.

Configure a hybrid experiment from the Code editor

The Code editor is the recommended interface for creating a hybrid experiment.

It adapts to the particularities of hybrid experiments 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 experiment:

  • 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 experiment is in draft, scheduled or paused;
  • manual for online and deviated experiments (via the green button in the “Finalize” tab). This option is under development. Be careful! In the meantime, changes are taken into account immediately.

“Experiment” block

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

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

  • Code 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 experiment 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 experiment.

Open Graphic editor

The Graphic editor will then open instead of the Code editor.

Experiment results page

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

If your experiment 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 “Experiment” 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 experiment.

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
  1. Choose when the JavaScript code should run ;
  2. 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 experiment on the Graphic editor, you must validate each of the 3 steps to be able to launch your experiment:

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

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

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 experiment: by web page or by visitor segment.

  • Tracking and goals

Select at least one goal that you want to associate with your hybrid experiment.

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

Simulation

It is strongly recommended to simulate your hybrid experiment 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.

Experiment status

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

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

Once your experiment 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 experiment is associated, as well as the creation date of your experiment.

IDs

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

Publish

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

Click on it to immediately launch your hybrid experiment.

A summary pop-in shows the essential configuration of your experiment, 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 experiment has been successfully launched and the status of the experiment 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 experiment and its visibility on the site. Don’t worry if your experiment does not appear immediately!

You stay on the Code editor and can make changes to your experiment if necessary.

Save and update

During the creation of your experiment, you can save your changes and exit the Code editor. Your experiment will be saved as a draft and you will be redirected to the A/B Dashboard.

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

Two types of saving are available :

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

Configure a hybrid experiment from the Graphic editor

Edit a variation

For the server-side experiments, you can’t edit variations from the Graphic editor.

In the case of the hybrid experiments, you can edit the variations like the classic A/B experiments (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 experiments, you can access targeting options. 

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

Implement the experiment

After launching your experiment, 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 experiment

Tag

The type “Hybrid” is indicated on the related column.

Filter

On your Experiment dashboard, you can apply one or more filters to find an experiment. The “Server-side or apps” filter is selectable in the “Type” filter category. Only the server-side and hybrid experiments will be displayed.

Experiment card

By clicking on “Edit in the Code editor” (via the secondary actions of the related experiment card), the Code editor opens in a new tab.

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

  • In this article :