Accueil > WebMarketing > Webanalytics > Un AB Testing sur l'ensemble de son site

Un AB Testing sur l’ensemble de son site

Publié le 2 mai 2012 Webanalytics

Attirer des visiteurs sur son site est un bonne chose, mais si vos pages sont mal conçues, vous raterez des ventes ou des prises de contacts potentielles. Pour augmenter votre taux de transformation, il faut optimiser vos contenus au maximum.

Le mieux est alors de créer un test A/B, dans lequel on va comparer plusieurs variantes d'un même contenu. Google Website Optimizer est un outil gratuit qui vous permet de mettre en place facilement ce type de test.

Le problème, c'est quand l'on veut tester une modification globale du site, par exemple faire un AB testing sur un template de page produit ou d'article. Voici donc un tutoriel pour y parvenir

C'est quoi un test AB ?

Présentons d'abord le concept de l'AB testing pour ceux qui ne le connaissent pas. Il s'agit de donner à un visiteur la version originale d'une page (A) et au second visiteur une version différente (B). On peut ensuite analyser laquelle est la plus pertinente.

AB Testing : le concept
Dans un AB Testing, chaque visiteur peut avoir une version différente

Un test AB permet de tester autant de variantes que l'on souhaite en même temps (A, B, C, D, ...) : même avec un grand nombre de versions différentes, le test restera pertinent mais les résultats seront plus longs à obtenir. Rappelez-vous que l'AB testing repose sur le fait d'avoir un volume de trafic suffisamment élevé sous peine de mettre des mois avant d'avoir des résultats tangibles.

Pandas multiples
Pour tester autant de variantes d'un panda, le test AB sera long

De même, il part du principe qu'une fois la page de test visitée, l'internaute aura toujours accès à cette version, mais uniquement sur l'ordinateur et le navigateur web qu'il avait utilisé la première fois. S'il change de PC ou de logiciel de navigation, ou bien encore s'il vide son cache, il risque d'avoir accès à des versions différentes de l'AB testing, faussant ainsi les résultats (je vous rassure, cela représente une faible part du trafic testé).

Il est également conseillé de ne pas tester des variations multiples sur des éléments différents dans un même version du test. Pour expliquer ce point, je vais prendre un exemple : si vous testez la version originale d'une page produit par rapport à une version où vous changez en même temps l'emplacement et l'aspect du bouton, ainsi que la photo et la description du produit, vous risquez de fausser les résultats.  Le bouton pourrait augmenter le taux de transformation mais pas le changement de photo. Dans cet exemple, il faudrait donc faire un AB testing sur toutes ces variantes :

  • L'originale
  • Version A avec changement de photo
  • Version B avec changement de texte
  • Version C avec changement du bouton d'ajout au panier
  • Version D avec changement de photo + texte
  • Version E avec changement de photo + bouton
  • Version F avec changement de texte + bouton
  • Version G avec changement de tous les éléments

Chez Bien et Bio, nous avons testé ainsi plusieurs variantes, chacune apportant des modifications plus ou moins importantes. Nous sommes ainsi passé de cette version d'une fiche produit :

Version originale de fiche produit lors d'un AB Testing
Une version originale de fiche produit lors d'un AB Testing

A celle-ci (+88% de taux de transformation)

Variation gagnante dans Google Website Optimizer
Une variation gagnante dans Google Website Optimizer

Un AB testing global

Google Website Optimizer vous permet de mener à bien ce type de test. De base, il vous permet de comparer une variation d'une même page, mais pas d'effectuer une analyse sur un changement global, comme par exemple une modification de l'ensemble de vos fiches produits ou de vos articles de blogs. Le fait de pouvoir tester un changement global de charte graphique est en effet utile pour ne pas fausser les statistiques. Car si vous utilisez un test AB traditionnel, vous prenez le risque qu'un visiteur visite une page modifiée et que la suivante possède la charte graphique par défaut...

La création du template

La base consiste tout d'abord à créer vos différents templates. Libre à vous de définir en interne quels éléments vous jugez pertinents. Il peut s'agir d'un changement radical de l'interface ou du changement d'un seul élément.

