AB Tasty franchit un nouveau cap dans l’optimisation des sites dynamiques

AB Tasty repousse une nouvelle fois les limites technologiques pour simplifier l'optimisation de l'expérience utilisateur sur tous types de sites

Nous sommes fiers d'annoncer le lancement d'une solution d'A/B testing et de personnalisation compatible avec les technologies basées sur ReactJS, Angular.js ou tout autre framework proposant des interfaces utilisateurs riches et dynamiques.

Il est désormais facile de mener des campagnes de test A/B et de personnalisation sur n’importe quel Single Page Application (SPA) sans faire appel à la moindre ligne de code. Cette prouesse technologique a été rendue possible grâce à l'extraordinaire travail de notre équipe R&D, que nous avons construite autour de spécialistes de ces frameworks.

Cette innovation s’intègre de manière transparente à l'utilisation d’AB Tasty et ne requiert aucune intervention de votre part. Notre avance technologique nous permet ainsi de rester fidèles à notre engagement de simplicité et d’efficacité, tout en apportant de nombreux avantages à nos utilisateurs :

  • Compatibilité avec tous frameworks, présents ou à venir.
  • Hausse des performances avec une amélioration des temps d'exécution et une baisse du poids de notre tag Javascript.
  • Suppression définitive de l’effet flicker.

Pour comprendre les enjeux autour de ces technologies et comment nous avons réussi à les intégrer, le Responsable UX de Leboncoin.fr (1) et notre Chief Technical Officer témoignent et illustrent le rôle clé de nos clients dans notre processus de développement collaboratif.

 

(1) 8ème marque la plus visitées en France avec plus de 23,5 millions de visiteurs uniques par mois en sept. 2017, source Médiamétrie.

Retour sur 6 années d'innovation continue
au service de nos clients

Innovation AB Tasty

Rapide rappel technique pour nos amis marketeurs

Pour comprendre les challenges qu’apportent les nouveaux frameworks Javascript à vos campagnes d’a/b testing ou de personnalisation, il faut comprendre comment les solutions d’optimisation on-site fonctionnent.

Quand un internaute accède à une page Web, le serveur qui se cache derrière envoie au navigateur de l’internaute le contenu demandé sous la forme de code HTML. Le navigateur va interpréter ce code et générer ce qu’on appelle le DOM (Document Object Model), et qu’on peut résumer à la structure finale de la page. Une partie du code renvoyé contient également le script de la solution d’A/B testing dont le rôle est de modifier ce DOM, et ce de manière automatique avant que la page ne s’affiche.

Le DOM peut en effet être manipulé, par exemple à l’aide de jQuery, une autre librairie Javascript, mais plus ancienne. C’est ainsi que pouvez ajouter, changer ou supprimer des éléments de la page comme son texte, ses images ou encore la disposition des éléments qui la constituent.

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

Les frameworks Javascript modernes comme ReactJS, Vue.js ou Ember.js ont gagné en popularité ces dernières années en raison des possibilités d’interfaces utilisateurs qu’ils offrent : absence de rafraichissement des pages, vitesse de chargement, interactions riches et fluides, moins de transferts de données, etc. A tel point que ces frameworks font désormais partie intégrale de n’importe quel “stack” technologique. De nombreux sites y font appel, comme Facebook (à l’origine de React JS), AirBnB, Spotify et bien d’autres.

A/B Testing for React and Angular
A/B Testing pour React JS et autres Frameworks JavaScript

Mais la façon dont ces frameworks fonctionnent pose un problème majeur pour les outils d’A/B testing traditionnels : lorsqu’un internaute interagit avec une page, il n’y a plus de rafraichissement de la page, voire même de l’URL. Cela signifie que les modifications de la solution d’A/B testing ne sont appliquées qu’une seule fois au chargement initial de la page. Or, avec ces frameworks, toutes les interactions utilisateurs engendrent un changement d’état de l’application (ex : les éléments affichés à l’écran) dont la solution d’A/B testing n’a pas connaissance. Avec React.js, par exemple, une action 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 A/B tester un site en ReactJS ou Angular ?

Si votre site web s'appuie sur l’un de ces frameworks, mener un test A/B peut rapidement devenir un parcours du combattant et impliquait, jusqu’à aujourd’hui, de nombreux efforts de développement.

La plupart des solutions exigent d'identifier les différents “états” de l’application que vous voulez cibler puis de conditionner l’exécution des modifications à un appel API dès lors que cet “état” se présente (exemples d’états : affichage du formulaire d’inscription, chargement d’une vue avec une liste de résultats, etc.).

Les outils d'A/B testing nécessitent encore des développements personnalisés pour fonctionner avec React

D'autres solutions nécessitent d’apporter des modifications du code “en dur”, côté serveur, ou un déploiement personnalisé pour chaque nouvelle campagne de tests. Ces solutions peuvent convenir à votre organisation et à votre expertise technique mais elles ne sont généralement pas accessibles aux équipes web marketing ou merchandising qui cherchent avant tout à être autonomes et à rapidement tester leurs idées d’optimisation.

