Réaliser facilement des tests A/B avec etracker tag manager

Introduction

Tu t’es déjà demandé si un bouton « Acheter » rouge était plus cliqué qu’un bouton vert ? Ou si un autre titre sur ton site web pourrait réduire le taux de rebond ? En matière de webcontrolling, la réponse est claire : ne devine pas, teste-le !

Avec les tests A/B, tu présentes de manière aléatoire deux variantes ou plus d’une page web à tes visiteurs. La moitié voit la version A (l’originale), l’autre moitié la version B (la variante modifiée). Au final, ce sont les chiffres bruts de tes rapports qui déterminent quelle version a eu le plus de succès. L’avantage pour toi est évident : tu optimises ton site web en te basant sur des données, tu augmentes le taux de conversion et tu tires le maximum de ton trafic.

Le problème : des fonctionnalités manquantes dans le CMS ou le système de boutique en ligne

En théorie, ça a l’air simple, mais dans la pratique, c’est souvent la technique qui pose problème. Beaucoup de systèmes de gestion de contenu (CMS) ou de boutiques en ligne n’offrent pas de fonctionnalité intégrée pour les tests A/B. Résultat ? Il faut soit recourir à des outils tiers coûteux, soit demander au service informatique de procéder à des modifications complexes directement dans le code du site web. Ça coûte du temps, de l’argent et des nerfs.

La solution : les tests A/B directement via le etracker tag manager

On a une bonne nouvelle pour toi : avec etracker tag manager, tu as déjà tout ce qu’il te faut pour réussir tes tests A/B !

Tu n’as besoin ni d’un module supplémentaire, ni de connaissances en programmation, ni surtout d’un accès au code source de ton site web. L’etracker tag manager se charge d’afficher les variantes « à la volée » dans le navigateur de l’utilisateur.

Tu vas découvrir ci-dessous comment préparer ce genre de configuration et à quel point tout ça fonctionne en arrière-plan.

La préparation : ce qu’il faut réfléchir à l’avance

Avant d’ouvrir Tag Manager, pose les bases de ton test. Pour ça, réponds simplement aux cinq questions suivantes :

• Quel élément du site web faut-il modifier ? (par exemple, le titre principal, la couleur de marque d’un bouton ou une image d’accroche)
• À quoi cet élément doit-il ressembler exactement dans la variante B ? Définis ici la modification concrète, par exemple le nouveau texte de l’en-tête ou la valeur exacte de la couleur du bouton.
• Comment tu veux que le trafic soit réparti ? Décide quel pourcentage de tes visiteurs doit voir la nouvelle version (généralement 50/50, ou peut-être 80/20 en faveur de l’original pour les tests plus risqués).
• Est-ce que le visiteur doit se souvenir de cette option ? En général, oui, pour qu’un utilisateur ne se retrouve pas soudain face à un autre design lorsqu’il revient sur le site.
• Quel devrait être l’objectif de ce test ? Réfléchis à ce qui te permettra de mesurer le succès (par exemple, plus de clics sur un élément ou plus d’envois d’un formulaire). Si besoin, il peut être utile de configurer au préalable une conversion adaptée dans etracker.

Les résultats : qui va gagner ?

Pour mesurer ensuite les performances des différentes variantes, chaque groupe est transmis à etracker analytics via une balise de dimension. Celle-ci transmet à etracker analytics l’information indiquant à quel groupe appartient l’utilisateur (par exemple « red »), sous la forme d’une « dimension personnalisée » de type « utilisateur ».

Dans tes rapports etracker, tu peux ensuite analyser en détail le comportement des groupes de comparaison. Tu vois tout de suite quelle variante a généré plus de clics, un temps de visite plus long ou un chiffre d’affaires plus élevé, et tu peux ainsi optimiser ton site web de manière durable et efficace.

Confidentialité et consentement lors de l’utilisation de LocalStorage

Au niveau de la mise en œuvre technique, il faut tenir compte de deux aspects importants concernant le stockage des données et la protection des données :

• Durabilité du stockage : contrairement au SessionStorage (qui est effacé quand on ferme l’onglet du navigateur), le LocalStorage utilisé dans le script d’exemple ci-dessous reste, par défaut, dans le navigateur du visiteur même après la fin de la session en cours. Ça permet de s’assurer que les utilisateurs qui reviennent restent attribués de façon permanente à la même variante de test, même lors de leurs visites suivantes.
• Cadre juridique en matière de protection des données : comme le script stocke des données localement sur l’appareil de l’utilisateur et traite des données à caractère personnel, les dispositions de la TDDDG et du RGPD s’appliquent. Il faut donc d’abord déterminer si le test A/B peut être considéré comme principalement « axé sur l’utilisateur ». En revanche, si le test sert plutôt les intérêts de l’exploitant du site web, il ne peut être mis en place qu’après obtention du consentement (opt-in).