Si vous hésitez sur les éléments à analyser lors de votre AB Testing, je vous conseille l'excellent livre "Ergonomie Web" qui vous donnera de nombreuses pistes de travail sur ce sujet.

URL rewriting ou PHP

Là où cela se complique, c'est de pouvoir fournir au bon visiteur le bon template. Dans la solution donnée ici, nous allons utiliser l'URL rewriting en ajoutant un paramètre dans l'adresse web, du type ?p=2. En détectant l'identifiant, notre site va fournir la version du template correspondant. Il faut donc remanier votre système d'URL pour permettre l'ajout de ce paramètre et la modification correspondante de l'affichage de vos pages. Comme chaque site est différent, il n'y a pas de solution toute faite pour cela et vous devrez en discuter avec votre développeur (excepté pour WordPress dont nous parlerons plus loin).

Cette technique se base entièrement sur la solution que vous utilisez, et il est possible qu'elle ne fonctionne pas dans votre cas de figure. Si c'est le cas, il est possible d'opter pour une autre solution donnée par Google et qui consiste à utiliser javascript et la fonction document.write pour parvenir à vos fins : http://support.google.com/websiteoptimizer/bin/answer.py?hl=fr&answer=61201#scv. Mais rappelez-vous que cette solution est mauvaise car elle vous forcera à désactiver tout système de cache.

Si vous faites appel à la solution de cet article avec l'URL rewriting, il y a deux règles qu'il vous faudra suivre impérativement :

  • Vos pages devront inclure la balise meta canonical vers la version d'origine (sans paramètres). Si un moteur de recherche indexe vos URL d'AB testing, cela vous permettra d'éviter toute duplication de contenus.
<link rel="canonical" href="URL sans paramètre" />
  • De même, faites attention aux boutons sociaux. Ceux-ci doivent permettre le vote ou le partage de l'URL sans paramètre, même si le visiteur se situe sur la page avec paramètre. Là aussi, cela vous évitera toute duplication potentielle de vos contenus qui nuirait à votre référencement.

Définir votre AB Testing

Une fois que votre système d'URL rewriting est en place, vous avez fait le plus dur. Rendez-vous sur Google Website Optimizer pour créer un test à plusieurs variables.

Création d'un test AB
Création d'un test AB

Contrairement à un test AB ordinaire, cela va vous permettre de faire un test direct sur l'intégralité de votre site.

Comment créer un test à plusieurs variables ?
Comment créer un test à plusieurs variables ?

Choisissez un nom pour votre test, la page de conversion ainsi qu'une page à tester. Pour la page de test, il peut s'agir de n'importe quelle page produit ou d'article qui sera amenée à changer : cela n'a pas d'importance sur le bon déroulement du projet.

Si votre conversion ne s'effectue pas avec l'affichage d'une page mais suite à une action, utilisez l'URL de la page qui permet cette action. Et si votre action peut être effectuée depuis plusieurs pages, choisissez-en une au hasard et nous verrons comment contourner cette problématique.

Paramétrez votre test multi-variables
Paramétrez votre test multi-variables

Le script de conversion

Sur les pages suivantes, Google vous donnera différents codes à insérer. Le premier d'entre eux ressemblera à celui ci-dessous, et devra être placé juste après l'ouverture de l'élément <head> sur toutes les pages de votre AB testing (par exemple toutes vos pages produits, toutes vos catégories, tous vos articles, ...).

<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='1970793436',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/test']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->

Définir une variable

Une fois cette étape réalisée, ajoutez sur les mêmes pages le code suivant juste après l'ouverture de la balise <body> :

<script>utmx_section("NOM de la section")</script>
</noscript>

Remplacez Nom de la section par le nom de l'élément testé, par exemple par le terme Fiche Produit. Dans notre cas de figure, ce texte n'a aucune importance. En réalité, on détourne avec cette solution la logique initiale du test multi-variable qui permet dans une même page de tester plusieurs variations de plusieurs éléments, chacun élément étant défini par une section.

Tracker les pages de conversion

