Des tests a/b en JavaScript pur
Plusieurs outils très bons existent pour faire des tests a/b. Dans cet article, nous verrons comment utiliser juste du JavaScript pour:
- implémenter des variantes pour tests a/b
- s’assurer qu’une personne donnée voit toujours la même variante (via un cookie)
- s’assurer qu’on puisse analyser les résultats
Les outils utilisés
Pour le code du site web web, tout se fera en HTML, CSS et JavaScript. Pour l’analyse des résultats, on utilisera Google Analytics et Google Tag Manager (GTM).
Pour suivre en mode vidéo
Commençons par le site web de base
J’ai mis en place un site web très simple qui implémente des tests a/b en Javascript, que vous trouverez:
- Sur GitHub, au https://github.com/dcycle/abtestexample/
- Sur le web, au https://dcycle.github.io/abtestexample/
Ce site
- montre un bloc vert à 50% des utilisateurs
- montre un bloc rouge à 50% des utilisateurs
- se rappelle via un cookie du bloc que vous avez vu
- affiche un texte si on clique sur la boîte (rouge ou verte)
Si vous voulez suivre ce tutoriel, faites un fork du site, activez GitHub Pages, et assurez-vous qu’il soit visible au https://MON_NOM_DUTILISATEUR_GITHUB.github.io/abtestexample/.
Mettez en place un compte Google Analytics (GA)
Vous devez avoir un compte (par exemple votre nom ou le nom de votre compagnie) et une propriété (par exemple “exemple de test a/b”).
Votre propriété doit avoir une identité (qui ressemble à G-T3KDTL02B7), qui se trouve à admin > data steams > [votre propriété].
Notez ce numéro mais ne mettez pas le code Google Analytics sur votre site. Plutôt nous allons connecter Google Analytics à Google Tag Manager (GTM), puis GTM à votre site.
GTM
GTM est un niveau d’abstraction entre votre site web et des “tags” ou services du genre GA.
GTM ne doit pas nécessairement contenir GA.
GTM peut contenir une foule d’autres tags, pas juste GA.
Ouvrez un compte GTM et mettez-y un conteneur. Votre coteneur est votre site web et a une identité qui ressemble à GTM-K9MW6VF5.
GTM vous demandera de mettre du code javascript sur toutes les pages de votre site web; mettez ce code sur votre site.
Comprendre les sélecteurs css pour les tests a/b
Si vous visitez le code source de https://dcycle.github.io/abtestexample/, vous verrez que, lorsque la boîte est verte, nous avons:
<body class="my-variant-A">
...
<div class="my-big-box>...</div>
...
</body>
et quand la boîte est rouge, nous avons:
<body class="my-variant-B">
...
<div class="my-big-box>...</div>
...
</body>
Ainsi, nous pouvons déduire que:
- Le sélecteur css de la boîte verte est
.my-variant-A .my-big-box. - Le sélecteur css de la boîte rouge est
.my-variant-B .my-big-box.
Dans ce tutorial nous utiliserons ces sélecteurs pour déterminer quand:
- la boîte verte (variante A) est visible
- la boîte rouge (variante B) est visible
- la boîte verte (variante A) est cliquée
- la boîte rouge (variante B) est cliquée
Les “triggers” dans tag manager
Pour commencer, faites 4 triggers (déclancheurs), que nous appellerons:
- “show a trigger”:
- trigger type: Element visibility
- selection method: css selector
- element selector:
.my-variant-A .my-big-box
- “show b trigger”:
- comme “show a trigger” mais en utilisant
.my-variant-B .my-big-box.
- comme “show a trigger” mais en utilisant
- “click a trigger”:
- trigger type: click - all elements
- trigger on: some clicks
- fire this trigger when: Click element Matches CSS selector
.my-variant-A .my-big-box.
- “click b trigger”:
- comme “click a trigger” mais en utilisant
.my-variant-B .my-big-box.
- comme “click a trigger” mais en utilisant
Maintenant nous avons 4 trigger qui se déclanchent:
- Quand un utilisateur voit le bloc vert.
- Quand un utilisateur voit le bloc rouge.
- Quand un utilisateur clique sur le bloc vert.
- Quand un utilisateur clique sur le bloc rouge.
Comment associer votre compte GA à votre compte GTM
Dans GTM, allez dans “Variables” puis ajouter une constante “GA ID” qui contient votre identité GA, dans mon cas c’est G-T3KDTL02B7, mais pour vous ce sera différent.
Les “tags”
Les déclancheurs ne font rien en soi, il faut les associer à des “tags”. Dans notre cas nous voulons que nos tags soient des événements GA, qu’on pourra interpréter plus tard dans GA.
Dans la section “tags”, ajouter un tag “show a tag” avec ces informations:
- Tag type: Google Analytics: GA4 Event
- Measurement ID: (C’est le nom de votre variable de tout à l’heure)
- Event name: show a event
- Trigger: show a trigger.
Faites maintenant la même chose pour
| tag | event | trigger |
|---|---|---|
| show b tag | show b event | show b trigger |
| click a tag | click a event | click a trigger |
| click b tag | click b event | click b trigger |
Vous aurez maintenant 4 tags:
- show a tag
- show b tag
- click a tag
- click b tag
Associés avec 4 événements qui seront envoyés à GA:
- show a event
- show b event
- click a event
- click b event
Publiez vos changements de GTM
GTM est conçu pour essayer différentes choses, puis de les publier sur votre site.
Dans GTM, cliquez sur Submit pour publiser votre dernière révision de changemenst.
Prévisualisez votre arrangement
Il y a un bouton “Preview” dans GTM. En cliquant dessus, une fenêtre “Tag Assistant” va s’ouvrir pour déboguer votre travail.
Cliquez sur “Connect” et une autre fenêtre s’ouvrira, ce sera votre site web associé au “Tag Assistant”.
À ce stade vous aurez 3 fenêtres actives:
- GTM (votre tableau de bord)
- Tag assistant (le système de test ou prévisualisation)
- Votre site web associé à Tag Assistant
Votre site web aura maintenant un bloc vert ou rouge (c’est un hasard).
Dans la section sommaire du Tag Assistant, cliquez sur la section “Element visibility”. Vous y verrez:
- Tags fired: “show a tag” (si vous voyez le bloc vert)
- Tags fired: “show b tag” (si vous voyez le bloc rouge)
Cliquez sur le bloc.
Vous verrez maintenant une nouvelle section, Click. Cliquez dessus.
Vous y verrez:
- Tags fired: “click a tag” (si vous avez cliqué sur le bloc vert)
- Tags fired: “click b tag” (si vous avez cliqué sur le bloc rouge)
Déboguez GA
Pour voir si GA a bel et bien reçu ces événements, rendez-vous à GA, puis dans admin > Data display > Debug view, vous verrez une ligne du temps avec les événements (show a tag, click a tag par exemple) reçus par GA dans les dernières 30 minutes.
Attendez 24 - 48 heures
Le compteurs des événements dans GA sera peut-être à zéro; c’est parce que cela prend 24 à 48 heures pour que les événements percolent vers le rapport GA.
Profitez-en pour écrire une lettre à un être cher, ou pour visiter votre quartier.
Faire un rapport personalisé
Une fois que vos événements apparaissent dans GA, allez dans la section “Explore” et créez un nouveau rapport “Free form”.
- Segments: All users
- Amenez ce segment dans “Segment comparisons”
- Dimensions: event: event name
- Amenez cette dimension dans la section “rows”
- Metrics: event: event count
- Amenez cette métrique dans “values”
Maintenant nous voulons avoir seulement les événements suivants:
- show a event
- show b event
- click a event
- click b event
Amenez donc la dimention “event name” dans la section “Filters”.
- Dans condition, sélectionnez “matches regex” (regex, ou regular expression, est une façon de filtrer des textes).
- Dans enter expression, mettez
(show|click) (a|b) event.
Cette expression va sélectionner seulement les événements
- Qui commencent par “show” ou “click”.
- …suivi d’un espace
- …suivi de ou bien “a” ou “b”.
- …suivi d’un espace et de “event”.
Ainsi, nous filtrons uniquement les événements que nous voulons voir.
Ce rapport permet de constater:
- Combien de personnes ont vu la variante “a” (la boîte verte)
- Combien de personnes ont cliqué dessus
- Combien de personnes ont vu la variante “b” (la boîte rouge)
- Combien de personnes ont cliqué dessus