Créer des tests A/B avec l'éditeur de blocs WordPress - Le guide complet

Publié: 2021-07-01

Si vous avez créé un site web avec l'éditeur de blocs WordPress, il est temps d'en tirer le meilleur parti et d'optimiser sa conversion, ce que vous pouvez faire en mettant en place des tests A/B. Dans cet article, nous verrons très brièvement ce que sont les tests A/B et pourquoi ils sont nécessaires et comment, grâce au plugin Nelio A/B Testing, vous pouvez facilement les créer sur n'importe quel site WordPress.

Table des matières

  • Qu'est-ce que la conversion Web et pourquoi créer des tests A/B ?
  • Étapes préalables à la création d'un test A/B
  • Créer un test A/B dans l'éditeur de blocs
    • Sélectionnez le type de test à créer
    • Définir les variantes de test
      • Test A/B des pages
      • Post-test A/B
      • Test A/B d'un type de publication personnalisé
      • Test A/B des titres
      • Test A/B des thèmes
      • Test A/B des modèles
      • Test A/B des menus
      • Test A/B des widgets
      • Test A/B du CSS
      • Résumé du produit WooCommerce Test A/B
    • Définissez vos objectifs de conversion et vos actions
      • Comment définissons-nous les objectifs et les actions de conversion dans les tests A/B Nelio ?
    • Segmentez votre trafic
    • Exécutez le test créé et analysez sa progression
    • Appliquer l'alternative gagnante
  • Qu'attendez-vous pour créer vos tests A/B avec l'éditeur de blocs WordPress ?

Qu'est-ce que la conversion Web et pourquoi créer des tests A/B ?

Dans le marketing en ligne, les deux sujets abordés plus en profondeur sont l'optimisation du référencement et l'optimisation du taux de conversion Web.

La conversion Web fait référence à toute action qu'un utilisateur est censé entreprendre lorsqu'il accède à un site Web. Visiter une fiche produit ou la page de tarification, s'abonner à une newsletter, nous contacter, lire un article, etc. Et le taux de conversion est le nombre de conversions réalisées par rapport au nombre de visites. Autrement dit, si vous avez un total de 100 visites quotidiennes, dont deux finissent par acheter un produit, le taux de conversion sur votre site Web est de 2 % .

Avec Google Analytics, vous pouvez mesurer votre taux de conversion à tout moment, mais le meilleur outil qui vous aidera à améliorer votre taux de conversion est le test A/B. En résumé, un test A/B consiste, sur la base d'une hypothèse d'amélioration, à proposer une évolution de votre site (par exemple, une redistribution de la Landing Page pour mieux afficher certaines informations pertinentes, un réaménagement du menu pour faire plus de clics sur ma page produit, ou un changement radical de thème pour le rendre plus attractif), et ensuite voir si ce changement fonctionne mieux que ce que vous aviez avant.

Techniquement, un test A/B n'est rien d'autre qu'une expérience qui consiste à montrer simultanément deux variantes de la même page Web à différents segments de visiteurs du site Web et à comparer quelle variante génère le plus de conversions.

Fonctionnement du test A/B
Fonctionnement du test A/B

Les tests A/B ne sont pas des expériences que vous effectuez au hasard, ils doivent faire partie d'un processus plus ambitieux connu sous le nom d' optimisation du taux de conversion ou processus CRO .

Étapes préalables à la création d'un test A/B

Afin d'améliorer votre conversion, la première chose que vous devez savoir est où vous en êtes et où vous voulez aller : définissez vos objectifs commerciaux, vos objectifs de conversion de site Web, vos KPI et les métriques pour ces objectifs .

Pour définir les objectifs de votre site Web, vous devez comprendre l' entonnoir de conversion , c'est-à-dire ce que font vos visiteurs à partir du moment où ils arrivent sur votre site Web jusqu'à ce qu'ils deviennent des clients. De cette façon, vous pouvez optimiser chaque étape différente de l'entonnoir.

