Run A/B tests on any Single Page Application (SPA) framework
Application stacks are ever-changing Single Page Applications (SPA) built with a JS Framework such as React, GatsbyJS, Vue.JS, among many others, have become very popular as they offer very smooth experiences and are particularly appreciated by users. A/B testing with them can become a real headache for marketers if their optimization solution doesn't support these stacks.
SPAs don’t require page reloads, creating a challenge for A/B testing solutions
When a user views a traditional non-SPA 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 a Single Page Application, dynamic navigation means that once the page is loaded, it doesn’t require page reloading. Instead, virtual page views will be loaded by the App as visitors browse different areas of the website. The goal is to build a more natural user experience similar to what you could have with native mobile apps, by removing page loads, and reducing waiting time. This is made possible with JavaScript frameworks such as ReactJS, VueJS, or GatsbyJS.
But this lack of reloading has an impact on A/B tests, because the solution will only load once at the first page seen by the visitor. When a visitor browses from one page to another, the solution is simply not aware of it. If the tag of your optimization solution loads only once and doesn’t update according to the visitor’s progression, tracking his user journey in real time becomes complicated, if not virtually impossible.
Kameleoon is compatible with any Single Page Application framework
What good is a powerful technology if it can’t be used in any type of situation? Whatever JavaScript framework you are using for your Single Page Applications, you will be able to optimize it with Kameleoon.
There are usually 2 different scenarios in Single Page Applications. Each of them may have an impact on experiments built with the Kameleoon graphic editor because our application file will only load at the first page seen by the visitor.
1. The page doesn’t reload, but the URL is updated
Most Single Page Applications that are developed today are of this type. Even though the SPA loads virtual page views as visitors navigate different sections of the site, the 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. Additionally, most SPAs can add additional elements or dynamically change elements as a visitor interacts with the app.
Kameleoon solves this issue by monitoring in real time new updates by using MutationObservers on the SPA (even if the page itself doesn’t fully reload), so that we can apply (or reapply) variation changes when something has changed on the website.
For developers who utilize our Activation API to code experiments, there is now a new function that can be called on -demand to force the reloading of Kameleoon's engine to manage advanced use cases.
For users of the graphic editor, actions currently supported by Kameleoon include style changes, wording modification, position updates (swap, insert after or before) and use of custom CSS. Insertions of new elements on the page are not currently supported.
Ready to get started? See this step-by-step guide and technical documentation.
Request a demo to see this feature and the Kameleoon platform in action.
Questions? Curious? We'd love to hear from you. Please reach us at [email protected]
