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
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.
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.
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.
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.