Par exemple, dans le cas de notre site Web, Nelio Software, notre objectif est d'augmenter le nombre d'abonnés aux plans premium de nos plugins. Un visiteur peut découvrir les tests A/B Nelio pour la première fois lorsqu'il a recherché sur Google des informations sur les tests A/B. Une fois sur notre site Web, ils lisent certains articles de notre documentation produit pour en savoir plus à ce sujet. Ensuite, si le visiteur trouve des informations intéressantes, il demandera des informations plus détaillées ou téléchargera le plugin depuis le répertoire WordPress pour tester la version gratuite du pluign. Enfin, le visiteur souscrit à l'un de nos forfaits premium.

Définition de l'entonnoir de vente d'un site web
Définition du tunnel de vente de notre site internet.

Pour chacune des étapes, vous devez définir les différents objectifs de conversion que vous souhaitez atteindre. Par exemple, un objectif de conversion peut être un nombre minimum de visites de la documentation du produit.

Analysez et essayez de comprendre avec les outils dont vous disposez déjà (Google Analytics, heatmaps, scrollmaps, clickmaps) ce qui se passe et où vous perdez des visiteurs.

Heatmap et Nelio A/B Testing
Avec les heatmaps Nelio A/B Testings, vous pouvez mieux comprendre le comportement des visiteurs sur vos pages.

Essayez de répondre aux questions suivantes :

  • La page répond-elle aux attentes de l'internaute en termes de contenu et de design ?
  • Comment pouvons-nous l'améliorer ?
  • Le contenu et les offres du site sont-ils aussi clairs que possible ?
  • Pouvons-nous le rendre plus clair ou plus simple?
  • Qu'est-ce qui provoque l'hésitation sur cette page ou entrave le processus ?
  • Qu'y a-t-il sur la page qui n'aide pas l'utilisateur à agir ?
  • Pouvons-nous augmenter la motivation des utilisateurs ?

Et à partir de là, générez vos hypothèses de changement. Par exemple, sur notre page d'accueil Nelio A/B Testing, nous avons constaté que de nombreux visiteurs ne voient que le premier pli et ne font pas défiler la page. Après avoir discuté de diverses alternatives, nous avons décidé que nous pouvions repenser le texte. Notre hypothèse était la suivante : si dans la première section de notre site web nous modifions le message pour éveiller la curiosité plutôt que l'urgence, la conversion devrait s'améliorer.

De votre hypothèse de changement, vous avez déjà une nouvelle idée de test A/B que vous pouvez réaliser.

Version originale du premier pli de la page d'accueil Nelio A/B Testing
Variante du premier pli de la page d'accueil Nelio A/B Testing
Différences entre la version originale et la variante du premier pli de la page d'accueil Nelio A/B Testing.

Créer un test A/B dans l'éditeur de blocs

Si vous souhaitez créer manuellement un test A/B sur un site Web WordPress, vous pouvez utiliser Google Analytics pour l'analyse des conversions. Cependant, notre recommandation est que vous utilisiez l'un des outils disponibles sur le marché. Et surtout, nous vous recommandons l'utilisation de Nelio A/B Testing (version gratuite et premium à partir de 29€/mois), car c'est un plugin WordPress natif et, à ce titre, il est 100% compatible avec l'éditeur de blocs, ce qui vous permet de pas besoin d'apprendre ou d'utiliser un autre outil externe pour son fonctionnement.

Avec Nelio A/B Testing, créer des alternatives pour n'importe quel test A/B revient exactement à créer n'importe quelle page, article, menu, widget, etc. dans WordPress, mais cela vous évite également d'avoir à segmenter le trafic vers votre site Web et vous fournit directement les mesures et les résultats que vous recherchez.

Voyons ci-dessous les différentes étapes à suivre pour créer un test A/B avec Nelio A/B Testing avec l'éditeur de blocs WordPress :

  • Sélectionnez le type de test à créer
  • Définir les variantes de test
  • Définir les objectifs et les actions de conversion
  • Définissez les segments, le cas échéant, que vous souhaitez analyser
  • Exécutez le test et analysez vos progrès
  • Appliquez la variante gagnante et rendez-la permanente

Sélectionnez le type de test à créer

Ce n'est pas la même chose de créer un test A/B d'une page que d'un menu de navigation. La création des variantes sera différente mais le grand avantage d'utiliser un outil comme Nelio A/B Testing est qu'il vous guidera tout au long du processus au sein même de WordPress, le rendant totalement intuitif et simple.

