A/B-Testing in Google Analytics mit Event-Tracking

von Rostyslav Mykhajliw Gründer von TrueSocialMetrics.com ~ 7 min

Wie Sie wissen, funktioniert die Google Analytics-Testfunktion standardmäßig nur mit separaten Seiten und funktioniert gut, wenn Sie eine Werbekampagne starten. So können Sie die Ziel-URL steuern. Aber was tun, wenn Sie Ihre Verkehrsquellen nicht kontrollieren: Suche, Empfehlung, Postings in sozialen Medien? Das ist das Hauptproblem. Aber wir haben eine einfache Lösung dafür. Die Lösung erfordert:

• jquery
• jquery.cookie

Beginnen wir mit dem Testen

/index-Seite enthält standardmäßig ein Bild, aber wir möchten es bei 50 % der Besucher durch ein Video ersetzen und die Anmelderate für jeden Fall messen. Ich habe ein einfaches js für A/B-Tests erstellt, bei dem die Zuordnung in Cookies gespeichert wird.

Funktionszuordnung (Name, Zellen) {
    cell = $.cookie('ab-testing-' + name);
    wenn (Zelle) Zelle zurückgeben;
    // zuweisen
    rand = Math.random();
    if (rand<0.5) {
        Zelle = Zellen[0];
    } anders {
        Zelle = Zellen[1];
    }
    $.cookie('ab-testing-' + Name, Zelle, { läuft ab: 90, Pfad: '/' });
    Zelle zurückgeben;
}

Dieser Code weist 50 % der Benutzer zufällig Testzellen zu, speichert die Zuordnung im Cookie und gibt den Namen der Zuordnungszelle zurück. Der erste Parameter ist der "Testname", der zweite - die Liste der Zellennamen

Anwendungsfall:

Zuweisung('BildVsVideo', ['Bild', 'Video']); // Bild oder Video

Um das Bild auf der Seite in 50 % der Fälle durch ein Video zu ersetzen, müssen wir dem Element eine eindeutige Kennung hinzufügen. Ich habe es benannt: ab-testing-ImageVsVideo.

Das ist großartig, wir sind bereit, die Logik zu ersetzen. Ich habe als Ergebnis ein Video auf vimeo.com hochgeladen, nach der Konvertierung habe ich den folgenden Exportcode erhalten

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

Ich bevorzuge HTML5-Code (aber wenn Sie möchten, können Sie jederzeit einen Schritt zurückgehen und ein älteres Flash-Objekt verwenden).

Unsere Logik ist einfach: Wenn der Zellenname gleich „Video“ ist, aktualisieren Sie die Element-ID „ab-testing-ImageVsVideo“ durch den angegebenen Player-HTML-Code.

$(Funktion(){
    Zelle = Zuordnung ('BildVsVideo', ['Bild', 'Video']);
    if (cell=='Video') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Alles funktioniert gut, aber wir haben unsere Ziele nicht verfolgt. Woher wissen wir, welche Testvariante gewinnt?

Google Analytics bietet eine großartige Funktion namens Event Tracking. Es wird hauptsächlich zum Verfolgen von Benutzeraktionen auf der Seite verwendet, wie z. B. das Drücken von Schaltflächen oder einige Ajax-Aktionsverfolgungen. Aber wir werden es verwenden, um die Zellenzuordnung unseres Tests zu verfolgen. Es gibt 2 erforderliche Argumente: Kategorie und Aktion, in unserem Fall Kategorie "AB-Testing" für alle a/b-Tests und Aktion "BildVsVideo-Bild" (oder BildVsVideo-Video) als Identifikator. Arbeitsskript für unsere Seite.

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'BildVsVideo-' + Zuweisung('BildVsVideo', ['Bild', 'Video'])]);

Sie finden ein Beispiel auf dem Quellcode der Zielseite. Ich habe auch die Zuordnungsfunktion zur einfachen Verwendung in die Datei ab-testing.js eingefügt.

Google Analytics-Berichte sind der nächste Schritt

Unser ursprüngliches Ziel war es, die "SignUp-Rate" zu erhöhen, aber wir wollten es auch wissen wirtschaftliches Ergebnis, allgemeine Konversionsrate und Zielerfüllungen. Also haben wir folgende Metriken ausgewählt:

• Einzigartige Besucher
• Anmelden (Goal11-Abschlüsse)
• Anmelden (Goal11-Conversion-Rate)
• Zielwert pro Besuch
• Zielkonversionsrate
• Zielabschlüsse

Außerdem ist es schön, „neue“ und „wiederkehrende“ Besucher aufzuteilen, denn wenn wir über „SignUp“ sprechen, kümmern wir uns meistens um neue Benutzer. Gehen wir also zum benutzerdefinierten Bericht und erstellen einen neuen „A/B-Test“
Es ist großartig ! Aber wir haben immer noch eine vollständige Liste der Besuche ohne den Unterschied „Bild“ oder „Video“, also müssen wir zwei benutzerdefinierte Segmente erstellen. Gehen Sie zu „Erweiterte Segmente“ und erstellen Sie „Neues benutzerdefiniertes Segment“ – „Bild“. Finden Sie die Metrik „Event Action“ enthält „ImageVsVideo-Image“.
Wiederholen Sie dasselbe für das „Video“-Segment, wobei „Event Action“ gleich „ImageVsVideo-Video ".

Wenden Sie schließlich beide Segmente „Bild“ und „Video“ an und Sie werden so etwas sehen:

Ergebnis: Video-Conversion-Rate 13 % gegenüber 10 % mit Bild, höherer wirtschaftlicher Wert, aber Ziel-Conversion-Rate ist etwas niedriger. Wir brauchen also mehr Statistiken. Wählen wir die sekundäre Dimension „Verkehrstyp“ aus.
Für den direkten Traffic sind die Ergebnisse fast gleich, aber für den Such-Traffic sind die "SignUp-Rate" und der wirtschaftliche Wert viel höher. Aber aus einer anderen Perspektive sinkt die Conversion für bestehende Benutzer. Es zeigt, dass für Personen, die unsere Website bereits besucht haben, "schnelle Antworten" wichtiger sind. Daher ist es sinnvoll, "Video" den neuen Kunden zu zeigen, die von Suchmaschinen kommen.

Links

• Event Tracking Guide

Update vom 07.05.2013

Ich habe den „Zuweisungscode“ aktualisiert, indem ich die Unterstützung für mehrere Tests für dieselbe Seite hinzugefügt habe. Zum Beispiel auf einer aktuellen Blogseite - 2 Tests: - Es gibt 4 verschiedene "Singup"-Formulare mit unterschiedlichen Nachrichten (aber die restlichen 3 sind versteckt). Wenn Sie die Seite in einem Quellmodus öffnen, werden Sie sie finden.

• Der zweite Test ist eine Nachricht unter dem Formular mit einem Link zu den "How-it-works"- oder "Singup"-Seiten.

Der vollständige Code ist hier, Sie können auch download, unsere neueste Version, verwenden (denken Sie daran, dass wir spezialisiertes asynchrones js loader verwenden, wenn Sie es nicht verwenden, müssen Sie head.ready(function(){) durch $( ersetzen document).ready(function(){.

FunktionszuweisungTestCell(Name, Zellen) {
    cell = $.cookie('ab-testing-' + name);
    wenn (Zelle) Zelle zurückgeben;
    // zuweisen
    rand = Math.random();
    Anfang = 0;
    Delta = 1/Zellen.Länge;
    Zelle = Zellen[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            Zelle = Zellen[i];
            brechen;
        }
    }
    $.cookie('ab-testing-' + Name, Zelle, { läuft ab: 90, Pfad: '/' });
    Zelle zurückgeben;
}
$(Dokument).ready(Funktion(){
    var AbTesting = {};
    $('.ab-testing').each(function(index, element) {
        test = $(element).attr('data-ab-testing-test');
        cell = $(element).attr('data-ab-testing-cell');
        if (!(AbTestting[test] instanceof Array)) {
            AbTesten[test] = [];
        }
        AbTestting[test].push(cell);
    });
    // Zuordnung
    für (Test in AbTestting) {
        Zuweisung = ZuweisungTestCell (test, AbTestting [test]);
        _gaq.push(['_trackEvent', 'AB-Testing', Test + '-' + Zuordnung, 'AB-Testing-'+Test+'-'+'Zuordnung', 0, wahr]);
        $('.ab-testing').each(function(index, element) {
            _test = $(element).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            if (_test!=test) return;
            if (_cell!=Zuordnung) {
                return $(element).hide();
            }
            $(element).show();
        });
    }
});

Der Hauptunterschied besteht darin, dass für neuen Code kein Code in JS geschrieben werden muss. Sie müssen nur die Klasse "ab-testing" zu jedem Element hinzufügen, das Sie testen möchten, und den Testnamen und den Zellennamen angeben, z. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">etwas Code zum Testen</div>.

Sehen wir uns ein echtes Beispiel für die Anwendung dieses Tests von Grund auf an.

Der Quellcode dieses Elements sieht folgendermaßen aus:

<div>
  Analysieren und verbessern Sie Ihre Social-Media-Präsenz <a href="/how-it-works">Legen Sie jetzt los</a>
</div>

In der ersten Phase müssen Sie das Element kopieren, eine Nachricht ändern und es ausblenden.

<div>
  Analysieren und verbessern Sie Ihre Social-Media-Präsenz <a href="/how-it-works">Legen Sie jetzt los</a>
</div>
<div style="display:none;">
  Analysieren und verbessern Sie Ihre Social-Media-Präsenz <a href="/signup">Legen Sie jetzt los</a>
</div>

Wenn Sie jetzt die Seite aktualisieren, ändert sich nichts: Sie haben 1 sichtbares und 1 unsichtbares Element mit dem Link, den Sie testen möchten. Im nächsten Schritt müssen wir einen Testnamen und einen Zellennamen auswählen. In meinem Beispiel:

• Anmeldeblogtext - Testname
• wie-es-funktioniert - Zellenname für den ersten Block mit Link zu "wie es funktioniert"
• Anmeldung - Zellenname für den versteckten Block mit Link zu "Anmeldung"

Außerdem werden wir die Klasse "ab-testing" als Marker für unser JS hinzufügen. Der vollständige Arbeitscode sieht also so aus:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="wie-es-funktioniert">
  Analysieren und verbessern Sie Ihre Social-Media-Präsenz <a href="/how-it-works">Legen Sie jetzt los</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Analysieren und verbessern Sie Ihre Social-Media-Präsenz <a href="/signup">Legen Sie jetzt los</a>
</div>

Infolgedessen sehen 50 % der Benutzer einen Block mit dem Link "So funktioniert es" und weitere 50 % - den zweiten.

Testen

Mein Code speichert die Zuordnung in Benutzer-Cookies, was bedeutet, dass die Zuordnung nur einmal erfolgt. Wenn Sie es also testen möchten, benötigen Sie einen sauberen Browser ohne Cookies. Eine viel einfachere Lösung ist jedoch die Verwendung von Google Chrome Feature Incognito Window. Es bietet ein absolut klares neues Browserfenster ohne Cookies. Dadurch können Sie die Seite mehrmals öffnen und prüfen, ob alles richtig funktioniert.