What is server-side A/B testing?

Kameleoon A/B testing in server-side mode is possible thanks to the availability of our SDKs on Java, .NET (C#), Node.js, PHP and on mobile platforms (iOS and Android).

Working server-side means testing your conversion optimization hypotheses through your back-end architecture rather than via your visitor’s browser (client-side A/B testing via a JavaScript tag). Whereas our JavaScript framework retrospectively changes HTML pages once these have been generated by the server via standard DOM-handling APIs (client-side testing), our server SDKs let you make these changes directly at the point where the HTML pages are generated (server-side testing).

More information on the Kameleoon server-side and its benefits

 

Why and when choose server-side rather than client-side?

• In the case of client-side A/B testing, the A/B test is rendered on the client-side through JavaScript. This solution is easily accessible to marketers with average technical knowledge: edition with a graphic interface for simple modifications on look and feel.

• In the case of server-side A/B testing, the A/B test is rendered directly on the web server. It allows making more complex tests, with less impact on page load time and no flickering. Server-side testing is intended for IT, product and development teams: necessity to code the variation back-end and to push a code release. It therefore requires more flexibility and organisation in the process of creating experiments.

 

How to create and launch a server-side A/B test?

On the side menu of the back-office, click on “New project” (or “New test” on the A/B test Dashboard).

 

A pop-in is displayed on which you can choose between:

• Classic A/B test;
• Multivariate test (MVT);
• Server-side A/B test;
• Code-based A/B test.

Select “Server-side A/B test”.

 

We offer two types of test:

• 100% server-side;
• hybrid (both client and server).

Enter the mandatory fields and click on “Create”.

The code editor launches in a new tab.

 

When the server-side option is selected, the Code Editor offers only certain actions. The others must be directly integrated into the code of your website.

Header

The header displays the main information associated with the test:

• its name (you can double-click to edit it) ;
• its status (draft, scheduled, 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 delete JSON data.

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, the 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 server-side A/B test.

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.

It allows you to inject JSON data on the variations of your server-side A/B test.

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

On the left side, you can add, duplicate, rename or remove a variation.

In the right part, you can add, modify or delete JSON data. This will apply to the selected variation.

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 server-side test.

Variation menu

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

You can rename, duplicate or delete the variation. The changes made via this menu will then apply only to the selected variation.

“Finalize” block

Finalization steps

On the left side, you have to validate at least two steps to be able to launch your test:

• traffic distribution ;
• goal(s) ;
• targeting (optionnal).

On click, each step will display the details of the chosen configuration.

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.

Goal(s)

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

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

Targeting

• For Java and C# server-side experiments: you can add a targeting based on custom data. This step is optional.
• For Nginx or Apache server-side experiments: you can add a targeting based on page URL(s). It is a mandatory step for these experiments as our web servers modules (Nginx or Apache) work by doing an internal redirect (page A or B). To know more, please read this technical documentation ;

A segment used in a server-side experiment is of the “server-side” type. More information on this segment type

Select from the drop-down list the segment you wish to associate with your experiment, or click on “Create a new segment” to open the pop-in window for creating a server-side segment.

 

• If you have already created a server-side segment: you will find it in the drop-down list and you can associate it directly to the experiment.

 

• If you want to associate a client-side segment :
  • if it contains only the targeting conditions specific to server-side segments (“custom data” and “page URL”) and is not already used in an active experiment, then you can find it in the drop-down list. However, an action is required to associate it. The pop-in asks you to choose between duplicating it (its copy will automatically be of type “server-side”) or transforming it into a “server-side” segment (this action is irreversible);
  • if it contains only the targeting conditions specific to the server-side segments (“custom data” and “page URL”) but is already used in an active experiment, you will find it in the drop-down list and the only action proposed is duplication (its copy will automatically be of type “server-side”). By hovering over the list icon at the bottom left, you can display all the active experiments on which this client-side segment is used.

 

 

• If you want to create a server-side segment: click on “Create a new segment” and follow the instructions specific to this type of segment.

 

Validate: the server-side segment is associated with your experiment! Targeting will be done according to these criteria. A green check indicates validation in the code editor.

 

Test status

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

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 server-side 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 A/B server-side test.

Activation buttons

Publish

Click on the “Publish” button to immediately launch your server-side A/B test.

A summary pop-in shows the main configuration of your test, as well as the steps to follow. All you have to do is code your server-side variations, using the appropriate server-side 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”.

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, scheduled or paused;
• manual for online and deviated tests.

How do I find a server-side 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 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.

How to access and analyze the results of your server-side A/B test?

 

In a 100% server-side A/B test, the analysis can only be done in Kameleoon. It excludes third party analytics solutions. If you want to send the results to Google Analytics for example, you need to create a hybrid test and follow this process.

As with all other types of tests, the results page of a server-side A/B test is accessible from the test card on the A/B Dashboard.

You cannot change the status of the test from this page and the targeting tab is not available in the right side menu.

From the editor

You can manage your A/B tests with the Kameleoon editor. For that, once the editor launched, click on the menu  located at the top left of the Kameleoon header, then click on “Open other tests”.

The test management window opens, giving you access to the list of tests you have created. This is where you can perform basic operations on your tests, such as renaming, duplicating or deleting them. You can also create, stop or pause a test.

Use the search bar to find a test.

It is possible to filter or sort the tests. The available filters are: status (online, draft, paused, stopped, deviated or planned); the tag(s) associated with a test; the last edition date.

The sort option proposes to classify your tests by edition date, creation date or name (in ascending or descending order).

Click on the name of a test to display the block on the right containing the main information on it. Use the icons under the title of the test and its status to duplicateor deletethe test. You can also start, stop or pause the test by clicking on the arrow to the right of the status:

This action is only possible after the test has been planned or launched.

From your personal space

You can also manage your tests from your personal space. To do this, log on to http://back-office.kameleoon.com and go to the “A/B test” deshboard, using the home page or left side menu.

At the top of the page, key figures tell you how many tests have been launched and how many tests are currently online.

All your launched tests appear on this page, regardless of their status. You can filter this view if you want to display only the tests of a certain site or the tests of a certain status. You can also choose to filter the display based on the tags assigned to the tests.

For each test, you will see at a glance the improvement of the conversion rate, the winning variation and the status of the test.

Move your mouse over a test to access the available actions.

Click “View Results” to load the results page of this test. The buttons at the bottom right allow you to edit your test (by opening the editor) or to duplicate it. Tap the “•••” icon to see other actions that will allow you to delete or pause the test.

If it is a code-based test, you can open it directly in the code editor by clicking on the </> icon.

Simplified view

You have created a lot of A/B tests and the loading of data slows down the display of your Dashboard?

You can choose a simplified view of your Dashboard. Without KPIs, the Dashboard loads much faster and you save valuable time. You can find your KPIs directly on the results pages.

(To activate this option, please contact your Customer Success Manager.)