Nous allons ensuite installer un code qui permet de savoir quelle template a le meilleur taux de transformation. Si la page de conversion est une nouvelle page, comme la page de confirmation de commande ou la page de confirmation d'envoi d'email, vous n'aurez qu'à copier le code donné par Google et qui ressemblera à :

<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/goal']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->

Si toutefois il n'y a pas une mais plusieurs pages de conversions, vous devrez inclure ce même code sur l'ensemble d'entre elles.

Et si la conversion s'effectue après une action sans changement d'URL (une téléchargement de fichier par exemple), cela se complique. Il faudra alors copier le même code que précédemment, en enlevant la ligne :

  _gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/goal']);

Cette ligne devra alors être incluse dans l'action. Par exemple, avec la méthode suivante sur un lien de téléchargement :

  onclick="_gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/goal']);"

Insérer votre variable et rediriger le visiteur

Une fois l'ensemble des codes mis en place, demandez à Google Website Optimizer de les valider pour vous rendre sur la page suivante.Il vous demandera ensuite de créer différentes variantes de vos pages.

Définissez vos variables dans Google Website Optimizer
Définissez vos variables dans Google Website Optimizer

La page originale aura ce code par défaut, comme le montre l'image précédente :

<script>var fiche_type = ""</script>

Pour chaque variante de votre AB Testing, utilisez le code ci-dessous dans le menu de paramétrage de Google Website Optimizer.

<script>var fiche_type = "XXX"</script>
<script>
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];}
    return vars;}
if (getUrlVars() != 'p') {window.location = 'YYY';}
</script>

Dans la première ligne, remplacez XXX par le numéro de variante (par exemple 2) et remplacez YYY dans la dernière ligne par le paramètre utilisé (par exemple ?p=2). Si vous utilisez un paramètre différent de p, changez-le également.

Automatiquement, tout visiteur se rendant sur une de vos pages obtiendra un cookie de la part de Google Website Optimizer. S'il doit avoir accès à une autre variante, il sera automatiquement redirigé vers le bon template avec le paramètre dans l'URL.

Les résultats de AB testing

En fonction de la pertinence de votre test et du volume de trafic de votre site, il peut alors se passer quelques jours à quelques semaines avant d'obtenir un résultat fiable.

Si une version l'emporte, Google vous indiquera automatiquement quelle version de l'AB Testing est la meilleure, comme dans l'exemple suivant :

Un AB testing gagnant dans Google Website Optimisez
Un AB testing gagnant dans Google Website Optimisez

AB testing et WordPress

Comme vous le savez bien, j'adore WordPress. Voyons maintenant si le CMS nous permet de faire appel à la même technique. Et la réponse est oui.

Pour lancer un AB testing sur l'ensemble de son site, rien n'est plus simple car un petit plugin va nous aider. Il s'agit de Theme Test Drive, qui est à la base un plugin qui permet à un administrateur de tester un thème différent de celui qui est affiché aux visiteurs. L'activation de ce plugin permet à chaque utilisateur d'utiliser le paramètre ?theme= pour afficher un thème différent.

WordPress Theme Test Drive
WordPress Theme Test Drive

Donc pour mettre en place un AB testing global sur WordPress, il suffit de suivre la procédure expliquée dans cet article, à savoir :

  • Créez un thème différent pour chaque variante de l'AB testing
  • Créez votre test multi-variables dans Google Website Optimizer
  • Copiez le script de suivi et de conversion
  • Insérez vos variables de test pour rediriger le visiteur. Pour WordPress, remplacez les ?p= par des ?themes= et remplacez les chiffres par les noms de vos différents thèmes. Remplacez aussi dans le javascript le paramètre p par theme.

Et le tour est joué. Même si vous avez un système de cache sur votre blog WordPress, le visiteur sera redirigé vers la bonne version de vos pages.

Comme pour tout AB testing basé sur de l'URL rewriting, pensez à vérifier ces deux éléments :

  • vos pages font appel à la balise meta canonical (notamment grâce au plugin WordPress SEO dont je parle ici)
  • vos boutons sociaux doivent être paramétrés sur l'URL réelle et non pas sur l'URL avec paramètre.

Comme pour un test AB traditionnel, il ne vous reste plus qu'à attendre les résultats donnés par Google Website Optimizer.

