Comment réaliser des tests A/B sur un site web ?

Les tests A/B sur un site web sont une stratégie essentielle pour améliorer l’engagement des utilisateurs et les taux de conversion. C’est une méthode permettant de comparer deux versions d’une page web pour voir laquelle est la plus performante. Dans ce guide, nous vous expliquerons les étapes pour mener efficacement des tests A/B, vous permettant de prendre des décisions basées sur les données pour améliorer la performance de votre site.

Étape 1 : Formuler Votre Hypothèse

Identifier le Changement : Déterminez ce que vous souhaitez modifier sur votre page web et pourquoi. Par exemple, les utilisateurs pourraient ne pas cliquer sur un bouton de la page principale.
Objectif du Changement : Testez comment des modifications telles que la couleur ou la taille peuvent influencer le comportement des utilisateurs.

Étape 2 : Sélectionner l’URL de Test

Choisir la Bonne Page : La page web où vous prévoyez de réaliser le test devrait avoir un trafic suffisant sur une certaine période, comme deux semaines.

Étape 3 : Définir Votre Objectif

Page Cible : Décidez de la page qui sera affectée par le changement, comme une page de remerciement.
Événements sur le Site : Alternativement, l’objectif pourrait être un événement spécifique sur le site, tel qu’un clic sur un bouton.

Configuration des tests A/B dans Plerdy

Accéder aux Tests A/B : Si vous avez un compte Plerdy, rendez-vous dans Conversions > Tests A/B, et cliquez sur le bouton bleu « Créer un test ».
Nom du Test : Entrez un nom pour votre test.
URL du Test : Ajoutez l’URL où le test sera exécuté.
Code de Suivi : Si le « script de test A/B » n’a pas encore été ajouté, allez dans « Paramètres », copiez les codes de suivi principal et supplémentaire, et ajoutez-les aux pages requises, y compris la page d’objectif. Videz le cache du site et vérifiez l’installation du code de suivi.

Variants de Test et Paramètres

Date de Fin : Définissez quand vous prévoyez de terminer le test. Alternativement, arrêtez manuellement le test après 2-3 semaines si suffisamment de données sont collectées.
Audience : Ajoutez des règles si nécessaire, y compris les pays et les appareils.
Objectifs : Ajoutez l’URL exacte avec https:// ou une partie de l’URL pour le suivi. Habituellement, c’est la page finale affectée par le Variant B.
Événements : Ajoutez un objectif sous forme d’événement, en suivant les instructions pour la classe ou l’ID. Notez que les données d’événement sont alignées avec la limite de vue de page pour les cartes de chaleur. Des limites supplémentaires peuvent être achetées si nécessaire.
Envoyer les Événements à GA4 : Cochez la case pour envoyer les ID d’événement à GA4.
Description : Il est conseillé d’ajouter une note sur ce que vous avez changé et l’objectif du test, pour vous en souvenir dans 2-3 semaines.

Modification De La Variante B

Test A/B :

Modification De La Page : Après avoir ouvert le panneau de modification de la variante B, cochez les cases « Select element » et « Interactive Mode ».
Apporter Des Modifications : Appliquez 1 à 3 modifications à un élément, comme la couleur, la taille ou le masquage. Vous pouvez aussi modifier le contenu HTML, comme les liens ou les images.
Enregistrer Les Modifications : Enregistrez les modifications de chaque élément individuellement, puis utilisez le bouton « Save all changes » pour enregistrer toutes les modifications du test.

Edit Page: Cette option s’utilise quand vous voulez modifier des éléments précis sur la page actuelle sans créer une URL séparée pour la Variante B. Elle fonctionne très bien pour de petits tests A/B, comme changer la couleur d’un bouton, le texte d’un titre, l’espacement, une icône ou une image. Dans la plupart des cas, c’est le meilleur choix quand vous voulez tester une hypothèse claire et mesurer comment les utilisateurs réagissent à un changement ciblé de l’interface. C’est plus rapide que de reconstruire une page complète et cela aide à isoler précisément quelle modification a amélioré les conversions.

