Setting up a test on a single page app

3

min

quiz

What is a single page application?

Definition

A single page application is a website accessible through a unique webpage. The purpose is to improve the navigation experience of the visitor, and avoid loading a new page after every action.

We usually find these applications on mobile websites or on tradtional ones mostly used on mobile devices (for example: http://fr.mappy.com).

Impact on A/B testing

Only one page will actually load in the visitor’s browser, the following pages are dynamically displayed according to the user’s actions. It has an impact on A/B tests because Kameleoon will only load at the first page seen by the visitor. When a visitor browses from one page to another, Kameleoon is simply not aware of it. If you want to run a test on another page than the landing page, you need to let Kameleoon know that the visitor visited another page and that the test should be launched.

Test creation

To launch a test on a single page app, you have to add a JavaScript code to create a custom event and target your test.

Adding JavaScript code

First of all, you need to be logged in to your personal space. Use the left menu to go to the “My websites” page.

mes_sites_en.png

Click on the “ Configuration” button under the name of the website for which you want to create the A/B test.

bloc_site_en.png

Click on the “General” tab and add your script on the “Global custom script” box.

config_general_en.png

Here is an example of a personalized script you can use.

jQuery(document).ajaxComplete(function() { // Function called each time an asynchronous call such as Ajax runs on your website.
	Kameleoon.API.triggerEvent("LAUNCH_ABT"); // Call to the triggerEvent API function to indicate to Kameleoon to run the test.
});

You can also add JavaScript code on all variations of your test using the editor. For further information, you can read our article.

Targeting

Once you have written your script, just edit your test’s targeting options to add the “Custom event” condition.

To do this, when finalizing your test, select “Create a new segment” in the targeting step.

In the segment builder window (“Technical”), select “Custom event”

Indicate the name of the event, which is the one you added in the triggerEvent function, in our example LAUNCH_ABT. Kameleon launched the test only when the event is triggered.

Refreshing the page

Let’s say you want to test a changed block. Once the event is triggered, and the test launched, Kameleoon displays the variation you created. However, if the page is refreshed after an action by the user and the block has to load again, the visitor will see the reference version. To avoid this problem, we recommend you manage your changes and your variation using JavaScript code.

If, for example, you want to change the text on a button, you can use the following JavaScript code:

function changeButtonText() {
   Kameleoon.API.runWhenElementPresent("#CTA-ADD-TO-CART", function(){
      	jQuery("#CTA-ADD-TO-CART").text("Buy now")
   }, 200);
}

changeButtonText(); // Function called a first time when the page loads
jQuery(document).ajaxComplete(function() {
    changeButtonText(); // Fonction runs again after each asynchronous call
});