A/B-testowanie w aplikacji "Sklep" za pomocą Google Analytics
Testy A/B to prosty i niezawodny sposób na sprawdzenie wydajności sklepu internetowego lub witryny po wprowadzeniu pewnych zmian w wyglądzie lub treści danej strony. Idea testu A/B polega na losowym pokazaniu odwiedzającym jedną (A) lub drugą (B) wersję danej strony, a następnie porównaniu efektywności każdej z nich (konwersje, subskrypcje, sprzedaż itp.). Na przykład, można wykorzystać testy A/B do porównania różnic we współczynnikach konwersji i sprzedaży w zależności od zestawu produktów promocyjnych wyświetlanych na stronie głównej. Więcej informacji można znaleźć w Wikipedii: https://pl.wikipedia.org/wiki/Test_A/B.
Istnieje kilka sposobów na skonfigurowanie testu A/B w Google Analytics, takich jak użycie "eksperymentów" lub utworzenie zmiennych niestandardowych. W tym artykule opisano przykład konfigurowania testów w sklepie internetowym opartym w aplikacji "Sklep" z wykorzystaniem zmiennych niestandardowych w Google Analytics.
Na przykład porównamy sprzedaż w Twoim sklepie internetowym, gdy na stronie głównej sklepu wyświetlane są różne listy produktów ("oferty specjalne"). W tym celu utwórz drugą, eksperymentalną listę produktów oprócz tej, która jest już wyświetlana na stronie głównej. Aby uzyskać jak najbardziej wiarygodne wyniki, zaleca się korzystanie z list statycznych, które nie zmieniają się w czasie testów.
1. Dodaj licznik Google Analytics do swojej witryny
Połącz swoją witrynę z Google Analytics, aby analizować wyniki testów.
2. Rozpocznij testowanie
Włącz generator liczb losowych
Aby umożliwić przeprowadzanie testów A/B, dodaj poniższy fragment kodu na samym początku szablonu motywu projektu, który tworzy element projektu, który chcesz przetestować. Jeśli testujesz osobną stronę informacyjną, to dodatkowy kod należy dodać do kodu źródłowego takiej strony. W tym przykładzie dodajemy kod generatora do szablonu home.html:
{$AB_version = $wa->storage('AB_version')}
{if empty($AB_version)}
{$AB_version = mt_rand(1, 2)}
{$wa->storage('AB_version', $AB_version)}
{/if}
Ten kod odczytuje AB_version z sesji PHP osoby odwiedzającej stronę. Jeśli w sesji nie ma takiego pola (tzn. jeśli dla odwiedzającego nie zdefiniowano jeszcze wariantu projektu), obliczamy losową wartość - 1 lub 2 - i zapisujemy ją w sesji odwiedzającego. Następnie wiemy, który wariant projektu jest zdefiniowany dla odwiedzającego (dokładniej, wartość zmiennej $AB_version 1 lub 2), a odwiedzający podczas bieżącej wizyty zobaczy dokładnie ten wariant.
Ważne: ten sam fragment kodu należy umieścić na początku kodu źródłowego index.html. Ma to na celu zapewnienie, że zmienna AB_version, oprócz konkretnego szablonu, jest zdefiniowana także w ogólnym układzie motywu projektu.
Dodaj warunek, aby wyświetlić różne warianty projektu
Załóżmy na przykład, że w Twoim sklepie jest obecnie wyświetlana lista z identyfikatorem "promo", a Ty postanowiłeś porównać jej skuteczność, umieszczając w witrynie nową listę - z identyfikatorem "promo_test".
Teraz w tym samym szablonie użyj wartości zmiennej $AB_version wraz z wynikową liczbą losową do wygenerowania warunku, który wygeneruje różną zawartość HTML (tj. różne listy produktów) dla różnych odwiedzających:
{if $AB_version == 1}
{include file="list-thumbs.html" products=$wa->shop->productSet('promo')}
{else}
{include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')}
{/if}
Następnie użyj podobnego warunku, aby dodać wywołania metody JavaScript _setCustomVar do szablonu index.html:
{if $AB_version == 1}
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (old)', 2]);
</script>
{else}
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
</script>
{/if}
Wstawienie takich fragmentów kodu JavaScript z różnymi wartościami HomepageProductList ("Promo product list (old)" i "Promo product list (new)") jest niezbędne do obliczenia skuteczności każdej opcji układu za pomocą Google Analytics (ustawienia witryny w aplikacji Witryna powinny umożliwiać integrację z tą usługą).
Jeśli przeprowadzasz podobny test przy użyciu Google Analytics równolegle z testami A/B za pomocą wbudowanych narzędzi aplikacji "Sklep", to zamiast generatora liczb losowych i warunku opisanego powyżej w tym artykule wystarczy użyć warunku, który jest automatycznie generowany przez narzędzie do testów A/B w backendzie sklepu.
Taki warunek z kodem JavaScript powinien zostać dodany przed następnym wierszem:
{$wa->headJs()}
Ta linia łączy kod Google Analytics, w tym wywołanie metody _trackPageview, przed którą należy wywołać metodę _setCustomVar, aby poprawnie obliczyć statystyki.
Co oznacza każdy parametr w wierszu kodu JavaScript użytego podczas testowania:
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
_setCustomVar: ten parametr jest parametrem systemowym - należy go zapisać w następujący sposób.
1: numer slotu; zmienne własne Google Analytics mogą być losowo przypisywane do wielu slotów ("komórek"); dla uproszczenia w tym przykładzie użyjemy slotu 1 - nie jest to kluczowe.
HomepageProductList: nazwa zmiennej; musi być taka sama dla obu badanych projektów; nazwa zmiennej jest tworzona losowo - według uznania użytkownika.
Promo product list (old) i Promo product list (new): wartość zmiennej; musi być inna dla każdego z testowanych wariantów, aby w Google Analytics można było wyświetlić osobne statystyki dla każdego wariantu.
2: poziom działania zmiennej; w naszym przykładzie użyjemy poziomu 2; zmienna działa przez cały czas trwania bieżącej sesji odwiedzającego.
Następnie dla różnych odwiedzających będą wyświetlane różne warianty wyglądu strony głównej sklepu:
3. Śledzenie statystyk w Google Analytics
Skonfiguruj segmenty w Google Analytics dla każdej zmiennej, której nazwa jest używana w eksperymencie, aby porównać wydajność każdej z nich, jak opisano poniżej.
Segment to punkt danych statystycznych oparty na dowolnych kryteriach (w naszym przykładzie statystyki dla takich segmentów będą generowane na podstawie zmiennej HomepageProductList: "Promo product list (old)" lub "Promo product list (new)").
- Wybierz raport, dla którego chcesz ocenić skuteczność alternatywnej listy produktów, np. "Behavior → Overview".
- Przejdź do konfigurowania segmentów na stronie raportu (przycisk nad wykresem u góry strony) i dodaj nowy segment.
- Wpisz nazwę segmentu - tak, aby opisywała istotę wariantu strony odpowiadającego temu segmentowi, np. skopiuj tutaj wartość zmiennej: "Promo product list (old)" lub "Promo product list (new)".
- Wybierz opcję "Conditions" jako kryterium tworzenia segmentu, parametr "Custom variable (value 01) → contains" i wpisz jedną z dwóch wartości zmiennej w polu tekstowym.
W ten sam sposób należy utworzyć kolejny segment - dla drugiej wartości zmiennej.
Segmenty utworzone przez użytkownika w celu wyświetlania statystyk dla każdej wartości zmiennej pojawią się w obszarze "Standard Reports → Audience → Custom → Custom Variables" na koncie Google Analytics.
4. Zastosuj wyniki testów
Porównaj dane związane z każdą zmienną (tzn. każdą testowaną opcją projektową). Jeśli jeden z wariantów okazał się znacznie skuteczniejszy w ważnych dla Ciebie parametrach niż pozostałe i zdecydujesz się zachować go jako wariant główny, usuń elementy testów A/B z szablonu witryny sklepu i pozostaw tylko wariant roboczy:
- usunąć kod generatora liczb losowych
- usunąć kod warunku ze wszystkimi przetestowanymi wariantami i pozostawić tylko ten wariant, który jest najskuteczniejszy; w powyższym przykładzie oznacza to usunięcie całego poniższego fragmentu:
{if $AB_version == 1}
{include file="list-thumbs.html" products=$wa->shop->productSet('promo')} {* przegrana opcja *}
<script type='text/javascript'>
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (old)', 2]);
</script>
{else}
{include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')} {* zwycięska opcja *}
<script type='text/javascript'>
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
</script>
{/if}Zamiast tego należy pozostawić w szablonie tylko kod źródłowy wariantu, który wygrał test, na przykład:
{include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')}
Przydatne wskazówki
- Przeprowadzaj testy A/B, losowo wyświetlając różne warianty w tym samym okresie czasu. Zły sposób przeprowadzania testów A/B polega na włączeniu jednego wariantu strony, zmierzeniu współczynnika konwersji i innych wskaźników, następnie włączeniu innego wariantu i ponownym zmierzeniu parametrów, a następnie porównaniu uzyskanych wartości. Próba odwiedzających w różnych okresach czasu może być różna i porównywanie współczynników konwersji w takich przypadkach nie jest zasadne.
- Można porównywać nie 2 warianty, ale więcej - takie testowanie nazywa się testowaniem A/B/N. Aby to zrobić, należy zmienić liczbę testowanych wariantów w kodzie generatora liczb losowych:
{$AB_version = $wa->storage('AB_version')}
{if empty($AB_version)}
{$AB_version = mt_rand(1, 3)} {* określ żądaną liczbę testowanych opcji, na przykład, 3 *}
{$wa->storage('AB_version', $AB_version)}
{/if}W związku z tym warunek utworzenia kodu HTML zmieni się w następujący sposób:
{if $AB_version == 1}
...tutaj wklej kod HTML bieżącej zawartości...
<script type='text/javascript'>
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 1', 2]);
</script>
{elseif $AB_version == 2}
...tutaj zamieść pierwszą wersję zawartości eksperymentalnej...
<script type='text/javascript'>
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 2', 2]);
</script>
{else}
...tutaj zamieść drugą wersję zawartości eksperymentalnej...
<script type='text/javascript'>
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 3', 2]);
</script>
{/if} - Podczas testów A/B nie należy wprowadzać znaczących zmian w kampaniach marketingowych i strukturze witryny, ponieważ mogą one wpłynąć na wyniki testów i je zniekształcić. W przeciwnym razie nie uzyskasz najdokładniejszego obrazu tego, co się dzieje.
- Nie wyciągaj pochopnych wniosków na temat wyników testów na podstawie niewystarczająco dużych danych statystycznych, ponieważ w tym przypadku istnieje duże prawdopodobieństwo uzyskania niewystarczająco dokładnych informacji zniekształconych przez błąd generatora liczb losowych.
- Podczas jednego okresu testowego należy przetestować tylko jeden element projektu strony lub witryny. Jednoczesne testowanie kilku elementów może dać niedokładne dane (np. przy porównywaniu przycisku "Dodaj do koszyka" i projektu drzewa kategorii), ponieważ każdy z elementów (przycisk i projekt drzewa kategorii) może wpływać na inny, a w takich warunkach nie można przeprowadzić niezależnego testowania każdego z nich osobno.
- Aby zweryfikować poprawność przeprowadzonego testu A/B, można go po pewnym czasie powtórzyć. Potwierdzony w ten sposób wynik zasługuje na zastosowanie w trybie roboczym.
0 komentarzy