La première chose que vous devez faire est de sélectionner le type de test A/B que vous souhaitez créer et il vous propose une grande variété d'éléments parmi lesquels choisir :

Sélecteur de test dans Nelio A/B Testing
Sélecteur de test dans Nelio A/B Testing.

Une fois que vous avez sélectionné le type de test, vous verrez que la création de variantes de test est exactement la même que lorsque vous créez n'importe quel élément WordPress.

Définir les variantes de test

Pour le type de test que vous avez sélectionné, vous devez choisir l'élément que vous souhaitez tester et définir ses variantes. Voyons un exemple…

Test A/B des pages

Récemment, afin d'augmenter les ventes de notre produit Nelio Content, nous avons décidé de tester A/B sa page de tarification. En particulier, nous voulions analyser quelle combinaison de couleurs des différents plans pourrait générer le plus de revenus pour nous.

Capture d'écran des plans Nelio Content affichés dans des variations de couleur bleue
Version originale de notre test A/B : les plans de contenu Nelio sont affichés dans des variations de couleur bleue.

Nous avons décidé de créer, en plus de la version originale, deux autres variantes avec ces combinaisons de couleurs :

Capture d'écran des plans Nelio Content présentés dans la première variante d'un test A/B
Capture d'écran des plans Nelio Content présentés dans la première variante du test A/B.

Dans la première variante, nous avons décidé de montrer les plans avec une sélection de couleurs pastel très en vogue cette année.

Capture d'écran des plans de Nelio Content pour la deuxième variante d'un test A/B
Capture d'écran des plans Nelio Content présentés dans la deuxième variante du test A/B.

Et dans la deuxième variante, comme vous pouvez le voir sur l'image ci-dessus, nous voulions uniquement mettre en évidence le plan Standard.

Comment créer ce test avec Nelio A/B Testing ? Après avoir sélectionné que vous souhaitez effectuer un test de page, la première chose à faire est de vous nommer test et de sélectionner la page que vous souhaitez tester.

Capture d'écran de la création d'un nouveau test de page avec Nelio A/B Testing
Capture d'écran de la création d'un nouveau test de page avec Nelio A/B Testing.

Vous pouvez choisir la page testée à l'aide d'un sélecteur déroulant. Si la page n'y est pas, vous pouvez la rechercher en saisissant son titre, son URL ou son identifiant. Nous appelons cette page la page de contrôle ou la version de contrôle.

Ensuite, vous pouvez créer une ou plusieurs variantes (que vous pouvez nommer). Par défaut, chaque variante sera une copie exacte de la page de contrôle que vous aviez précédemment sélectionnée. Cliquez sur le lien Modifier de la variante et vous aurez l'éditeur de blocs WordPress que vous connaissez déjà pour pouvoir apporter toutes les modifications que vous souhaitez.

Capture d'écran de l'édition d'une variante d'un test A/B avec Nelio A/B Testing
Editer une variante d'un test A/B avec Nelio A/B Testing.

Ajoutez, modifiez et supprimez les blocs et les motifs que vous souhaitez sur les pages de variantes comme vous le souhaitez. Comme vous pouvez le voir, vous utiliserez le même éditeur que vous avez utilisé pour créer la page de contrôle, ce qui signifie que vous avez le contrôle total pour modifier la variante à votre guise. Notez cependant que dans la barre latérale droite de l'édition de la variante, vous verrez que la page que vous modifiez fait partie d'un test A/B :

Capture d'écran des fonctionnalités d'édition d'une variante d'un test A/B
Propriétés disponibles dans l'édition d'une variante d'un test A/B.

Post-test A/B

La création d'un test A/B pour une publication est très similaire à celle d'une page. Après avoir sélectionné que vous souhaitez créer un test de publication, la liste déroulante pour sélectionner la publication originale que vous souhaitez tester affichera la liste des publications publiées. Vous pouvez également rechercher l'entrée en saisissant son titre, son URL ou son identifiant.

Sélectionnez l'entrée à tester dans un test A/B avec Nelio A/B testing.
Sélectionnez la publication à tester dans un test A/B avec Nelio A/B testing.

