Skip to main content
Single Page App

A/B testing and Personalization on Single Page App (React, Angular..).

August 12, 2021
Reading time: 
8 min

Application stacks are ever changing and do so very quickly. Single Page Applications built with a JS Framework such as React, Angular, Vue.JS, among many others, have become very popular as they offer very smooth experiences and are particularly appreciated by users. A/B testing them can become a real headache for marketers if their optimization solution doesn't support these stacks.

1 What's a Single Page App

A Single Page App is a web app that is accessed via a classical web page. Its particularity: Once the page is loaded, the Single Page App doesn’t require new loading.  The goal is to build a more natural user experience by removing page loads, and reducing waiting time. The rest of the page loads via JavaScript. This is made possible by JavaScript frameworks such as AngularJS, ReactJS, VueJS, EmberJS, MeteorJS and KnockoutJS.

2 A/B testing on Single Page App

When a user views a “classical” page and clicks on a link, a new page with a different URL loads, and the A/B testing snippet also reloads to make sure the context of the loaded page is evaluated by the solution. This enables you to track a user journey and to contextualize their experience if necessary.

With Single Page App, dynamic navigation doesn’t require page reloading. Instead, virtual page views will be loaded by the App as visitors browse different areas of the website. It has an impact on A/B tests, because the solution will only load at the first page seen by the visitor. When a visitor browses from one page to another, it is simply not aware of it. If your experimentation solution isn’t able to manage the lack of reload, contextualization of user navigation via their action during the visit becomes complicated, if not impossible.

 

If the tag of your optimization solution loads only once, as is the case with all dynamic JS frameworks, and doesn’t update according to the visitor’s progression, tracking his user journey in real time becomes virtually impossible.
Frederic de Todaro
Frédéric De Todaro
Chief Product Officer 

This is even more problematic if only one part of your website is a single page app, as it is usually the case with funnels. How can contents be adapted to the user’s progression in the funnel?

3 Kameleoon compatible with any Single Page App

What good is a powerful technology if it can’t be used everywhere? Whatever JS framework you are using for your Single Page Apps, you will be able to optimize it with Kameleoon.

Kameleoon has always combined high calculating performance and agility. That’s what makes it the most complete and performing solution in its market. Kameleoon helps optimize your conversions, whatever your projects.
Jean Noel Rivasseau
Jean-Noël Rivasseau
CTO, Kameleoon.

4 How we bypassed the problem of tests on Single Page App

There are usually 2 different scenarios:

1. THE PAGE DOESN’T RELOAD, BUT THE URL IS UPDATED

Most Single Page App that are developed today are of this type. Even though the SPA loads virtual page views as visitors navigates with different sections of the site, URls are being rewritten dynamically by the SPA.

Kameleoon will automatically detect visitor navigation between pages by observing dynamic URL changes. When a change occurs, Kameleoon reloads its entire engine and re-evaluate the whole context of the page so that experiments can still be run as usual on Single Page Apps.


2. THE URL REMAINS STATIC

This case is less common, and much more complicated. When the URL doesn’t change, most solutions won’t be able to detect any changes that occur within the Single Page App, because no transition to a new URL is detected. 

Our teams developed a dedicated API that forces the loading of Kameleoon’s tag even if the URL isn’t updated. 

For such advanced use cases, Kameleoon provides an Activation API function that can be called on demand to force the reloading of Kameleoon's engine, making real time tracking of the user's navigation possible.

Although in these cases, the elements that activate the API have to be defined manually, we are proud to announce that Kameleoon now is 100% operational on Single Page Apps.
Jean Noel Rivasseau
Jean Noël Rivasseau
CTO, Kameleoon

Does Kameleoon increase the risk of flickering on Single Page Apps

Kameleoon's anti-flicker technology also works perfectly with all Single Page App frameworks. Behind the scene, Kameleoon uses the MutationObserver technology to make sure experiment changes will be applied or reapplied at the right moment on your SPA, even during dynamic page reloads.

If you want to learn more about the flicker effect and why you should absolutely try to avoid it, we recommend our article on the subject.

You can read more about how to implement Kameleoon with your Single Page App here.

 

Topics covered by this article