Concrètement, ça veut dire que s’il n’y a pas d’autorisation générale, il faut s’assurer, via le Tag Manager, que la balise d’événement personnalisé ne soit diffusée qu’aux utilisateurs qui ont donné leur accord pour la catégorie « Statistiques » dans le Consent Manager.

Voici comment fonctionne la configuration dans Tag Manager, en bref

Pour mettre en place ce test sur le plan technique, on utilise les fonctionnalités intégrées de notre tag manager, combinées aux paramètres d’etracker analytics. Le principe est logique et nécessite la coordination de cinq éléments au total :

1. Le déclencheur : il détermine quand et où le test doit avoir lieu – par exemple, dès qu’un visiteur accède à la page web en question.
2. Une balise d’événement personnalisée (JavaScript) : cette balise gère la logique proprement dite. Elle vérifie en un clin d’œil, en arrière-plan, si le visiteur du site a déjà été affecté à une variante (A ou B). Si ce n’est pas le cas, la balise effectue une attribution aléatoire en fonction de la répartition que tu as choisie (par exemple 50/50), enregistre le résultat dans le LocalStorage du navigateur et remplace visuellement l’élément de la page web pour l’utilisateur de la variante B.
3. Une dimension personnalisée : tu la crées en dehors du Tag Manager, dans etracker analytics, pour pouvoir afficher un nouveau groupe d’analyse spécifique à l’utilisateur dans les rapports.
4. Une variable de stockage Web : elle est créée dans Tag Manager pour récupérer la valeur du groupe (par exemple « green » ou « red ») directement depuis le LocalStorage du navigateur.
5. Une balise « Dimension » : cette balise associe la variable à la dimension personnalisée et permet ainsi que l’information indiquant dans quel groupe se trouve l’utilisateur soit transmise automatiquement à tes rapports.

Encore plus simple pour les clients « Home » de JustRelate : création via une commande IA

Pour tous les clients qui utilisent notre plateforme JustRelate « Home », la mise en place d’un tel test A/B devient encore plus simple. Tu n’as même pas besoin de configurer manuellement les éléments nécessaires (balises, déclencheurs, variables, dimensions personnalisées).

Décris simplement ton projet en langage naturel dans notre assistant IA. L’intelligence artificielle créera alors en un clin d’œil les éléments qui te conviennent.

(Clique sur la vignette pour afficher / télécharger la capture d’écran en taille réelle.)

Guide étape par étape : comment mettre en place ton premier test A/B

Suis ces étapes pour mettre en place le test A/B et l’analyse qui va avec. Il te suffit d’adapter à tes besoins l’élément du site web à modifier, les variantes souhaitées et la répartition.

Création du déclencheur

On commence par définir quand et sur quelle page le test A/B doit s’activer. Pour ça, crée un nouveau déclencheur dans etracker tag manager. Choisis comme condition, par exemple, la consultation ciblée de la page du site web sur laquelle se trouve l’élément à tester.

Création de la balise d’événement personnalisée

On va maintenant mettre en place le cœur du test : la balise qui gère la logique et adapte le design dans le navigateur de l’utilisateur. Crée une nouvelle balise de type « Custom Event Tag ».

• Important pour la mise en œuvre : associe cette balise au déclencheur créé à l’étape 1.
• Réglage important : dans les options de la balise, indique que cette balise doit s’exécuter dans le corps (BODY) du code HTML, pour que l’élément de la page Web soit déjà chargé dans le navigateur au moment de l’exécution du code.

Insère le code JavaScript suivant dans cette balise :

<script>
(function() {
  // 1. Definition of the LocalStorage key and the test variants
  var STORAGE_KEY = 'ab_button_color';
  var variants = ['green', 'red'];

  // 2. Check if the visitor has already been assigned to a variant
  var variant = localStorage.getItem(STORAGE_KEY);
  if (!variant) {
    // If not, randomly assign green (50% chance) or red (50% chance) zugeordnet
    variant = variants[Math.random() < 0.5 ? 0 : 1];
    localStorage.setItem(STORAGE_KEY, variant);
  }

  // 3. Function for the visual adjustment of the element on the website
  function applyVariant() {
    // The CSS selector targets the specific element
    var el = document.querySelector('#cc-m-12550600721 > div > a');
    if (el) {
      el.style.backgroundColor = variant; // Background color is set to the determined variant
    }
  }

  // 4. Ensure that the script only runs once the element is loaded
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', applyVariant);
  } else {
    applyVariant();
  }
})();
</script>

Remarque importante concernant la copie de ce code : n’oublie pas qu’il s’agit ici d’un exemple d’application concret. Si tu copies ce code pour ton propre site web, tu devras adapter le sélecteur CSS, le style (ou le contenu de l’élément) ainsi que les valeurs correspondantes à tes besoins.

