Vivez la vie que vous méritez et apportez de la valeur au monde grâce au e-commerce

Comment faire des tests A/B gratuitement et simplement

Je vous ai parlé dans mon précédent article de l’importance de faire des tests régulièrement pour optimiser votre site. Aujourd’hui je vous montre comment le faire efficacement, simplement et gratuitement et tout ça en vidéo !

 

 

Afficher/masquer la transcription texte
Bonjour, ici Olivier Clémence. Aujourd’hui, dans cette vidéo, je vais vous montrer comment créer des tests ab sur Prestashop gratuitement.

Donc la première étape, c’est d’aller sur un outil qui s’appelle Optimizely.com, vous créez un compte et une fois que votre compte est créé, c’est très rapide, vous vous connectez. Une fois que vous vous êtes connecté, vous allez arriver sur une page avec différents onglets et je vais vous montrer comment créer votre test. Vous allez cliquer sur le bouton « create an experiment » et là vous allez donner un nom à votre test. Donc, pour commencer on va tester une page produit. Voilà, je prends cette page produit, c’est une boutique de démos que j’ai installé et c’est le produit « tshirt délavé à manches courtes ». Donc je vais l’appeler « tshirt délavé » et là il me demande une URL donc je vais lui indiquer l’URL du produit et je clique sur « create an experiment ». Donc une fois qu’il a terminé son chargement, vous allez voir apparaitre votre page. Ici, vous avez « original », « variation 1 » et « add variation ». « Original » c’est votre page, donc idéalement il ne faut pas la modifier, la laisser telle qu’elle est. Ensuite vous avez « variation 1 ». La « variation 1 » c’est justement la modification que vous avez effectué pour voir quel type de pages est le plus efficace. Je vous conseille de toujours ne faire qu’un seul test à la fois. Vous ne changez qu’une seule chose. Par exemple ici, on a notre page produit, on pourrait se demander si par exemple, la présence du logo visa a un impact positif ou négatif sur les ventes. Donc vous cliquez dessus et là vous allez voir que vous pouvez le supprimer. Voilà, la variation entre nos deux pages, c’est simplement la présence ou pas du bouton. Là vous avez la page originale avec le bouton, et là la variation sans le bouton. Pas le bouton mais la présence du logo pour les cartes bleues. Une fois que vous avez fait ça, vous cliquez sur « save », puis vous cliquez « start experiment ». Là vous allez avoir une fenêtre qui s’affiche, avec un message en rouge. Le message vous explique que vous n’avez pas encore mis le script d’Optimizely sur votre site. Donc je vais vous montrer comment faire. Vous allez copier ce bout de code et il va falloir l’ajouter dans le header de votre site. Alors comment vous allez faire ça ? Vous allez ouvrir Filezilla, vous vous connectez à votre serveur et vous allez dans « votre thème » et vous modifiez le fichier « header.tpl ». Ensuite vous rajoutez ça dans la balise « head » ici et vous copiez le code. Vous sauvegardez et vous renvoyez sur le serveur. Il reste une dernière étape c’est d’aller dans l’admin de votre site, vous allez dans « paramètres/performances » et là vous videz le cache, ce qui recharger les fichiers de templates de votre site. Et donc normalement, lorsque vous rafraîchissez votre page, vous n’allez pas voir forcément la différence tout de suite. D’ailleurs ça a marché tout de suite mais ce n’est pas forcément ce que je voulais vous montrer. Si vous allez dans le code source de la page, vous allez voir ça, c’est la partie de code que j’ai rajouté. Donc si elle apparait bien dans la balise « head », entre les deux balises « head » c’est que vous l’avez mis au bon endroit.