Ci-dessous, vous avez un exemple CSS simple pour tester la couleur d’un bouton sur la page en A/B testing :

.cta-button {
  background-color: #EE5622 !important;
  border-color: #EE5622 !important;
  color: #ffffff !important;
}

S’il y a plusieurs boutons avec la même classe, il vaut mieux utiliser un attribut unique quand il est disponible. Cela vous permet de modifier uniquement le bouton ciblé au lieu de changer tous les boutons de la page.

<a class="cta-button" plerdy-tracking-id="50130403501">Acheter maintenant</a>

a[plerdy-tracking-id="50130403501"] {
  background-color: #EE5622 !important;
  border-color: #EE5622 !important;
  color: #ffffff !important;
}

Vous pouvez aussi cibler uniquement le deuxième lien à l’intérieur du même conteneur en utilisant un sélecteur enfant. C’est utile quand les deux boutons ont la même classe et qu’aucun attribut unique n’est disponible.

<div class="bbbb">
  <a class="cta-button" href="#">Variante A</a>
  <a class="cta-button" href="#">Variante B</a>
</div>

.bbbb > a:nth-child(2) {
  background-color: #EE5622 !important;
  border-color: #EE5622 !important;
  color: #ffffff !important;
}

Test De Redirection :

Utilisez cette option lorsque la variante B est une nouvelle page distincte au lieu d’éléments modifiés sur la page d’origine.

Quand L’Utiliser : Le test de redirection fonctionne le mieux lorsque vous prévoyez de nombreuses modifications en une seule fois, par exemple sur une page d’accueil, une fiche produit, une page de catégorie ou une autre landing page importante.
Comment Cela Fonctionne : Dans ce cas, les utilisateurs qui arrivent sur la variante A sont redirigés vers la nouvelle page de test créée comme variante B, afin que vous puissiez comparer la page d’origine avec la version repensée.
Pourquoi C’Est Utile : Ce format est utile lorsque de petites modifications d’éléments ne suffisent pas et que vous devez tester un concept de page entièrement обновlé.

Lancement du Test

Revoir les Paramètres : Ouvrez la page des paramètres du test dans un nouvel onglet et actualisez.
Démarrer le Test : Cliquez sur le bouton « Démarrer le test ». Vous pouvez également voir tous les changements apportés à la page du site web en sélectionnant « Afficher tous les changements ».

Analyse des Résultats des Tests A/B

Répartition des Sessions : Chaque variante reçoit environ 50/50 % des sessions utilisateurs.
Métriques Clés : Recherchez la colonne « Amélioration » dans l’onglet Sessions Totales, qui indique la variante gagnante.
Analyse par Appareil : Examinez quel appareil a eu le plus d’impact sur la variante gagnante.
Analyse du Trafic : Déterminez quel canal de trafic a été le plus efficace.

Interprétation des Valeurs Négatives pour le Variant B

Attendre Quelques Jours de Plus : Parfois, les résultats initiaux peuvent ne pas indiquer la véritable performance en raison de facteurs tels que le faible trafic ou l’ajustement initial du comportement des utilisateurs. Attendre quelques jours de plus peut fournir plus de données pour une conclusion fiable.
Considérer le Variant B Comme Non Réussi : Si la tendance négative se poursuit de manière constante sur une période significative, il peut être judicieux de conclure que le Variant B est moins performant que le Variant A. Dans de tels cas, il est conseillé d’analyser les éléments du Variant B qui pourraient être à l’origine de la baisse de performance et d’envisager de réviser ou d’abandonner les changements effectués dans cette variante.

Conseils pour Vérifier le Variant B

Plusieurs Navigateurs : Utilisez différents navigateurs pour vérifier le Variant B, car vous ne pouvez pas voir les deux variantes dans la même session de navigateur dans les 30 minutes.

Conclusion

Les tests A/B sont un outil puissant pour l’optimisation des sites web. En suivant ces étapes, vous pouvez prendre des décisions éclairées basées sur le comportement et les préférences des utilisateurs. Rappelez-vous, la clé du succès des tests A/B est l’apprentissage continu et l’adaptation. Bon test !