Le reste du processus est exactement le même que le précédent.

Test A/B d'un type de publication personnalisé

Si vous souhaitez créer un type de test A/B d'un type de publication personnalisé différent des pages et des publications, tels que des cours que vous avez créés sur votre site Web, des FAQ, etc., vous pouvez également le faire avec Nelio A/ Test B. Il vous suffit de sélectionner que vous souhaitez effectuer ce type de test, et maintenant le sélecteur vous permettra de sélectionner d'abord le type de type de publication personnalisé que vous souhaitez, puis le contenu spécifique que vous souhaitez tester.

Sélectionnez le contenu personnalisé à tester dans un test A/B avec Nelio A/B testing.
Sélectionnez le type de publication personnalisé à tester dans un test A/B avec Nelio A/B testing.

Test A/B des titres

Si vous souhaitez créer des titres plus attrayants, Nelio A/B Testing vous facilite la tâche. Vous pouvez tester différentes versions du titre, de l'extrait et de l'image vedette d'un article et découvrir quelle combinaison attire le plus de lecteurs.

Pour effectuer un test de titre avec Nelio A/B Testing, vous n'avez pas besoin d'aller dans l'éditeur de blocs. Le plugin lui-même permet de le faire directement dans l'édition d'un test :

Définir un test A/B de titre avec Nelio A/B Testing.
Définir un test A/B de titre avec Nelio A/B Testing.

Sélectionnez le post dont vous souhaitez tester le titre et créez une ou plusieurs variantes :

Définition d'alternatives phares avec Nelio A/B Testing.
Définition d'alternatives phares avec Nelio A/B Testing.

Test A/B des thèmes

Si après l'analyse de votre site Web votre hypothèse est que votre site Web a besoin d'un changement plus radical, peut-être que changer de thème peut être une alternative. Créer un test thématique est très facile avec Nelio A/B Testing. Il vous suffit d'avoir installé dans votre WordPress les thèmes que vous souhaitez tester et de les sélectionner dans l'A/B test des thèmes.

Définition du test A/B des sujets avec Nelio A/B Testing.
Définition d'A/B test de thèmes avec Nelio A/B Testing.

Test A/B des modèles

Au lieu de changer le thème d'un site Web, vous pouvez essayer de créer différents modèles pour certaines des pages de votre site Web. Concevez-les à l'avance avec l'éditeur de blocs, puis effectuez un test A/B avec eux.

Sélection d'une variante de modèle d'un test A/B avec Nelio A/B Testing.
Sélection d'une variante de modèle d'un test A/B avec Nelio A/B Testing.

Comme toujours, c'est aussi simple que de sélectionner les différentes variantes de modèle que vous souhaitez utiliser comme variante de modèle sur toutes les pages qui utilisent un modèle particulier.

Test A/B des menus

Créer un test A/B de menus est aussi simple que de sélectionner l'un des menus dont vous disposez actuellement et de créer les variantes souhaitées.

Définition d'un nouveau menu A/B test avec Nelio A/B Testing.
Définition d'un nouveau menu A/B test avec Nelio A/B Testing.

Pour modifier les variantes, il vous suffit de cliquer sur le lien pour éditer et modifier le menu de la même manière que vous éditez n'importe quel menu traditionnel. Une fois créé, vous l'avez déjà disponible comme variante de ce test.

Modifier une variante d'un menu A/B test avec Nelio A/B Testing
Modifiez une variante d'un test A/B de menu avec Nelio A/B Testing.

Modifiez la structure du menu en changeant les éléments comme vous le souhaitez et, lorsque vous l'avez prêt, revenez au test.

Test A/B des widgets

Si vous avez besoin de créer un test de widget dans WordPress, après avoir sélectionné que vous souhaitez créer un test de widget, il vous suffit d'indiquer le nom de la nouvelle variante de widget et de cliquer sur le lien Modifier .

Création d'une variante de widget dans un test A/B avec Nelio A/B Testing.
Création d'une variante de widget dans un test A/B avec Nelio A/B Testing.