Mais vous avez une autre solution pour rajouter ce code, si vous ne connaissez pas Filezilla et si vous ne maitrisez pas trop la gestion du code HTML, je vais vous montrer une autre méthode. Pour rajouter ce code sans avoir aucune connaissance, aucune maitrise de Filezilla ni du code HTML, vous pouvez installer un module qui s’appelle « multi HTML block ». Vous cliquez sur « ajouter un nouveau module », vous choisissez le module en question, je vous remettrais le lien dans la description de la vidéo bien sur, pour récupérer ce module. Vous le chargez et une fois chargé, vous l’installez et une fois installé, il va vous demander de créer un nouveau block. Donc pour cela, vous mettez par exemple « block java script header », « block contenant du java script header », ça c’est la description. Cela vous permettra de mieux vous rappeler à quoi sert ce block. Vous cliquez sur « sauvegarder » et il vient de vous créer en fait, un nouveau module, dans lequel vous allez pouvoir intégrer votre java script. Donc vous allez l’installer et une fois installé vous allez le configurer. Pour le configurer, c’est très simple, vous avez deux champs : un champ texte et un champ texte brut. Le champ texte, c’est pour mettre du texte normal, ici ça nous intéresse pas donc on va mettre que c’est du java script donc on va mettre le java script dans le texte brut. Le java script en question, c’est celui qu’Optimizely nous fournit, vous le copiez ici et vous le sauvegardez. Il reste une dernière étape parce que ce module là peut se positionner sur pleins d’endroits sur votre boutique Prestashop. Vous allez dans « points d’accroches ». Vous vérifiez que « block java script header » est sélectionné ici et vous faites « greffez un module ». Là encore vous vérifiez bien que « block java script header » est sélectionné et vous cliquez sur « greffez le module sur » et vous choisissez « header » et vous faites « enregistrer ». Maintenant votre module est positionné sur le header et le « displayLeftColumn » parce que c’est l’endroit où il s’accroche au départ. Ca ne sert pas dans ce cas là, donc on va le dé greffer. Maintenant, on va aller vérifier sur notre boutique. Je recharge la page, je sais déjà que ça fonctionne parce qu’en fait Optimizely a déjà enlevé une icone. Voilà, j’ai bien le script Optimizely qui apparait ici. Donc, c’est la solution pour ajouter le code d’Optimizely de manière très simple.

Donc une fois que vous avez rajouté le script d’Optimizely sur votre site, vous retournez sur Optimizely et là on va définir des objectifs parce que faire des tests c’est bien mais il faut être capable de vérifier si ça a un impact et le seul moyen de vérifier si ça a un impact c’est de rajouter des objectifs. Donc ici, ce qu’on va vouloir voir c’est est-ce que le fait de supprimer l’image visa master card, incite les gens à appuyer plus facilement sur « ajouter au panier »? Donc, on va cliquer sur le drapeau ici, c’est « setup goals », et on va créer un nouvel objectif en cliquant « create a new goal ». Là il vous propose de mettre le nom de l’objectif donc ici c’est « clic bouton panier » par exemple. Là, vous n’allez pas remplir ce champ là parce que justement on ne veut pas aller voir une page, on veut voir un clic donc on sélectionne clic. Là il va vous recharger la page et une fois la page chargée, vous repérez votre bouton « ajouter au panier ». Vous cliquez dessus et ça vous met « element to track 1 » donc c’est parfait et vous faites « save ». Donc il vous a créé votre objectif. Il y a un autre objectif, qui est mis d’office, celui là vous pouvez le supprimer parce qu’il ne nous intéresse pas. Et donc au niveau des objectifs, il y a que celui-ci pour ce test. Vous refermez cette page là et vous cliquez sur « start experiment ». Voilà, vous venez de créer votre premier test ab. Pour aller voir le résultat, il va falloir évidemment patienter un petit peu qu’il y est de visites, vous allez avoir le nombre de visiteurs ici et le nombre d’objectifs atteint qui va apparaitre et lorsque vous allez cliquer dessus, il va vous indiquer quelques informations ici et vous allez pouvoir aller voir les résultats en cliquant sur le bouton « results ». Donc vous allez avoir beaucoup de résultats ici. Evidemment, ceci est une page de test donc on ne peut pas avoir des résultats sur cette page là, dans la mesure où il n’y a pas de visites et où il n’y a personne qui va dessus. Mais je vais vous montrer ensuite sur des tests réels que je fais le type de résultats qu’on obtient.

Maintenant, on peut voir d’autres types de tests qu’on peut réaliser avec cet outil. Vous retournez sur la page d’accueil et vous cliquez sur « new experiment ». Là on va tester comment faire en sorte d’alterner une image sur la page d’accueil. Donc je vais appeler mon test « home img right » et l’URL en question ça va être l’URL de ma page d’accueil. Vous cliquez sur « create experiment » et vous patientez un peu. Une fois qu’il a chargé votre page, on va sélectionner la photo que l’on veut modifier, moi c’est celle-ci. Vous cliquez dessus, vous faites « edit element » et vous faites « change image ». Là, il vous indique une URL donc vous pouvez mettre une URL d’une autre image que vous avez sur votre serveur et vous pouvez très bien envoyer le fichier en question. Et voilà. Mes deux variations cette fois, ça va être l’original avec cette image et la variation avec celle-ci. Alors on peut définir un objectif différent de toute à l’heure donc on va créer un nouvel objectif, un nouveau, pour le coup, ça va être le clic sur l’image en question. Une fois qu’il a chargé votre page, exactement comme toute à l’heure, vous choisissez l’élément et vous faites « sauvegarder ». Comme toute à l’heure, vous enlevez l’objectif « engagement » qui ne vous sert pas et vous faites « save » puis « strat ». Voilà, donc là on a encore créé un nouveau test ab. Vous voyez, ça va extrêmement vite, c’est très simple et ça fonctionne très bien. Après, vous pouvez faire toute sorte de tests, là j’ai simplement fait sur des images mais c’est un outil vraiment très puissant, vous allez pouvoir, par exemple, modifier le texte de cet élément. Par exemple, là je peux ajouter du texte mais je peux aussi éditer le texte. Au lieu de mettre « promotion », je peux mettre « promo » par exemple. Vous allez pouvoir, par exemple, modifier des couleurs. Ici, vous avez une couleur de fond grise, on peut très bien faire « edit element », « edit style » et là vous pouvez rajouter des couleurs de fonds différentes. Par exemple, pour la couleur de fond, on peut mettre « violet ». Donc c’est réellement un outil très puissant où vous pouvez faire vraiment beaucoup de choses.

