Set up an experiment on a single-page app (React, Angular…)

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 09/27/2022

2 min

Intermediate

Was this content useful?

What is a single-page app?

Definition

A single-page application is a website usually developed with a modern JavaScript client-side frameworks (React, Angular, Vue.js, Gatsby…) and which is 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.

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

  • your entire website is a single-page app;
  • a part of your website is a single-page app (the shopping funnel, for example).

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

Impact on experiments built with the graphic editor

Each case may have an impact on experiments built with our graphic editor because our application file (kameleoon.js) will only load at the first page seen by the visitor. If the SPA dynamically renders a new content on a page or if a visitor browses from one page to another, Kameleoon is simply not aware of it.

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

If your website is a full single-page app

You will need to activate a specific option in the Configuration page of your project.

To access it, click on “Projects” in the Admin menu of the Kameleoon App.

On card of your project, click on “Configuration”.

At the bottom of the “General” section you will find the Advanced settings.

Activate the “Enable support for dynamic websites” option.

It will allow 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.
  • monitor new SPA updates by using MutationObserver on the SPA (even though the page URL does not change at all) so that we can apply (or reapply) variation changes when something has changed on your website. Kameleoon currently supports the following actions done with the graphic editor: style changes, wording modification, position updates (swap, insert after / before), use of custom CSS selectors, etc.

If a part of your website is a single-page app

For example, only your funnel may be a single-page app.

You need to use the following 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 funnel)

REACT and JS SDKs

Kameleoon also provides a REACT SDK and a JS SDK for single-page apps. It enables a developer to use an alternate way of running experiments / feature flags on your application via the use of an SDK implemented within your single-page app.

You can refer to each SDK documentation to check out all possible features for your single-page app.

GatsbyJS plugin

We also provide a dedicated Kameleoon plugin that can be used with any GatsbyJS app. Please follow this documentation.

Activation API

You can also run experiments / feature flags on your application by using our JS Activation API. Read more about it

  • In this article :