Lors de l'édition d'une variante, Nelio utilise le propre éditeur de widgets de WordPress avec quelques contrôles supplémentaires. Ajoutez, supprimez et triez les variantes de widgets comme vous le souhaitez, puis revenez au test :

Modification d'une variante de widget dans un test A/B.
Modification d'une variante de widget dans un test A/B.

Test A/B du CSS

Si vous souhaitez tester différentes versions des règles de style CSS et déterminer celle qui fonctionne le mieux pour atteindre vos objectifs, vous pouvez choisir de créer un test CSS. Comme dans le cas des widgets, il vous suffit d'entrer le nom de la nouvelle variante et de cliquer sur le lien d'édition. Dans ce cas, un éditeur s'ouvrira pour vous permettre d'ajouter les styles CSS que vous souhaitez tout en prévisualisant leur effet en temps réel :

Modification d'une variante d'un test A/B CSS avec Nelio A/B Testing.
Modification d'une variante d'un test A/B CSS avec Nelio A/B Testing.

Une fois que vous avez défini les nouvelles règles, cliquez sur publier et vous avez créé la variante CSS de votre test.

Résumé du produit WooCommerce Test A/B

Enfin, les tests A/B de résumé de produit WooCommerce sont un test spécifique à WooCommerce dans lequel différentes combinaisons de nom, de description courte et d'image de produit sont testées, dans le but de découvrir lequel d'entre eux obtient le plus d'achats dudit produit. La façon de créer un test de ce type est très similaire à celle des titres que nous avons vus précédemment.

Si vous avez choisi de créer un test de ce type, Nelio A/B Testing vous montrera dans un menu déroulant les produits dont vous disposez et vous n'aurez qu'à apporter les modifications des variantes que vous souhaitez créer directement dans le éditeur d'essais. Vous n'avez pas besoin d'aller modifier le produit.

Définition d'un test A/B de résumé de produit WooCommerce avec Nelio A/B Testing.
Définition d'un test A/B de résumé de produit WooCommerce avec Nelio A/B Testing.

Définissez vos objectifs de conversion et vos actions

Après avoir défini les variantes de votre test, l'étape suivante consiste à définir l'objectif de conversion du test. Autrement dit, quel est le but de votre test ? Par exemple, votre objectif peut être d'obtenir plus de ventes, plus d'abonnés ou plus de visites sur la page de tarification. Quels que soient vos objectifs, ils sont atteints lorsque le visiteur effectue certaines actions. Par exemple, vous voudrez peut-être considérer que vous avez obtenu un nouvel abonné lorsqu'un utilisateur a soumis un formulaire d'abonnement sur votre site Web ou cliqué sur un bouton "S'abonner" sur votre page de tarification.

Comment définissons-nous les objectifs et les actions de conversion dans les tests A/B Nelio ?

Dans la section Objectifs et actions de conversion , vous pouvez ajouter autant d'objectifs que vous le souhaitez en cliquant sur le lien + Nouveau et vous pouvez éventuellement leur ajouter un nom. Nelio A/B Testing vous montrera des informations sur l'efficacité de chaque variante pour chacun des objectifs que vous avez définis.

Définition des objectifs de conversion dans un test A/B de contenu personnalisé avec Nelio A/B testing.
Définition des objectifs et des actions de conversion dans un test A/B avec Nelio A/B testing.

Pour chacun des objectifs que vous avez définis, vous disposez de différents types d'actions de conversion pour suivre vos visiteurs. Par exemple, vous pouvez surveiller quand ils accèdent à une certaine page, quand ils cliquent sur un certain élément de votre site Web ou quand ils soumettent un formulaire de contact. Cliquez sur le bouton d'action qui vous intéresse et, pour chaque type d'action, définissez ses propres paramètres de configuration.

Dans l'exemple du test sur la page de tarification de Nelio Content, nous avons défini 4 objectifs à mesurer au sein du test :

  • Clique sur les boutons de n'importe quel plan.
  • Clique sur les boutons du plan de base.
  • Clique sur les boutons du plan Standard.
  • Clique sur les boutons du plan Plus.
Capture d'écran de la définition d'un test A/B des plans Nelio Content
Capture d'écran de la définition d'un test A/B des plans Nelio Content.

Segmentez votre trafic