Toutes les solutions mentionnées ci-dessus exigent une collaboration étroite avec les équipes techniques pour développer le code nécessaire, ce qui est loin d’être l'idéal si vous valorisez l'agilité.

AB Tasty révolutionne l’optimisation des Single Page Applications !

Notre mission a toujours été de simplifier l’A/B testing et la personnalisation en les rendant accessibles à l’ensemble des équipes, quelle que soit leur expertise technique. Nous pensons que c’est à nous de nous adapter aux évolutions techniques plutôt que de demander à nos utilisateurs de s’adapter.

Nous suivons depuis longtemps le développement de ces frameworks et avons anticipé leur impact sur le mode de fonctionnement d’AB Tasty. Nous avons travaillé sur une solution radicalement innovante pour rendre AB Tasty compatible avec ces évolutions technologiques tout en restant toujours le plus facile d’utilisation.

Comme ces frameworks sont là pour durer et qu’il en existe beaucoup, chacun avec ses spécificités, il nous fallait opter pour une solution agnostique de tout framework, plus pérenne que des solutions dédiées (après tout, on ne sait pas de quoi est fait le futur et quel sera le prochain framework à la mode).

A/B tester facilement son application #reactjs ou #angularjs, c'est désormais possible avec @ABTasty.Click to Tweet

Pour cela, nous avons constitué une armée de développeurs front-end (12 pour être précis) spécialistes de ces frameworks. Après des mois de travail, ils sont parvenus à construire une solution hors norme !

Tout repose sur notre capacité à vérifier et à appliquer vos modifications 60 fois par seconde dans les navigateurs modernes. Chaque 16ms, avant que le navigateur ne commence son cycle de rafraîchissement du contenu, nous agissons (dans l’ombre), vérifions si l’internaute est éligible à vos campagnes et exécutons vos modifications. Ceci, indépendamment du framework utilisé. 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é. Cela fonctionne de la même façon pour Vue.js, Ember.js et leurs petits camarades.

Pour rendre cela possible, nos développeurs ont écrit un nouveau méta-langage pour décrire le contenu de vos variations et les interpréter, tout simplement.

L'équipe de devs @ABTasty a dévelopé un meta language pour rendre possible l'#abtesting sur #reactjs!Click to Tweet

Ceci nous permet de ne pas stocker ce contenu en Javascript (même si nous le faisons toujours pour des raisons de rétrocompatibilité) et de garder un historique de toutes les modifications pour les réappliquer à la demande, comme lorsqu’un changement d'état se produit ou qu’un composant se rafraîchit, rendant vos campagnes possibles sur n'importe quelle Single Page Application.

Quels sont les bénéfices ?

Framework agnostique

Complètement indépendante du framework utilisé, cette innovation fonctionne aussi bien avec React.js qu’Ember.js, Vue.js, Angular.js ou encore Meteor.js. Elle vous prémunit contre l’évolution rapide des technologies web et vous évitera de devoir trouver une solution alternative lorsqu’un nouveau framework apparaîtra et gagnera en popularité parmi la communauté des développeurs.

Performance

Enfin une solution qui ne nécessite pas jQuery et supprime tout effet flickerEn appliquant vos modifications en continu toutes les 16 millisecondes, soit moins que le seuil visible par l’oeil humain, nous supprimons définitivement l’effet de scintillement qui pouvait nuire à l’expérience utilisateur. Fini l'effet flicker, sans compter un temps d'exécution et de chargement réduit grâce à un tag Javascript plus léger et qui ne requiert plus jQuery.

Simplification

On ne pouvait pas faire plus simple : vous n’avez rien à coder ! Même dans les cas de figure les plus spécifiques (ex : rechargement d’un composant d’interface sans modification de l’URL). Pas besoin de nous notifier de ces changements d’état via des appels API comme l’exige certaines solutions d’A/B testing. Cela va sans dire mais vous n’avez même pas à modifier le tag déjà présent sur votre site. On vous le répète : vous êtes autonome, agile et gagnez en rapidité d’exécution.

Rétrocompatibilité

En utilisant notre nouveau framework (v2.3), vous êtes assurés du bon fonctionnement de vos campagnes existantes. Vous n’avez absolument rien à modifier ou à reconfigurer. Et si vous n'utilisez aucun de ces frameworks, cette innovation reste sans conséquences, à l’exception d’une chose : plus d’effet flicker

Vous souhaitez A/B tester vos sites dynamiques?

Vous avez un site web développé, tout ou en partie, avec l’un de ses frameworks et êtes frustré de ne pouvoir tester la moindre optimisation ? Vous souhaitez gagner en agilité ? Si oui, contactez-nous directement pour organiser une démonstration personnalisée.

 
Anthony Brebion

Anthony est responsable marketing produit chez AB Tasty où il gère notamment la production de contenus. Avant d’être évangéliste de l’A/B testing et de l’optimisation des conversions, il était consultant en référencement naturel et a travaillé plusieurs années en régies publicitaires.

Articles Similaires


116 Partages
Tweetez
Partagez101
Partagez15
Buffer
Pocket
X