[Use Kameleoon] A/B testing on ReactJS and AngularJS

[Use Kameleoon] A/B testing on ReactJS and AngularJS

Application stacks are ever changing and do so very quickly. ReactJS and AngularJS 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.

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.

gif_lacoste_640x_single_page_app

Comparison between Lacoste’s Single Page App …

Gif_hm_640x_single_page_app

… and H&M’s classical format

You may not even know it, but you already use Single Page Apps, on sites like Gmail, Google Mpas, Linkedin, Facebook…

A/B testing on ReactJS

When a user views a “classical” page and clicks on a link, a new page with a different URL loads, and Kameleoon’s tag also reloads. This enables you to track a user journey and to contextualize their experience if necessary (Routard.com for instance displayed a newsletter inscription pop-in after three viewed pages).

With ReactJS, dynamic navigation doesn’t require page reloading. If your optimization 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.

Frederic_single_page_app“If the tag of your optimization solution loads only once, as is the case with ReactJS, and doesn’t update according to the visitor’s progression, tracking his user journey in real time becomes virtually impossible.”

Frédéric De Todaro, Head of consulting

This is even more problematic if your conversion funnel is a Single Page App. How can contents be adapted to the user’s progression in the funnel?

Kameleoon compatible with VueJS, ReactJS, AngularJS, EmberJS, … 

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

Jean-Noel Rivasseau - single_page_app“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-Noël Rivasseau, CTO, Kameleoon.

How we bypassed the problem of tests on ReactJS

There are 2 different scenarios:

1. The page doesn’t reload, but the URL is updated

It’s the more common case of Single Page Apps (and we will see later why that’s a good thing). Here’s an example from Club Med:

ClubMed - Single Page App ?

Our R&D team configured the solution in a way that makes Kameleoon’s tag reload automatically when the URL changes, whether or not the page reloads. 

Fabien Dimeglio Head of Product Kameleoon“This new feature enables Kameleoon’s tag to process Single Page Apps the same way it processes “classical” pages.”

Fabien Dimeglio, Head of Product, Kameleoon.

2. The URL remains static

This case is less common, and much more complicated. When the URL doesn’t change, most solutions won’t reload, because no navigational evolution is detected.

Younited Credit - Single Page App ?

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

Jean-Noel Rivasseau - architecture big data kameleoon“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 Noël Rivasseau, CTO, Kameleoon

Let’s have another look at lacoste.com.

Lacoste - Comment optimiser l'expérience sur une Single Page App ?

When filtering articles of a product category – men’s clothing in our example – the URL remains unchanged. The API imperceptibly forces the reloading of Kameleoon’s tag, making real-time tracking of the user’s navigation possible, even on a Single Page App.

Can visitors see several variations when the dedicated API forces the reloading of Kameleoon’s tag?

Not with Kameleoon!

A couple of months ago, we launched our unique flicker-free technology, making your tests and personalization campaigns completely invisible for users.

“The Single Page App deteriorates the performances of an optimization tool. But thanks to our Flicker-free technology, your visitors’ experience will not be disturbed. We are the only ones to be able to guarantee this.”

Frédéric De Todaro, Head of Consulting, Kameleoon.

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.

More innovations

More is yet to come! We have prepared a series of novelties and new features that will change the world of UX optimization – and help marketers in their every-day work.

Stay tuned! 

success story Lacoste - widget recommandation taille

Clément René

Content marketer chez Kameleoon, Clément analyse tous les retours de nos clients et consultants et partage les meilleures pratiques d'optimisation de l'expérience utilisateur.