Test A/B dans Google Analytics avec suivi des événements

par Rostyslav Mykhajliw Fondateur de TrueSocialMetrics.com ~ 8 min

Comme vous le savez, par défaut, la fonctionnalité d'expérimentation de Google Analytics ne fonctionne qu'avec des pages distinctes et fonctionne bien lorsque vous démarrez une campagne publicitaire. Ainsi, vous pouvez contrôler l'URL de destination. Mais que faire si vous ne contrôlez pas vos sources de trafic : recherche, référencement, publications sur les réseaux sociaux. C'est le principal problème. Mais nous avons une solution simple pour cela. La solution nécessite :

• jquery
• jquery.cookie

Commençons les tests

/ La page d'index contient une image par défaut, mais nous souhaitons la remplacer par une vidéo pour 50 % des visiteurs et mesurer le taux d'inscription pour chaque cas. J'ai créé un js simple pour les tests A/B avec enregistrement de l'allocation dans les cookies.

allocation de fonction (nom, cellules) {
    cell = $.cookie('ab-testing-' + nom);
    si (cellule) renvoie la cellule ;
    // allouer
    rand = Math.random();
    si (rand<0.5) {
        cellule = cellules[0] ;
    } autre {
        cellule = cellules[1] ;
    }
    $.cookie('ab-testing-' + nom, cellule, { expire : 90, chemin : '/' });
    cellule de retour ;
}

Ce code alloue 50 % des utilisateurs pour tester la cellule de manière aléatoire et enregistre l'allocation dans le cookie et renvoie le nom de la cellule d'allocation. Le premier paramètre est le "nom du test", le second - la liste des noms de cellules

Cas d'utilisation:

allocation('ImageVsVideo', ['Image', 'Vidéo']); // Image ou vidéo

Afin de remplacer l'image sur la page par une vidéo dans 50 % des cas, nous devons ajouter un identifiant unique à l'élément. Je l'ai nommé : ab-testing-ImageVsVideo.

C'est super, nous sommes prêts à remplacer la logique. J'ai téléchargé une vidéo sur vimeo.com en conséquence, après la conversion, j'ai obtenu le code d'exportation suivant

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

J'ai préféré le code html5 (mais si vous le souhaitez, vous pouvez toujours revenir en arrière et utiliser l'ancien objet flash).

Notre logique est simple : si le nom de la cellule est égal à "Vidéo", mettez à jour l'identifiant de l'élément "ab-testing-ImageVsVideo" en fonction du code html du lecteur.