Je vais vous montrer par exemple, sur un de mes comptes, les résultats qu’on peut avoir, ce qui nous permet d’améliorer grandement nos taux de conversion. Donc voilà par exemple une page de résultats. Vous allez voir qu’Optimizely va vous afficher le nombre de visiteurs uniques qui sont venus sur ce test et vous allez voir ici, par exemple, la répartition qu’il y a eu. Il y a eu 3322 visiteurs sur la version originale et 3284 sur la version que j’ai appelé « à ne pas rater », qui est la première variation. Et en dessous, il va vous indiquer les taux de conversion ici, et on voit que l’original performe mieux que la variation donc la variation que j’ai fait, à priori, elle n’est pas très efficace. A moi, de supprimer celle-ci et d’en créer une nouvelle pour faire un nouveau test et essayer d’améliorer mon taux de conversion et de dépasser les 4,94. Autre chose qui est assez intéressant, et c’est pour ça que ce test, je le laisse encore actif, Optimizely est capable de nous dire si pour lui le test est significatif ou pas et, à priori pour lui ce n’est pas encore le cas, parce que le pourcentage de significativité est de moins d’1 % donc ce n’est pas suffisant. Pour lui, il demande encore 18 000 visiteurs en fait pour que d’après lui, ce test soit valide. Donc c’est pour ça que, pour l’instant, ce test est encore en activité. On verra si la tendance se confirme, c’est à dire, est-ce que la version 2, la variation que j’ai créé est réellement moins efficace que l’originale ? Après, en terme de statistique, vous avez pas mal d’informations, vous avez des graphiques avec la possibilité de définir des périodes très simplement et ensuite vous allez par exemple, là c’est la courbe du taux de conversion en fonction de la version de votre page et après vous avez d’autres valeurs comme les visiteurs, les conversions uniques etc. C’est vraiment un outil très puissant que je vous conseille de tester, d’autant que vous pouvez faire énormément de choses dans la version gratuite, ça va vraiment très loin. Il y a plein de fonctionnalités dont je n’ai pas parlé notamment vous pouvez définir des segments d’utilisateurs qui vont tester votre outil. Par exemple avec internet explorer, des choses comme ça. Vous allez pouvoir déterminer pleins de choses, notamment aussi le nombre de visiteurs qui sont emmenés vers chaque test. Voilà, c’est vraiment un outil extrêmement puissant, d’une efficacité incroyable, très facile à installer comme vous l’avez vu, c’est un script à mettre sur votre site et une fois que c’est fait vous pouvez faire tous les tests que vous voulez. Donc je vous conseille réellement de vous penchez sur cet outil si vous voulez améliorer le taux de conversion de votre boutique ou même de n’importe quel site à partir du moment où vous avez des objectifs avec.

Voilà, merci d’avoir regardé cette vidéo jusqu’au bout. Je vous invite, comme toujours, à vous abonnez à ma chaine Youtube. Si la vidéo vous a plu, n’hésitez pas à cliquer sur le petit j’aime en dessous et à la partager avec vos amis. Vous pouvez également télécharger mon livre « 41 secrets pour Prestashop » et me suivre sur les réseaux sociaux, sur mon blog ou sur ma boutique en ligne.
Merci, à très bientôt.

Comment faire des tests A/B gratuitement et simplement
Votez pour cet article

4
Poster un Commentaire

avatar
2 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Olivierpierreleblond Recent comment authors
  Subscribe  
plus récent plus vieux
Recevoir un email pour
leblond
Invité
leblond

Super vidéo très intéressante, merci !!!
Avant de tester (c’est le cas de le dire!), 2 petites questions:
Est-il possible de faire un test A/B entre le tunnel de commande en 5 pages et celui en 1 page? Je pense avoir rencontré des problèmes en mettant en place la seconde solution (lien de paiement non cliquable) et cela permettrait de vérifier.
2ème question: est-ce possible de faire un test sur une page avec affichage de pop-up (de l’excellent module planned popup) et sans affichage?
Merci d’avance pour vos réponses et merci pour l’ensemble de vos articles

pierre
Invité
pierre

est ce que ce genre de script ralenti l’affichage ?