Que se passe-t-il dans ce code ? Le script définit d’abord un emplacement de stockage fixe (ab_button_color) dans le navigateur de l’utilisateur, ainsi que les deux couleurs de test : le vert et le rouge. Quand la page s’affiche, le script vérifie en un clin d’œil si l’utilisateur est déjà venu ici et s’il s’est déjà vu attribuer une couleur. Si ce n’est pas le cas, c’est le hasard (à 50 % dans chaque cas) qui décide si l’utilisateur est affecté au groupe « Vert » ou au groupe « Rouge ». Cette décision est enregistrée de façon permanente dans LocalStorage. Enfin, le script cherche l’élément exact sur ton site web à l’aide du sélecteur CSS que tu as défini et modifie la couleur d’arrière-plan.

Créer sa propre dimension dans etracker analytics

Pour que les données ne restent pas seulement dans le navigateur de l’utilisateur, mais apparaissent aussi dans tes rapports, on doit configurer etracker analytics en conséquence. En dehors du Tag Manager, dans ton compte etracker, va dans Compte > Enrichissement des données > Dimensions personnalisées et crée une nouvelle dimension de type « Utilisateur » (par exemple, avec le nom « Test A/B Btn-Color »).

Créer une variable LocalStorage dans Tag Manager

Retourne dans le tracker tag manager etracker. On doit apprendre au Tag Manager à récupérer la valeur depuis le navigateur de l’utilisateur. Crée une nouvelle variable de type « Web Storage ». Comme type de stockage, choisis « Local Storage » et saisis exactement le nom de la clé de notre script dans le champ « Key »: ab_button_color.

Créer une balise « Dimension » pour le transfert de données

Maintenant, on va associer la variable à la dimension. Crée une nouvelle balise de type « Dimension ».

• Utilise exactement le même déclencheur qu’à l’étape 1 (la visite de la page).
• Dans la balise, sélectionne la dimension personnalisée que tu as créée à l’étape 3 et attribue-lui la valeur de la variable de stockage Web créée à l’étape 4.

Dès que tu auras publié les modifications dans Tag Manager, le groupe correspondant à chaque utilisateur sera transmis automatiquement à etracker analytics à chaque visite de page éligible.

Test en direct dans les outils de développement du navigateur (débogage)

Pour voir tout de suite si la configuration fonctionne, tu n’as pas besoin d’attendre que les données soient traitées dans les rapports. Il te suffit d’ouvrir ta page web, de faire un clic droit et de choisir « Inspecter » (ou d’appuyer sur F12) pour ouvrir les outils de développement du navigateur. Va dans l’onglet « Réseau » et tape « cntcc » dans le champ de filtre.

Si tu actualises maintenant la page (en mode débogage, assure-toi que l’option « Déclencher réellement les balises » est activée), tu verras l’appel de suivi etracker. Clique dessus et cherche dans les paramètres des entrées telles que et_seg1 jusqu’à et_seg5 (selon l’endroit où tu as créé ta propre dimension). Tu y verras directement la valeur transmise (« green » ou « red »).

L’analyse dans les rapports etracker

Une fois que le test a été actif pendant une durée suffisante, tu peux commencer à analyser les données. Pour ça, ouvre tes rapports dans etracker analytics. En ajoutant une nouvelle dimension, en configurant un filtre ou en créant des segments, tu peux comparer directement les performances de la variante A et de la variante B.

Tu vois d’un seul coup d’œil quelle option a permis d’augmenter le nombre de conversions, le taux de clics ou la durée de visite, et tu peux optimiser ton site web de manière ciblée en te basant sur ces données utilisateur fiables.

Afficher la nouvelle « dimension personnalisée » dans le rapport :

Tu peux ajouter la nouvelle dimension personnalisée à tes rapports et la déplacer à n’importe quelle position dans l’ordre des dimensions.

Appliquer la nouvelle « dimension personnalisée » à un filtre :

En haut à droite des rapports, tu peux filtrer selon certaines dimensions ou les exclure.

Créer des segments à partir de la « dimension personnalisée » :

Grâce aux segments, tu peux aussi filtrer selon ta dimension personnalisée en combinaison avec les valeurs correspondantes, puis afficher ces segments simultanément dans le rapport.

Conclusion : l’optimisation basée sur les données, en toute simplicité

Les tests A/B ne sont pas forcément chers ni techniquement complexes. Avec etracker tag manager, tu disposes d’un outil puissant pour identifier les possibilités d’optimisation de ton site web sans avoir à modifier le code source. De la préparation stratégique à la configuration technique, en passant par l’analyse statistique validée dans les rapports etracker analytics, tout le processus peut être suivi de manière fluide. Profite de cette opportunité pour ne plus prendre tes décisions de conception à l’aveuglette, mais pour augmenter durablement ton taux de conversion en te basant sur de vraies données d’utilisateurs.