L'une des caractéristiques intéressantes de certains outils de test A/B est que vous pouvez segmenter votre trafic. Autrement dit, vous ne pouvez définir que certains visiteurs pour participer à un test. Par exemple, par pays, heure, langue, navigateur, appareil, etc. Si vous souhaitez plus de détails sur la façon d'implémenter la segmentation du trafic avec Nelio A/B Testing, dans cet article Antonio vous l'explique en détail.

Exécutez le test créé et analysez sa progression

Et voilà, il ne vous reste plus qu'à appuyer sur le bouton pour lancer un test et analyser son déroulement. Nelio A/B Testing se chargera de répartir votre trafic afin que chaque visiteur ne voie qu'une des variantes que vous avez créées et de suivre son comportement. Lorsque vous utilisez Nelio A/B Testing, vous n'avez pas à vous soucier du temps dont vous avez besoin pour exécuter un test ou contrôler la confiance statistique des données, car le plugin s'en chargera. Regardez simplement les données qui comptent le plus pour vous : le nombre total de conversions et de visites pour chaque variante testée. Vous pourrez également voir le pourcentage d'amélioration de chaque variante par rapport à la version originale.

Par exemple, après un mois et neuf jours d'exécution du test de la page de tarification Nelio Content, nous avons déjà obtenu des résultats statistiquement significatifs avec une confiance de près de 100 %. Et, dès le premier objectif, qui consistait à mesurer les clics qui ont été effectués sur l'un des boutons des plans de grille tarifaire, nous avons eu les résultats suivants :

Capture d'écran de l'analyse des résultats du premier objectif du test A/B réalisé
Analyse des résultats du premier objectif du test A/B réalisé.

Dans ce cas, comme vous pouvez le voir sur l'image des résultats, ils montrent que la deuxième variante, l'alternative C, est celle qui réalise près de 130% de clics en plus que la version originale. En revanche, la variante montrant les plans aux couleurs pastel est 25,5% moins bonne. Si nous n'avions eu que cet objectif du test, l'alternative C, nous voyons qu'il a obtenu des résultats écrasants.

De la même manière, nous avons analysé chacun des objectifs que nous nous étions fixés et, en regardant les résultats que nous avons obtenus du test A/B, nous sommes arrivés à la conclusion que la version C, qui mettait clairement en évidence le plan Standard avec une couleur d'accent , fonctionnaient beaucoup mieux que les variantes A et B.

Appliquer l'alternative gagnante

Enfin, comme dans l'exemple ci-dessus, si vous obtenez une variante gagnante d'un test, Nelio A/B Testing vous permet d'appliquer cette variante comme version finale sur votre site Web. C'est un autre grand avantage de Nelio A/B Testing étant un plugin WordPress natif, l'application de l'alternative gagnante implique uniquement de cliquer sur Appliquer .

Capture d'écran de l'application de la variante gagnante d'un test A/B
Capture d'écran de l'application de la variante gagnante d'un test A/B comme final.

Et voilà , vous avez maintenant un nouveau design de votre site web avec des données éprouvées, mieux que le précédent.

Qu'attendez-vous pour créer vos tests A/B avec l'éditeur de blocs WordPress ?

Avec ce guide complet sur la façon de créer des tests A/B dans l'éditeur de blocs, vous savez maintenant que les tests A/B de Nelio facilitent grandement les tests A/B sur WordPress. De plus, grâce à l'utilisation d'un outil comme celui-ci, vous n'avez pas à vous soucier de diviser le trafic de votre site Web ou d'analyser le comportement de vos visiteurs. Nelio A/B Testing fait tout pour vous de manière très confortable. Notre expérience et celle de nos clients nous montrent que les tests A/B vous aident à mieux comprendre ce que vos visiteurs s'attendent à trouver sur votre site Web et comment augmenter les revenus de votre entreprise sans avoir besoin de publicité supplémentaire.

Si vous avez trouvé ce guide utile, merci de le partager sur vos réseaux sociaux. Et si vous avez des questions, des commentaires ou besoin d'informations supplémentaires, n'hésitez pas à laisser votre commentaire à la fin de cet article.

Image sélectionnée par Maarten Deckers dans Unsplash .