What impact do JS frameworks have on A/B testing?
- No page refreshing
- Faster page load times
- Rich, smooth interactions
- Fewer data transfers
- Quicker development with reusable elements
- Well-established community of developers
These advantages have made these frameworks pretty appealing for developers, meaning they’re at the root of many web projects. They’re also the go-to answer for any new Single Page Application.
However, there is one wrinkle: the way these frameworks operate is problematic for A/B testing tools, client side (i.e. web browser).
In this system, when someone’s browsing a web page, the page doesn’t get refreshed - not even the URL. Each interaction an internet user has with a page changes its state (for example, the different elements visible on the screen). But since an A/B testing tool usually only applies changes once during the initial page load, the A/B testing tool can’t take these interactions into consideration.
With React JS, for example, each user interaction prompts one or more of the UI elements to refresh, effectively erasing any modifications made by the A/B testing solution.
We’re in the process of switching to a new framework on our site - ReactJS. We see two advantages to this: the ability to offer more advanced features to our users, and easier developer recruitment, since this is such a popular language. So we really need an A/B testing solution compatible with this new framework!
Michael Hamon, Head of UX at Leboncoin.fr
If your Single Page Application relies on one of the above frameworks, you’re already aware that starting an A/B test can quickly become a nightmare, sucking up a lot of web development time to get off the ground. This American Conversion Rate Optimization agency took on the challenge, and recounted just how difficult the journey was.
If we pare it down, there are 2 ways to A/B test a Single Page Application.
- The first consists of identifying the different ‘states’ of the application that you’re interested in, then setting it up so that an API is called to execute the desired modifications when each ‘state’ is presented. A ‘state’ might be showing a subscription form, loading a list of search results, etc.
- The second requires hardcoding certain modifications, sever-side, or a custom deployment for each new test campaign.
These solutions are often dependent on the framework in use
As you’ve probably deduced, these solutions require a lot of help by marketers from technical teams, though most marketers would far prefer to remain autonomous and agile. After all, using the above methods, it’s impossible to quickly test any optimization ideas.
A universal A/B testing solution
React is important for AB Tasty right now because it’s really taken off as a technical trend, especially in terms of migrating internet sites and everything to do with conversion funnels.
Benoit Lelong, Chief Technical Officer, AB Tasty
AB Tasty decided to confront this challenge head on. The best way to resolve the issue was to develop a significant technical integration that would make their entire line of products compatible, while maintaining its ease of use so popular among clients. In terms of longevity, the best option was to develop a completely agnostic solution, one that wasn’t tied to any one framework.
Thanks to the R&D team’s gumption and the support of the whole company, AB Tasty was able to put together a team of experts that worked for months to create an A/B testing solution compatible with any Single Page Application framework like React, Vue, Angular or Ember.
This compatibility was made possible thanks to AB Tasty’s ability to check and apply test modifications 60 times per second. Each 16 ms, before the web browser starts its content refreshment cycle, the solution checks if the internet user in question is targeted for an A/B test, and runs the relevant modifications. AB Tasty’s developers also created a meta-language to store the contents of variations and the history of all modifications made, so that they can be reapplied on demand, like when a state is changed or an element is refreshed.
For example, if a user interaction sets off a React component, AB Tasty applies the test modifications before the browser shows the element, regardless of what React is sending. The same goes for Vue.js, Ember.js etc. The solution is therefore independent of the framework used and is compatible with all types of sites and web apps.