Daniel Roch CEO - Créateur de SEOMIX & SEOKEY

Expert SEO WordPress - Créateur de SeoMix et SEOKEY - Orateur - Auteur de nombreux livres sur le référencement naturel

19 Commentaires

Florian Giudicelli Le 02 mai 2012 à 7h46

Excellent Tuto Daniel ! C’est vrai que Google Website Optimizer reste un outil puissant qui permet faire des tests sympa si on le maîtrise bien.

J’aime beaucoup tes astuces pour faire de l’AB testing sur un élément global du site. Je ne connaissais pas ce plugin WordPress mais je le garde de côté, ça me donne des idées pour mon site :) !

Magicyoyo Le 02 mai 2012 à 9h33

Super tuto encore Daniel, tu nous régales. Je ne vais pas m'en servir personnellement, mais je l'envoie de ce pas à un de mes collaborateurs

lionel Le 02 mai 2012 à 9h53

Bonjour Daniel,

En général, Je débute par des tests A/B intégrant des pages Web complètement différentes afin de déceler les bonnes orientations.

Je sélectionne les pages Web les plus performantes pour les affiner avec des tests multi-variables.

amicalement

Antonin Delfino Le 02 mai 2012 à 9h55

Merci Daniel pour cet article !
Bizarrement on pense souvent : meilleur positionnement sur les SERPs, plus de visiteurs ... et on met le taux de conversion après comme une finalité certes mais dont on ne se préoccupe réellement que quand on a le temps ^^

En tout cas ce petit plugin va m'être d'une grande utilité et ta méthodo aussi : m'en vais tester ça dès que je peux ;)

Jambonbuzz Le 02 mai 2012 à 10h33

Merci beaucoup ! C'est justement le point qui m’embêtait avec Website Optimizer, je pensais qu'il fallait à tout prix créer un test par URL. Il faut avouer que l'aide Google n'aide pas non plus à nous orienter vers cette solution, résultat, je pratique mes tests avec Analytics.

Je vais mettre en place cela rapidement.

Ouistity Le 02 mai 2012 à 11h07

Il me semble qu'il est évident que la deuxième maquette est nettement plus profitable aux utilisateurs. La partie centrale est plus propre et reposante pour l’œil, on y voit une grille et un fil conducteur cohérents.

Ce sont que des petits détails visuels mais qui font toutes la différence. La deuxième grille me fait penser à un tout ménage, qui ne représente pas la qualité du produit.

Je n'ai pas encore eu le temps d'approfondir votre tutoriel et plugin, mais je le conserve au chaud. Il me parait très complet et excellent. Source d'information nécessaire pour faire évoluer un site dans le bon sens.

Apprendre le dessin Le 03 mai 2012 à 1h28

Mine de rien, ce Google Website Optimizer est un super tool.
Moi qui croyais que les tools payants était mieux.
Avec quelques infos on peut quasi tout faire en split test avec GWO. Dommage que je sois aussi lent à maitriser la bête.

Watt Le 03 mai 2012 à 12h18

Google Website Optimizer est un outil extrêmement puissant et très pratique pour augmenter le taux de transformation. Parfois, cela se joue à pas grand-chose : un bouton mal positionné, des contrastes pas assez prononcés ou des couleurs mal choisies.
Ton article est vraiment bien fait, bravo !

lereferenceur Le 03 mai 2012 à 13h20

Ce tutoriel est vraiment bien fichu et bien expliqué.

N'ayant pas l'occasion de faire des tests, je n'en ai pas besoin pour le moment, mais je me le met en favori. J'en aurais peut être besoin plus tard.

Kalou Le 03 mai 2012 à 15h01

Exellent tuto qui me (re)motive à travailler l'A/B testing. J'ai une question technique, sur mes pages produits l'ajout au panier se fait via un et un petit JS. J'ai mis un trackevent dessus comme cela pour voir la transfo des pages produits
[pastacode lang="markup" manual="%3Ca%20href%3D%22%23%22%20rel%3D%22nofollow%20ugc%22%3E%3C%2Fa%3E" message="" highlight="" provider="manual"/]
Comment puis je intégrer ce code ?
[pastacode lang="markup" manual="onclick%3D%22_gaq.push(%5B'gwo._trackPageview'%2C%20'%2FXXXXXXXXXX%2Fgoal'%5D)%3B%22" message="" highlight="" provider="manual"/]
Réponse ou pas merci pour cet article !

