webleads-tracker

WordPress & Référencement naturel
Mes servicesWordPress - Référencement
Hébergement WordPress
Vous êtes ici : SeoMix » WebMarketing » Webanalytics » Un AB Testing sur l’ensemble de son site

Un AB Testing sur l’ensemble de son site

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.

Les thèmes relatifs

Voici les thématiques abordées par Un AB Testing sur l’ensemble de son site:

19 commentaires
  1. Florian Giudicelli
    8 messages

    Florian Giudicelli - Le 02 mai 2012, 07:46

    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 :) !

  2. Magicyoyo
    9 messages

    Magicyoyo - Le 02 mai 2012, 09:33

    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

  3. lionel
    18 messages

    lionel - Le 02 mai 2012, 09:53

    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

  4. Antonin Delfino
    5 messages

    Antonin Delfino - Le 02 mai 2012, 09:55

    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 ;)

  5. Jambonbuzz
    22 messages

    Jambonbuzz - Le 02 mai 2012, 10:33

    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.

  6. Ouistity
    1 message

    Ouistity - Le 02 mai 2012, 11:07

    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.

  7. Apprendre le dessin
    1 message

    Apprendre le dessin - Le 03 mai 2012, 01:28

    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.

  8. Watt
    1 message

    Watt - Le 03 mai 2012, 12:18

    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 !

  9. lereferenceur
    20 messages

    lereferenceur - Le 03 mai 2012, 13:20

    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.

  10. Kalou
    1 message

    Kalou - Le 03 mai 2012, 15:01

    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

    <a href="#" rel="nofollow">

    Comment puis je intégrer ce code ?

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

    Réponse ou pas merci pour cet article !

  11. Fabien
    34 messages

    Fabien - Le 03 mai 2012, 15:08

    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 ;)

  12. Daniel Roch
    725 messages

    Daniel Roch - Le 04 mai 2012, 10:21

    @Kalou: le code suivant devrait fonctionner normalement

    <a href="#" rel="nofollow" onclick="_gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/goal']);">
  13. David
    6 messages

    David - Le 25 mai 2012, 16:51

    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.

  14. Daniel Roch
    725 messages

    Daniel Roch - Le 27 mai 2012, 10:46

    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 ?

  15. David
    6 messages

    David - Le 28 mai 2012, 09:45

    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.

  16. Daniel Roch
    725 messages

    Daniel Roch - Le 28 mai 2012, 11:58

    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.

  17. Axekap
    2 messages

    Axekap - Le 07 juin 2012, 16:17

    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 »)

  18. Matthieu laurent
    1 message

    Matthieu laurent - Le 15 juin 2012, 14:39

    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…

  19. Tristan@garage renault mulhouse
    1 message

    Tristan@garage renault mulhouse - Le 13 juillet 2012, 14:48

    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.

» Commentez cet article !
(Merci de donner un vrai prénom)
(Ne sera jamais publié)
(Modèration subjective)
Html accepté <a> <i> <b> [codesyntax]CODE[/codesyntax]
» Prévisualisez votre message

© 2010-2012 SeoMix : WordPress & Référencement
Propulsé par WordPress et Daniel Roch. Logo créé par Willy-Bahuaud

Indispensable
WordPress
A propos de SeoMix
Mes servicesWordPress - Référencement
Suivez-nous !
  • 8811 abonnés
  • 197 articles
  • 4604 messages
Vous devriez lire
Seo et emarketing
Les amis
b979755e12bba8ef7e670ba4cbdc8ac6HHHHHHHHHHHHHH