$(fonction(){
    cell = allocation('ImageVsVideo', ['Image', 'Video']);
    si (cell=='Vidéo') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Tout fonctionne bien, mais nous n'avons pas suivi nos objectifs. Comment savoir quelle variante de test l'emporte ?

Google Analytics fournit une excellente fonctionnalité appelée Suivi des événements. Il est principalement utilisé pour suivre l'action de l'utilisateur sur la page, comme l'appui sur un bouton ou le suivi d'une action ajax. Mais nous l'utiliserons pour suivre l'allocation des cellules de notre test. Il y a 2 arguments obligatoires : Category et Action, dans notre cas la catégorie "AB-Testing" pour tous les tests a/b et l'action "ImageVsVideo-Image" (ou ImageVsVideo-Video) comme identifiant. Script de travail pour notre page.

<type de script="texte/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

Vous pouvez trouver un exemple sur le code source de la page de destination, j'ai également mis la fonction d'allocation dans le fichier ab-testing.js pour une utilisation facile.

Les rapports Google Analytics sont la prochaine étape

Notre objectif initial était d'augmenter le "taux d'inscription", mais nous voulions aussi connaître un le résultat économique, le taux de conversion général et la réalisation des objectifs. Nous avons donc sélectionné les métriques suivantes :

• Visiteurs uniques
• Inscrivez-vous (réalisations Goal11)
• Inscription (taux de conversion Goal11)
• Valeur de l'objectif par visite
• Taux de conversion des objectifs
• Réalisations d'objectifs

Il est également agréable de séparer les visiteurs "nouveaux" et "anciens", car la plupart du temps, lorsque nous parlons d'"inscription", nous nous soucions des nouveaux utilisateurs. Passons donc au rapport personnalisé et créons un nouveau "test A/B"
C'est super ! Mais nous avons toujours une liste complète des visites sans la différence "Image" ou "Vidéo", nous devons donc créer 2 segments personnalisés. Allez dans "Segments avancés" et créez "Nouveau segment personnalisé" - "Image". Rechercher la métrique "Event Action" contient "ImageVsVideo-Image".
Répétez la même chose pour le segment "Vidéo" avec "Event Action" égal à "ImageVsVideo-Video ".

Enfin, appliquez les deux segments « Image » et « Vidéo » et vous verrez quelque chose comme ceci :

En conséquence : taux de conversion vidéo de 13 % contre 10 % avec l'image, valeur économique plus élevée, mais le taux de conversion par objectif est un peu inférieur. Nous avons donc besoin de plus de statistiques. Sélectionnons la dimension secondaire "Type de trafic".
Pour le trafic direct, les résultats sont presque les mêmes, mais pour le trafic de recherche, le "taux d'inscription" et la valeur économique sont beaucoup plus élevés. Mais d'un autre point de vue, pour les utilisateurs existants, la conversion diminue. Cela montre que pour les personnes qui ont déjà visité notre site Web, la "réponse rapide" est plus importante. Il est donc logique de montrer "Vidéo" aux nouveaux clients qui viennent des moteurs de recherche.

Liens

• Event Tracking Guide

Mise à jour du 05/07/2013

J'ai mis à jour le "code d'allocation" en ajoutant le support multi-tests pour la même page. Par exemple, sur une page de blog en cours - 2 tests : - Il y a 4 formulaires "singup" différents, avec un message différent (mais les 3 autres sont cachés). Si vous ouvrez la page en mode source, vous les trouverez.

• Le deuxième test est un message sous le formulaire avec un lien vers les pages "Comment ça marche" ou "Singup".

Le code complet est ici, vous pouvez également download notre dernière version (rappelez-vous que nous utilisons js async spécialisé loader, si vous ne l'utilisez pas, vous devez remplacer head.ready(function(){ par $( document).prêt(fonction(){.

fonction allocationTestCell(nom, cellules) {
    cell = $.cookie('ab-testing-' + nom);
    si (cellule) renvoie la cellule ;
    // allouer
    rand = Math.random();
    début = 0 ;
    delta = 1/cellules.longueur ;
    cellule = cellules[0] ;
    pour (i=0;i<cellules.longueur;i++) {
        si (i*delta<=rand && rand<(i+1)*delta) {
            cellule = cellules[i] ;
            casser;
        }
    }
    $.cookie('ab-testing-' + nom, cellule, { expire : 90, chemin : '/' });
    cellule de retour ;
}
$(document).prêt(fonction(){
    var AbTesting = {} ;
    $('.ab-testing').each(fonction(indice, élément) {
        test = $(element).attr('data-ab-testing-test');
        cell = $(element).attr('data-ab-testing-cell');
        if (!(AbTestting[test] instanceof Array)) {
            AbTest[test] = [] ;
        }
        AbTestting[test].push(cell);
    });
    // allocation
    pour (tester dans AbTestting) {
        allocation = allocationTestCell(test, AbTestting[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + allocation, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testing').each(fonction(indice, élément) {
            _test = $(element).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            si (_test!=test) retour ;
            si (_cell!=allocation) {
                retourne $(element).hide();
            }
            $(element).show();
        });
    }
});

La principale différence est que le nouveau code ne nécessite pas d'écrire de morceau de code sur JS. Il vous suffit d'ajouter la classe "ab-testing" à tout élément que vous souhaitez tester et de spécifier le nom du test et le nom de la cellule, par exemple. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">un peu de code pour tester</div>.

Examinons un exemple réel d'application de ces tests à partir de zéro.

Le code source de cet élément ressemble à :

<div>
  Analysez et améliorez votre présence sur les réseaux sociaux <a href="/how-it-works">Commencez dès maintenant</a>
</div>

Lors de la première étape, vous devez copier l'élément, modifier un message et le masquer.

<div>
  Analysez et améliorez votre présence sur les réseaux sociaux <a href="/how-it-works">Commencez dès maintenant</a>
</div>
<div style="display:none ;">
  Analysez et améliorez votre présence sur les réseaux sociaux <a href="/signup">Commencez dès maintenant</a>
</div>

Désormais, si vous actualisez la page, rien ne changera : vous avez 1 élément visible et 1 élément invisible avec le lien que vous souhaitez tester. À l'étape suivante, nous devons choisir un nom de test et un nom de cellule. Dans mon exemple :

• signupblogtext - nom du test
• comment ça marche - nom de cellule pour le premier bloc avec lien vers "comment ça marche"
• inscription - nom de cellule pour le bloc caché avec lien vers "inscription"

Nous ajouterons également la classe "ab-testing" comme marqueur pour notre JS. Donc, le code de travail complet ressemble à ceci :

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Analysez et améliorez votre présence sur les réseaux sociaux <a href="/how-it-works">Commencez dès maintenant</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none ;">
  Analysez et améliorez votre présence sur les réseaux sociaux <a href="/signup">Commencez dès maintenant</a>
</div>

En conséquence, 50 % des utilisateurs verront un bloc avec le lien "comment ça marche" et 50 % supplémentaires - le second.

Test

Mon code stocke l'allocation dans les cookies des utilisateurs, ce qui signifie que l'allocation ne se produit qu'une seule fois, donc si vous voulez le tester, vous avez besoin d'un navigateur propre sans cookies. Mais une solution beaucoup plus simple utilise la fonctionnalité Google Chrome Incognito Window. Il fournit une nouvelle fenêtre de navigateur absolument claire sans aucun cookie. Par conséquent, vous pouvez ouvrir la page plusieurs fois et vérifier si tout fonctionne correctement.