Calling all single page applications: a universal A/B testing solution is here!

There’s a consensus: now is JavaScript’s moment to shine. As 2017 comes to a close, we’ve been hearing a lot about React, Angular and Vue - and we’ll probably continue to do so, considering the increasing popularity of Single Page Applications. For the fifth year in a row, JavaScript was the most commonly used programming language reported in Stackoverflow’s 2017 Developer Survey results. With its front-end and back-end versatility, JavaScript - and its associated frameworks - have earned a respected place in the web development world, helping create richer web interfaces and applications.

What impact do JS frameworks have on A/B testing?

JavaScript frameworks like React.j, Angular.j, Vue.js and Ember.js have become so popular because they allow developers to create sophisticated interfaces, which in turn lead to improved user experiences and higher conversion rates. Some of the perks include:

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

Comment Leboncoin améliore l'UX grâce à ReactWe’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

Benoit Lelong - Chief Technical Officer - AB TastyReact 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.

Even if you aren’t using one of these frameworks, you’re still benefitting from numerous advantages related to these technical developments.

Wordpress - Cover (1)
Robin Nichols

Robin is a Content Marketing Manager at AB Tasty. Interested in the crossroads of technology and culture, her aim is to produce practical, on point content to help marketers of all stripes improve their conversion rates.

Related Posts


Tweet
Share
Share
Buffer
Pocket
X