Fabien Le 03 mai 2012 à 15h08

Très bon petit guide !

Une technique cracra mais efficace pour faire de l'AB testing sans en faire consiste à composer sa page avec des ... iframes et à populer les fameuses iframes avec un adserver

Je sais c'est chelou comme technique mais ça marche très bien (testé et approuvé) toujours combiné à du tracking GA bien sur ;)

Daniel Roch Le 04 mai 2012 à 10h21

@Kalou: le code suivant devrait fonctionner normalement

[pastacode lang="bash" manual="onclick%3D%20%C2%BB_gaq.push(%5B%E2%80%98gwo._trackPageview%E2%80%99%2C%20%E2%80%98%2FXXXXXXXXXX%2Fgoal%E2%80%99%5D)%3B%20%C2%BB" message="" highlight="" provider="manual"/]

David Le 25 mai 2012 à 16h51

Daniel nous a encore concocté un joli mix dont il a le secret. Il faut qu'après de nombreuses recherches, je n'ai trouvé aucun tutoriel aussi complet sur la mise en place de tests A/B ou MVT sous WordPress.
Ce tuto m'a été d'une grande aide...sauf que je rencontre des soucis de données post-mise en place : stats sur Analytics ont bizarrement doublé, les conversions ne remontent toujours pas. J'ai beau avoir lu toute la documentation possible et imaginable...Le suivi de conversion entre un domaine principal et son sous-domaine plus la coexistence avec les codes GA existants semblent problématique.

Daniel Roch Le 27 mai 2012 à 10h46

Théoriquement, il est impossisble de doubler les statistiques car le tracking AB utilise un nom de variable pour se différencier du compte principal (ici gwo.trackpageview).

Tu aurais l'URL de ton site pour que j'y jette un oeil ?

David Le 28 mai 2012 à 9h45

Salut Daniel et merci de proposer ton aide ! Mon test est le suivant :
- page test : preventimmo.fr/ernt
- page conversion (sous-domaine) : services.preventimmo.fr/espace-client/visitor.php?action=register&etape=4

A noter que j'ai récemment changé l'ID de compte pour qu'il soit dans le control et le conversion script.

Daniel Roch Le 28 mai 2012 à 11h58

Je viens de jeter un oeil. Rien à dire sur la page de test. Sur la page de conversion par contre, je ne trouve pas le script de Google Website Optimizer. L'outil ne peut donc remonter aucune transformation.

Axekap Le 07 juin 2012 à 16h17

Ce qui est dommage c'est que Google va arrêter cet outil d'optimisation GWO en Août !
Remplacé (seulement partiellement pour le moment) par une intégration dans Google Analytics (Interface GA/contenu : disponible aujourd'hui en version anglaise, voir "content experiments")

Matthieu laurent Le 15 juin 2012 à 14h39

Excellent tutoriel mais qui ne sera malheureusement plus viable d’ici quelques mois avec la disparition de Google Website Optimizer. Ce-dernier reste à mon goût est un outil limité. Lorsqu’on compare cet outil qui certes a l’avantage d’être gratuit à des outils payants comme A/B Tasty par exemple, on remarque une différence importante au vue des fonctionnalités disponibles pour créer ses tests A/B et MVT. Et cette différence va s’accentuer lorsqu’on connait les fonctionnalités qui vont disparaître d’ici quelques semaines avec le passage sur Google Analytics…

Tristan@garage renault mulhouse Le 13 juillet 2012 à 14h48

Très bon article plus que complet, je ne connaissais pas l'AB testing mais plus je lisais plus je me suis rendu compte à quel point ça peut être puissant.
Par contre, comme tu le soulignes, il faut pas mal de visite sur le site pour que les résultats soient viables. De plus ça représente pas mal de boulot pour le mettre en place. Mais le résultat en vaut la chandelle.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *