Test fractionné simple avec Google Tag Manager

Au cours des deux derniers articles, j’ai principalement effectué des tests de preuve de concept (POC) avec Google Tag Manager. La grande chose à propos d’un POC est que vous n’avez pas vraiment besoin d’avoir des résultats viables ou des innovations technologiques motivantes. Il s’agit de présenter certaines caractéristiques de la plate-forme sur laquelle l’expérience a été menée.

Dans cet article, je ferai à nouveau un pas sans souci dans le monde des POC. Mon objectif est de faire un test fractionné simple afin d’identifier quelle variante d’une page de destination (ou élément clé de celle-ci) produit le plus de conversions.

Cela ne remplace aucun des outils de test REAL A/B. C’est plutôt une façon pour moi de montrer une autre façon d’utiliser la merveilleuse complexité de la magie JavaScript de GTM.

Quoi qu’il en soit, voici ce que vous emporterez (espérons-le) avec vous après avoir lu cet article :

• Comment modifier un élément DOM

• Comment paramétrer un cookie

• Comment montrer une variante différente à 50 % des utilisateurs

Combinez-les et vous avez un test fractionné en préparation !

Le résultat final

C’est comme ça que ça va descendre. Exactement 50 % des personnes consultant la page de test verront le bouton suivant :

C’est aussi la variante de contrôle. C’est celui que j’utilise depuis des années et des années pour faire des millions et des millions à mes fidèles followers (je plaisante). Cependant, je veux voir si une approche plus nonchalante de l’appâtage au clic fonctionnerait (et je veux faire appel aux groupes démographiques les plus jeunes et les moins critiques), c’est donc la variante de test présentée aux 50 % restants :

Je vais donc mesurer le nombre de clics collectés par chacun de ces boutons. Au final, je devrais le voir dans mes rapports à la fois comme des événements et comme une dimension personnalisée. Voici à quoi ressemblerait un rapport de conversion d’objectif pour les deux variantes.

Ce n’est pas exactement de la science dure, mais cela a fait le travail. Étonnamment, la variante de contrôle était plus forte, produisant plus de conversions (qui l’aurait deviné ?!).

Mise en place de GTM

Pour cette expérience, vous aurez besoin des éléments suivants :

1. Macro de cookie propriétaire {{Cookie de variation de fractionnement}}

2. Macro de nombre aléatoire {{Nombre aléatoire}}

3. Balise HTML personnalisée

4. Dimension personnalisée

5. Balise d’événement Universal Analytics

Macro cookie propriétaire

Vous aurez besoin d’un cookie propriétaire pour vous assurer que le même utilisateur voit la même variante à chaque fois qu’il visite la page. Ainsi, lorsque la variante est attribuée pour la première fois à l’utilisateur, ce cookie est également écrit. Le cookie renverra la valeur de la variante, qui est également importante pour le tag d’événement et la dimension personnalisée.

1. Créer une nouvelle macro de cookie propriétaire

2. Nomme le Biscuit de variation fractionné

3. Ensemble Nom du cookie à splitVar

Donc quelque chose comme ça :

Cette macro renverra la valeur du cookie splitVar qui, comme nous le verrons bientôt, stocke la variante que l’utilisateur devrait voir pendant l’expérience.

Macro de nombre aléatoire

J’utiliserai la macro de nombre aléatoire pour échantillonner 50 % de mes visiteurs. C’est une bonne astuce, et je l’ai vue pour la première fois sur le blog de Dan Russell.

1. Créer une nouvelle macro de nombre aléatoire

2. Nomme le Nombre aléatoire

Nous y voilà:

Ainsi, chaque fois que cette macro est appelée, elle renvoie une valeur comprise entre 0 et 2147483647. Pouvez-vous voir à quel point cela est utile pour l’échantillonnage ? Si je vérifie si {{Random Number}} < 0.5*2147483647, il devrait retourner true 50 % du temps.

Balise HTML personnalisée

C’est là que la magie opère. Vous aurez besoin d’une balise HTML personnalisée pour effectuer une grande variété de choses : modifier l’élément DOM, identifier la variante préférée de l’utilisateur, définir et lire un cookie, etc.

Commençons par le code lui-même. C’est ce que la balise devrait avoir. N’oubliez pas de le faire se déclencher sur toutes les pages sur lesquelles le test est exécuté.

<script>   function testVariant() {     controlElement.style.backgroundColor="#000099";     controlElement.innerHTML="**Click here if you want, whatever**";     return variantTwo;   }      var controlElement = document.getElementById("call-to-action"), // Set ID of control element       variantOne = "clickDollars", // Variation 1 name       variantTwo = "clickWhatever", // Variation 2 name       variant = variantOne,        randomNumSample = 1073741824;    if(!{{Split Variation Cookie}} && controlElement) { // If cookie isn't set run code     if({{Random Number}} < randomNumSample) {       variant = testVariant(); // For 50 % of hits, fire Variation 2     }     var d = new Date(); // Create cookie     d.setTime(d.getTime()+1000*60*60*24*730);     var expires = "expires="+d.toGMTString();     document.cookie = "splitVar="+variant+"; "+expires+"; path=/";   } else if({{Split Variation Cookie}} == variantTwo && controlElement) { // If user has only seen Variation 2     variant = testVariant();   } </script>

Passons en revue ce code.

Lignes 2 à 6 contiennent le code qui modifie un élément DOM prédéfini. Ainsi cette fonction opère le split test proprement dit, montrant une variation différente de la landing page pour 50 % des utilisateurs. Cette fonction renvoie le nom de la variation 2.

Lignes 8 à 12 configurez des variables pour que ce script fonctionne. Changement appel à l’action dans getElementById(“appel à l’action”); pour correspondre à l’attribut ID de l’élément HTML avec lequel vous souhaitez jouer sur la page. Modifier les valeurs de chaîne pour variationUn et variationDeux pour correspondre à la façon dont vous voulez nommer ou deux variantes. Ces valeurs seront utilisées dans vos rapports GA. Enfin, la variable randomNumSample contient une valeur numérique correspondant exactement à 50 % du maximum que la macro de nombre aléatoire peut renvoyer.

Lignes 14 à 21 testez d’abord si une variante vous a déjà été attribuée en vérifiant vos cookies. Si aucun cookie n’est trouvé, vous êtes un nouvel utilisateur et une variante doit vous être attribuée. Dans ce cas, le script vous attribue au hasard soit la variante de contrôle (par défaut, “clickDollars”), soit la variante de test (“clickWhatever”). Ensuite, il écrit ces informations dans un cookie qui restera longtemps avec vous.

Lignes 22 à 24 sont exécutés si le cookie est trouvé. Dans ce cas, si la variante qui vous a été attribuée était la variante de test, la fonction de modification du DOM depuis le début (voir les lignes 2 à 6) est exécutée à nouveau pour s’assurer que vous voyez toujours la même variante de la page de destination. Si la variante qui vous a été attribuée était la variante de contrôle, rien ne se passe, puisqu’il s’agit de la version par défaut de la page de destination.

Certaines choses à noter. Tout d’abord, le cookie est défini pour deux ans, il imite donc le cookie _ga. Le fait est que l’utilisateur doit toujours voir la même variation (à condition qu’il utilise le même navigateur). Pour certains tests fractionnés, cela n’est pas nécessaire, vous pouvez donc modifier le code pour renoncer à la vérification des cookies. De plus, toutes les fonctions testent des valeurs indéfinies (à la fois du cookie et de l’élément de contrôle), donc je n’ai pas vu la nécessité d’ajouter des blocs try…catch inutiles ou quoi que ce soit d’autre.

Conseil de pro – Utilisez le calendrier de déclenchement personnalisé rarement utilisé pour cette balise afin de vous assurer que votre test ne s’exécute qu’un certain temps :

Dimension personnalisée

Vous devrez créer une nouvelle dimension personnalisée à l’échelle de l’utilisateur, afin d’avoir un segment supplémentaire avec lequel jouer dans vos données.

1. Accédez à l’administrateur de Google Analytics et choisissez la propriété sur laquelle vous allez suivre ces visites

2. Choisissez Définitions personnalisées > Dimensions personnalisées et créez un nouveau CD à portée utilisateur.

3. Donnez-lui un nom descriptif (j’ai nommé le mien juste Variante d’essai)

4. Notez l’index des dimensions

Donc quelque chose comme ça :

Vous pouvez également utiliser une dimension session-scope ou même une dimension hit-scope, selon la portée de votre test. Cependant, même si je ne suis pas un praticien CRO professionnel (loin de là !), je vois l’intérêt d’observer les interactions sur une multi-visite, utilisateur-niveau plutôt que le domaine relativement petit d’une seule visite ou d’un hit. Cependant, certaines questions de conception Web peuvent probablement être répondues sur une portée plus limitée, je suppose.

Balise d’événement Universal Analytics

Le dernier élément dont vous aurez besoin est un événement qui se déclenche et envoie vos données à Google Analytics. Parce que j’observe un bouton (que j’ai enfermé dans un <a href...> element), j’utilise également un Link Click Listener. Si cela ne vous dit rien, assurez-vous de consulter mon guide sur le suivi automatique des événements.

Donc, de toute façon, j’ai un Link Click Listener qui se déclenche sur la page de test. Ce que je veux savoir, c’est exactement quelle variante l’utilisateur voyait lorsqu’il a cliqué sur le bouton. C’est ainsi que je comptabiliserai mes conversions et déterminerai quelle variante a été gagnante. J’enverrai également la dimension personnalisée avec l’événement, afin que l’utilisateur soit correctement annoté avec le nom de la variante. J’envoie le CD avec l’événement simplement parce que c’est pratique pour la portée de cet article. Vous devez absolument l’envoyer avec la page vue, afin de pouvoir segmenter correctement vos visiteurs (par exemple, parmi les personnes qui ont vu la variante de contrôle, combien ont cliqué sur le bouton ; parmi les personnes qui ont vu la variante de test, combien ont cliqué sur le bouton).

Mon tag d’événement ressemble à ceci :

Comme vous pouvez le voir, j’utilise la valeur du cookie (“clickDollars” ou “clickWhatever”) pour annoter l’événement et la dimension personnalisée ! Quelle belle façon d’économiser du temps et des ressources. Ainsi, lorsque quelqu’un clique sur la variante par défaut, par exemple, le tag d’événement enverra quelque chose comme ceci aux serveurs GA :

Catégorie d’événement: Appel à l’action
Action d’événement: clicDollars
Libellé de l’événement: /page-d’appel-à-l’action/s’abonner/
Dimension 1: clicDollars

N’oubliez pas de modifier le numéro d’index de la dimension pour qu’il corresponde au CD que vous avez créé au chapitre précédent !

La règle de tir que j’utilise est simplement :

{{event}} est égal à gtm.linkClick
{{element id}} est égal à call-to-action-link

Cette règle ne se déclenchera donc qu’en cas de clic sur un élément avec l’ID “call-to-action-link”. Idéalement, cela se trouve être mon élément de contrôle.

conclusion

Eh bien le voici. Un test fractionné simple effectué uniquement avec GTM et un peu de magie JavaScript. Maintenant, permettez-moi de répéter : ce n’est pas la meilleure façon de faire des tests fractionnés (nous attendons toujours que les expériences de contenu fassent leur chemin vers GTM + Universal Analytics…), mais cela montre la puissance et la puissance d’un système de gestion des balises. Je suis, après tout, manipuler directement un élément sur la page sans toucher au code côté serveur ou frontal ! C’est incroyable… et effrayant.

Avant de commencer à jouer avec votre DOM (wow, ça sonnait sale), assurez-vous de savoir exactement ce que vous faites et à quel élément. Ceci est crucial, car vous ne voulez pas déclencher accidentellement une refonte complète du site Web sans en avoir vraiment l’intention.

Notez également que, comme vous modifiez l’élément dans une balise de chargement asynchrone, il est plus que possible que l’utilisateur voie la variante de contrôle avant que le script ne l’écrase avec la variante de test. Ce n’est pas une bonne chose, car si le groupe de contrôle se rend compte qu’il participe à une expérience, cela nuira à la fiabilité des résultats.

Il y a quelques bonnes choses à accrocher à vos autres scripts. Utilisez la fonction set-cookie que j’ai écrite dans la balise HTML personnalisée. C’est une solution polyvalente, et je l’ai également utilisée auparavant. L’échantillonnage de nombres aléatoires est tout simplement génial, et j’aime sa facilité d’utilisation !