Set up an experiment on a single-page app

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

2 min

Intermediate

Was this content useful?

What is a single-page app?

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 traditional ones mostly used on mobile devices (Mappy, for example).

But not all cases of single-page involve an entire website. There are three possible cases:

  • your entire website is single-page;
  • a part of your website is single-page (the shopping tunnel, for example);
  • a content in one of your pages is refreshed dynamically without loading the URL (for instance when a visitor interacts with a content of your page that triggers a refresh of the page).

We will further detail the procedures to be followed in each case.

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 experiments 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 your website is a full single-page app

When installing Kameleoon, your CSM will likely detect that your website is a full single-page app and activate a specific option.

This option allows Kameleoon to detect visitor navigation between pages by observing dynamic URL changes. When a change occurs, Kameleoon reloads its entire engine.

The behavior of Kameleoon is well explained in our Developers documentation.

If a part of your website is single-page

For example, your tunnel may be a single page app to optimise the user experience.

You need to use this particular API and to insert this code in the global script of your Kameleoon site:

if (location.href.indexOf("mySPAWebsitePart") != -1)

{

   Kameleoon.API.Core.enableSinglePageSupport();

}

With that code, Kameleoon will catch the navigation between each step of your funnel and reload its engine to execute back all your experiments.

(Replace “mySPAWebsitePart” by the URL of your tunnel)

If a content in one of your pages is refreshed dynamically without loading the URL

This situation is more complex than the previous two. For example, an action within the same page dynamically refreshes the content of the page without loading the URL.

Let’s say you are running an experiment on a product page to update the whole layout of the page. When a visitor lands on that page, Kameleoon assigns a variation to that visitor. But the visitor can interact with a dropdown list and when an option from the list is selected by, the content of the page is dynamically refreshed. Kameleoon won’t be able to detect it and the original page will be shown to the visitor. To avoid this, you can implement that piece of code on your website or in the global script section of the Kameleoon site. This code will listen to changes that occur in the dropdown list and reload Kameleoon engine, displaying the same variation to the visitor.

var dropDownList = Kameleoon.API.Utils.querySelectorAll("#mydropdownID")[0];
Kameleoon.API.Utils.addEventListener(dropDownList, "change", function() {
Kameleoon.API.Core.load();
});

React plugin for single-page apps

Kameleoon also provides a React plugin for single-page apps. It enables a developer to use Kameleoon APIs to change React components properties.

  • In this article :