Single Page Application, une solution universelle d’A/B testing s’imposait !

La popularité de Javascript ne cesse de se confirmer. Les termes "React", "Angular" ou "Vue" sont sur toutes les lèvres en cette fin d'année 2017 et le seront surement encore en 2018 puisque la tendance est aux Single Page Applications qui y font appel massivement. Cette même année, Javascript a été promu « Meilleur langage de 2017 » par IBM. Avec sa capacité a être utilisé à la fois en front-end et en back-end, Javascript - et les frameworks associés - sont définitivement installés dans le paysage du développement web, pour des interfaces et des applications web toujours plus riches.

Quel est l’impact des frameworks JS sur l’A/B testing ?

Les frameworks Javascript comme React.j, Angular.j, Vue.js ou Ember.js ont gagné en popularité ces dernières années car ils permettent de développer des interfaces bien plus riches qui améliorent l'expérience utilisateur et influent directement sur leur capacité à convertir. Parmi les bénéfices constatés :

  • Absence de rafraichissement des pages.
  • Vitesse de chargement.
  • Interactions riches et fluides.
  • Moins de transferts de données.
  • Développement plus rapide avec des composants réutilisables.
  • Support et communauté bien établis.

Ces avantages font de ces frameworks le point de départ de nombreux projets web et une option quasi incontournable pour toute nouvelle Single Page Application.

Mais la façon dont ces frameworks fonctionnent pose un problème pour les outils d’A/B testing côté client (i.e. : côté navigateur Internet).

Lorsqu’un internaute interagit avec une page, il n’y a plus de rafraichissement de la page, voire même d’URL. Toutes les interactions utilisateurs engendrent un changement d’état de l’application (les éléments affichés à l’écran par exemple) dont la solution d’A/B testing n’a pas connaissance car cette dernière applique généralement ses modifications au chargement initial de la page.

Avec React JS, par exemple, l'action d'un utilisateur va entraîner le rafraîchissement d’un ou de plusieurs composants de l’UI et écraser les modifications apportées par la solution d’A/B testing.

Comment Leboncoin améliore l'UX grâce à ReactNous sommes en train de passer sur un nouveau framework sur notre site web et il s’agit de React JS. Il y a deux avantages selon nous à cela : proposer des fonctionnalités plus évoluées pour nos utilisateurs et ensuite être en mesure de recruter des développeurs car c’est un langage très répandu. Donc nous avons un vrai enjeu de nous assurer d’avoir une solution d'A/B testing compatible avec ce nouveau framework !
Michael Hamon, Head of UX chez Leboncoin.fr

Si votre Single Page Application s'appuie sur l’un de ces frameworks, vous savez déjà que mener un test A/B peut rapidement devenir un enfer et implique beaucoup d'efforts en termes de développement. Il suffit de lire cet article rédigé par une agence américaine spécialisée en optimisation des conversions pour s'en rendre compte.

De façon schématique, il existe 2 options pour A/B tester une Single Page Application.

  • La première va consister à identifier les différents “états” de l’application que vous voulez cibler puis à conditionner l’exécution des modifications souhaitées à un appel API dès lors que cet “état” se présente. Pour concrétiser ce propos, voici quelques exemples d’états : affichage du formulaire d’inscription, chargement d’une vue avec une liste de résultats, etc.
  • La deuxième va nécessiter d’apporter des modifications du code “en dur”, côté serveur, ou un déploiement personnalisé pour chaque nouvelle campagne de tests.

Ces solutions sont souvent spécifiques au framework utilisé

Vous l'aurez compris, ces solutions exigent une collaboration étroite entre les équipes techniques et marketing et ne seront probablement pas adaptés pour ces dernières qui cherchent avant tout à être autonomes et agiles. En effet, de cette manière impossible de rapidement tester leurs idées d’optimisation !

Une solution d'A/B testing universelle !

Benoit Lelong - Chief Technical Officer - AB TastyReact est important aujourd’hui pour AB Tasty parce que c’est une vraie tendance de fond technologique dans la migration des sites internet, en particulier pour tout ce qui est tunnel de conversion.
Benoit Lelong, Chief Technical Officer, AB Tasty

AB Tasty se devait de faire une intégration technologique majeure sur ce sujet et produire une compatibilité pour toute sa ligne de produit, tout en conservant la simplicité d'utilisation qui a fait sa réputation. Cela passe notamment par son éditeur WYSIWYG qui ne nécessite aucune ligne de code ni appel API.

Comme ces frameworks sont là pour durer et qu’ils ont chacun leurs propres spécificités, il nous fallait développer une solution agnostique de tout framework, plus pérenne que des solutions dédiées !

Grâce à l’engagement complet de toute l’entreprise, AB Tasty a pu mettre en place des moyens importants en termes de R&D et engager des experts sur le sujet pendant plusieurs mois afin de construire une solution d'A/B testing compatible avec n'importe quel framework dit One Page Application comme React, Vue, Angular, ou Ember.

Cette comptabilité est rendue possible grâce à notre capacité à vérifier et à appliquer les modifications de vos tests 60 fois par seconde. Chaque 16ms, avant que le navigateur ne commence son cycle de rafraîchissement du contenu, nous vérifions si l’internaute est éligible à vos campagnes et exécutons vos modifications. Nos développeurs ont également développé un méta-langage pour stocker le contenu de vos variations et l'historique de toutes vos modifications pour les réappliquer à la demande, comme lorsqu’un changement d'état se produit ou qu’un élément se rafraîchit.

Par exemple, si une interaction utilisateur déclenche le rafraîchissement d’un composant React, nous appliquons vos modifications avant que le navigateur ne commence à afficher ce composant, peu importe ce que React lui a renvoyé. Le principe reste le même pour Vue.js, Ember.js, etc. La solution est donc indépendante du framework utilisé et compatible avec tous types de sites ou applications web.

Même si vous n'utilisez pas l'un de ces frameworks, vous bénéficiez quand même des nombreux avantages liés à ces développements techniques.

Wordpress - Cover (1)
Sophie Ianiro

Sophie est Content Marketing Manager chez AB Tasty. Elle produit des contenus experts sur tous les sujets qui entourent le CRO afin de vous donner les ressources nécessaires qui feront de vous un pro de l’optimisation de la conversion.

Articles Similaires


Tweetez
Partagez
Partagez
Buffer
Pocket
X