Testy A/B w Google Analytics ze śledzeniem zdarzeń

autor: Rostyslav Mykhajliw Założyciel TrueSocialMetrics.com ~ 7 min

Jak wiesz, domyślnie funkcja eksperymentów Google Analytics działa tylko z oddzielnymi stronami i dobrze sprawdza się, gdy rozpoczynasz kampanię reklamową. Możesz więc kontrolować docelowy adres URL. Ale co zrobić, jeśli nie kontrolujesz źródeł ruchu: wyszukiwania, skierowania, wpisy w mediach społecznościowych. To jest główny problem. Ale mamy na to proste rozwiązanie. Rozwiązanie wymaga:

• jquery
• jquery.cookie

Zacznijmy testować

/ index zawiera domyślnie obraz, ale chcemy zastąpić go filmem dla 50% odwiedzających i mierzyć współczynnik rejestracji dla każdego przypadku. Stworzyłem prosty js do testów A/B z zapisywaniem alokacji w plikach cookie.

przydział funkcji (nazwa, komórki) {
    komórka = $.cookie('ab-testowanie-' + nazwa);
    jeśli (komórka) zwróć komórkę;
    // przydziel
    Rand = Math.random();
    jeśli (rand<0,5) {
        komórka = komórki [0];
    } w przeciwnym razie {
        komórka = komórki [1];
    }
    $.cookie('ab-testing-' + nazwa, komórka, { wygasa: 90, ścieżka: '/' });
    komórka zwrotna;
}

Ten kod przydziela 50% użytkowników do losowego testowania komórki i zapisuje alokację w pliku cookie i zwraca nazwę komórki alokacji. Pierwszym parametrem jest „nazwa testu”, drugim lista nazw komórek

Przypadek użycia:

alokacja('ObrazVsVideo', ['Obraz', 'Wideo']); // Obraz lub wideo

Aby w 50% przypadków zamienić obraz na stronie na wideo, musimy dodać do elementu unikalny identyfikator. Nazwałem go: ab-testing-ImageVsVideo.

To świetnie, jesteśmy gotowi do wymiany logiki. W rezultacie przesłałem wideo na vimeo.com, po konwersji otrzymałem następujący kod eksportu

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

Wolałem kod HTML5 (ale jeśli chcesz, zawsze możesz cofnąć się i użyć starszego obiektu Flash).

Nasza logika jest prosta: jeśli nazwa komórki jest równa „Video”, zaktualizuj id elementu „ab-testing-ImageVsVideo” o podany kod html odtwarzacza.

