Setting up a test on a single page app

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 to load a page after every action.

We usually find these applications on web mobile or on website mostly used on mobiles (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 being dynamically displayed according to his actions. It has an impact on the A/B test because Kameleoon will only load at the first page seen by the visitor. When a visitor navigates through the pages, 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 needs to start.

Creation of the test

To launch a test on a single page application, you will 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 on your personal space. Use the left menu to go to the “Configured sites” page. 

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

Add your script on the “Personalized tracking script” box.

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 from the editor. For further information, you can read our article.

Targeting

When you have written your script, you simply have to edit the targeting options of your test to add the “Custom event” criterion.

To do so, during the step 2 of the “Test finalizer” button, choose to launch the test on a “Specific advanced segment”.

In the “Advanced targeting” window, select “Custom event” in the “Technical” part.

Indicate the name of the event, which is the one you added in the triggerEvent function. Here, triggerEvent, here LAUNCH_ABT. Kameleon will only start the test when the event is triggered.

Refreshing the page

When the test is launched, and once the event is triggered, Kameleoon displays the changes you planned. However, if the page is refreshed after an action of the user on the page, and the block changed by Kameleoon has to load again, the visitor will see the reference block. To overcome this behavior, we recommend to manage your changes and your variation with JavaScript code.

If, for example, you want to change the text on a button. To do so, 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 });
Have more questions? Submit a request
Powered by Zendesk