$(funkcja(){
    komórka = alokacja('ObrazVsWideo', ['Obraz', 'Wideo']);
    if (cell=='Wideo') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Wszystko działa dobrze, ale nie śledziliśmy naszych celów. Skąd mamy wiedzieć, która odmiana testu wygrywa?

Google Analytics zapewnia świetną funkcję o nazwie Śledzenie zdarzeń. Jest używany głównie do śledzenia działań użytkownika na stronie, takich jak naciśnięcie przycisku lub śledzenie działań ajax. Ale użyjemy go do śledzenia przydziału komórek naszego testu. Wymagane są 2 argumenty: Kategoria i Akcja, w naszym przypadku kategoria „AB-Testing” dla wszystkich testów a/b i akcja „ImageVsVideo-Image” (lub ImageVsVideo-Video) jako identyfikator. Działający skrypt dla naszej strony.

<typ skryptu="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + alokacja('ImageVsVideo', ['Obraz', 'Wideo'])]);

Próbkę można znaleźć w kodzie źródłowym strony docelowej, umieściłem również funkcję alokacji w pliku ab-testing.js dla łatwego użycia.

Raporty Google Analytics to kolejny krok

Naszym pierwotnym celem było zwiększenie „współczynnika rejestracji”, ale chcieliśmy również poznać wynik ekonomiczny, ogólny współczynnik konwersji i realizacja celów. Wybraliśmy więc następujące wskaźniki:

• Unikalni odwiedzający
• Zarejestruj się (realizacja celu 11)
• Zarejestruj się (współczynnik konwersji Goal11)
• Wartość celu na wizytę
• Współczynnik konwersji celu
• Realizacja celu

Dobrze jest też podzielić „Nowych” i „Powracających” odwiedzających, ponieważ głównie, gdy mówimy o „Zarejestrowaniu się”, zależy nam na nowych użytkownikach. Przejdźmy więc do niestandardowego raportu i utwórzmy nowy „test A/B”
To świetnie ! Ale nadal mamy pełną listę odwiedzin bez różnicy „Obraz” lub „Wideo”, więc musimy utworzyć 2 niestandardowe segmenty. Przejdź do „Zaawansowanych segmentów” i utwórz „Nowy segment niestandardowy” - „Obraz”. Znajdź metrykę „Akcja zdarzenia” zawiera „ImageVsVideo-Image”.
Powtórz to samo dla segmentu „Wideo”, gdzie „Akcja zdarzenia” równa się „ImageVsVideo-Video ".

Na koniec zastosuj oba segmenty „Obraz” i „Wideo”, a zobaczysz coś takiego:

W rezultacie: współczynnik konwersji wideo 13% vs 10% z obrazem, wyższa wartość ekonomiczna, ale współczynnik konwersji celu jest nieco niższy. Potrzebujemy więc więcej statystyk. Wybierzmy dodatkowy wymiar „Rodzaj ruchu”.
W przypadku ruchu bezpośredniego wyniki są prawie takie same, ale w przypadku ruchu z wyszukiwania „współczynnik rejestracji” i wartość ekonomiczna są znacznie wyższe. Ale z innej perspektywy, dla obecnych użytkowników konwersja spada. Pokazuje to, że dla osób, które już odwiedziły naszą stronę, ważniejsza jest „szybka reakcja”. Dlatego warto pokazać „Video” nowym klientom, którzy pochodzą z wyszukiwarek.

Linki

• Event Tracking Guide

Aktualizacja z 07.05.2013

Zaktualizowałem „kod alokacji”, dodając obsługę wielu testów dla tej samej strony. Na przykład na aktualnej stronie bloga - 2 testy: - Istnieją 4 różne formularze "singup", z różnymi komunikatami (ale pozostałe 3 są ukryte). Jeśli otworzysz stronę w trybie źródłowym, znajdziesz je.

• Drugi test to wiadomość pod formularzem z linkiem do strony „Jak to działa” lub „Zarejestruj się”.

Pełny kod jest tutaj, możesz także download naszą najnowszą wersję (pamiętaj, że używamy specjalistycznego asynchronicznego js loader, jeśli go nie używasz, musisz zamienić head.ready(function(){ na $( dokument).gotowy(funkcja(){.

alokacja funkcjiTestKomórka(nazwa, komórki) {
    komórka = $.cookie('ab-testowanie-' + nazwa);
    jeśli (komórka) zwróć komórkę;
    // przydziel
    Rand = Math.random();
    początek = 0;
    delta = 1/długość komórek;
    komórka = komórki [0];
    dla (i=0;i<długość komórek;i++) {
        if (i*delta<=rand &&rand<(i+1)*delta) {
            komórka = komórki [i];
            przerwa;
        }
    }
    $.cookie('ab-testing-' + nazwa, komórka, { wygasa: 90, ścieżka: '/' });
    komórka zwrotna;
}
$(dokument).gotowy(funkcja(){
    var AbTestowanie = {};
    $('.ab-testowanie').each(funkcja(indeks, element) {
        test = $(element).attr('dane-ab-testing-test');
        komórka = $(element).attr('data-ab-testing-cell');
        if (!(AbTestowanie[test] instancji tablicy)) {
            AbTestowanie[test] = [];
        }
        AbTestowanie[test].push(komórka);
    });
    // alokacja
    dla (test w AbTesting) {
        alokacja = alokacjaTestKomórki(test, AbTestowanie[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + alokacja, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testowanie').each(funkcja(indeks, element) {
            _test = $(element).attr('dane-ab-testing-test');
            _cell = $(element).attr('komórka-testowania-danych');
            if (_test!=test) powrót;
            if (_komórka!=przydział) {
                return $(element).ukryj();
            }
            $(element).show();
        });
    }
});

Główna różnica polega na tym, że nowy kod nie wymaga pisania żadnego fragmentu kodu w JS. Wystarczy dodać klasę „ab-testing” do dowolnego elementu, który chcesz przetestować, i podać nazwę testu i nazwę komórki, np. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">jakiś kod do testowania</div>.

Spójrzmy na prawdziwy przykład zastosowania tego testu od podstaw.

Kod źródłowy tego elementu wygląda następująco:

<dział>
  Przeanalizuj i popraw swoją obecność w mediach społecznościowych <a href="/how-it-works">Rozpocznij już teraz</a>
</div>

W pierwszym etapie musisz skopiować element, zmienić komunikat i ukryć go.

<dział>
  Przeanalizuj i popraw swoją obecność w mediach społecznościowych <a href="/how-it-works">Rozpocznij już teraz</a>
</div>
<div style="display:none;">
  Przeanalizuj i popraw swoją obecność w mediach społecznościowych <a href="/signup">Zacznij już teraz</a>
</div>

Właśnie teraz, jeśli odświeżysz stronę, nic się nie zmieni: masz 1 widoczny i 1 niewidoczny element z linkiem, który chcesz przetestować. W kolejnym kroku musimy wybrać nazwę testu i nazwy komórek. W moim przykładzie:

• signupblogtext - nazwa testu
• how-it-works - nazwa komórki dla pierwszego bloku z linkiem do "jak to działa"
• zarejestruj się - nazwa komórki dla ukrytego bloku z linkiem do "zarejestruj się"

Dodamy również klasę „ab-testing” jako znacznik dla naszego JS. Pełny działający kod wygląda więc tak:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="jak-to-działa">
  Przeanalizuj i popraw swoją obecność w mediach społecznościowych <a href="/how-it-works">Rozpocznij już teraz</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="rejestracja" style="display:none;">
  Przeanalizuj i popraw swoją obecność w mediach społecznościowych <a href="/signup">Zacznij już teraz</a>
</div>

W rezultacie 50% użytkowników zobaczy jeden blok z linkiem „jak to działa”, a kolejne 50% – drugi.

Testowanie

Mój kod przechowuje alokację w plikach cookie użytkowników, co oznacza, że alokacja odbywa się tylko raz, więc jeśli chcesz to przetestować, potrzebujesz czystej przeglądarki bez plików cookie. Ale znacznie prostszym rozwiązaniem jest użycie funkcji Google Chrome Incognito Window. Zapewnia absolutnie czyste nowe okno przeglądarki bez żadnych plików cookie. W rezultacie możesz otworzyć stronę kilka razy i sprawdzić, czy wszystko działa poprawnie.