Najlepsze praktyki przeprowadzania testów A/B w aplikacjach jednostronicowych (SPA)

Ten artykuł jest częścią 2 serii testów A/B w aplikacjach jednostronicowych .

W części 1 przedstawiliśmy koncepcję aplikacji jednostronicowej (SPA), pokazaliśmy, dlaczego rośnie jej popularność, i przyjrzeliśmy się 10 najlepszym platformom do testowania A/B, z których można korzystać w aplikacjach jednostronicowych .

Ale uruchamianie testów A/B na SPA może być nieco trudne ze względu na sposób ich działania. W tym artykule udzielimy Ci praktycznych porad dotyczących przeprowadzenia eksperymentu w SPA oraz kilku najlepszych praktyk, których należy przestrzegać.

Ewolucja Szkieletów SPA

OSO nie są nową koncepcją.

Patent z 2002 roku opisuje technologię zbliżoną do współczesnej wersji SPA.

Jednak technika AJAX, stosowana jako standard sieciowy od 2006 roku, ułatwiła jego implementację. Jest to zestaw strategii tworzenia asynchronicznych aplikacji internetowych przy użyciu różnych technologii po stronie klienta. Oprogramowanie może wysyłać i odbierać dane z serwera w tle dzięki AJAX, bez zmiany aktualnego stanu strony lub trybu wyświetlania treści, a więc bez ingerencji w doświadczenie użytkownika.

Z drugiej strony wprowadzenie AJAX nie było przełomowym momentem w przyjęciu SPA.

Wzrost popularności SPA jest częścią większego trendu, który był napędzany przez szybki rozwój frontendu i rosnące znaczenie UX w ostatnich latach.

SPA były najpierw tworzone przy użyciu apletów Java lub programów Flash, a także „czystych” bibliotek JavaScript lub jQuery.

Jednak frameworki front-end, takie jak Angular.js, React.js i Vue.js — z których wszystkie są stosunkowo nowymi frameworkami JavaScript — pomogły w ich rozwoju.

Jakie technologie stoją za architekturą SPA?

SPA to zasadniczo framework JavaScript z obsługą HTML5 i CSS3.

Jednak przy użyciu tych komponentów pojawiło się kilka odrębnych bibliotek i frameworków, które zostały zaadoptowane w świecie deweloperskim:

1. kątowe

Opracowany przez Google, Angular jest najbardziej dojrzałym i najstarszym z 3 frameworków ze szczegółową dokumentacją do użycia, ale stromą krzywą uczenia się.

Jest osadzony w oryginalnej architekturze Model View Controller (MVC), ale głównie wykorzystuje MVVM (Model-View-ViewModel), który pozwala wielu programistom pracować oddzielnie nad tą samą sekcją aplikacji. Podczas aktualizacji do nowych wersji mogą wystąpić pewne problemy z migracją, ale Angular ma największą niezawodność podczas skalowania i doskonale nadaje się do dużych, złożonych projektów.

Ze względu na TypeScript, Angular jest fantastycznym wyborem dla dużych zespołów programistów, a niektóre firmy już stosują tę technologię w swoich innych produktach.

Na GitHub jest to ugruntowana, dojrzała platforma z dużą liczbą współtwórców.

Google i jego produkty, takie jak Dysk Google i Gmail, a także Wix, należą do użytkowników Angular for SPA.

2. React.js

React został opracowany przez Facebooka i udostępniony jako open source. Był używany głównie do tworzenia interfejsów użytkownika (Facebook, WhatsApp i Instagram).

Jest bardzo popularny ze względu na niewielki rozmiar kodu i możliwość bezproblemowej integracji z innymi frameworkami. Posiada również prostą metodę migracji między wersjami. (Zazwyczaj migracja jednym kliknięciem).

Jest często używany w połączeniu z Redux do zarządzania stanem składników aplikacji. Uber wykorzystuje również w swoich produktach technologię React.js.

React jest dobrym rozwiązaniem dla tych, którzy dopiero zaczynają korzystać z front-endowych frameworków JavaScript, a także dla start-upów i programistów zwinnych. Ponadto ta biblioteka JavaScript oferuje cenne opcje integracji z różnymi innymi frameworkami i technologiami, co jest naprawdę przydatne podczas pracy nad projektem z dużym środowiskiem. Ze wszystkich frameworków SPA, React ma największy wkład w GitHub, który pomaga programistom rozwiązywać potencjalne problemy.

Ma najłatwiejszą krzywą uczenia się spośród 3 frameworków i najlepiej nadaje się do projektów o krótkim terminie, które wymagają dużej skalowalności.

3. Vue.js

Vue.js nie jest własnością dużej firmy, takiej jak Facebook czy Google, ale wciąż nabiera tempa wśród nowych użytkowników, zwłaszcza w Azji. Jest to najnowszy z powyższych frameworków SPA, założony w 2014 roku przez Evana You, byłego pracownika Google. Wiele dokumentacji jest zwykle w języku chińskim, ale nadal istnieją źródła szkoleniowe.

Framework jest bardzo lekki i może być używany do prostego tworzenia aplikacji o wysokiej wydajności.

Dla większości programistów nie ma większych problemów z tworzeniem w żadnym z tych frameworków, decyzja tak naprawdę sprowadza się do głównych funkcji każdego z nich.

Vue.js jest teraz używany przez przedsiębiorstwa takie jak Baidu, GitLab i Alibaba do ich potrzeb.

Jak działają aplikacje jednostronicowe

SPA mają prostą konstrukcję. Stosowane są zarówno technologie renderowania po stronie klienta, jak i po stronie serwera.

Na stronie innej niż SPA, po wprowadzeniu adresu URL w przeglądarce, przeglądarka wysyła żądanie do serwera i otrzymuje w odpowiedzi stronę HTML.

W witrynie SPA serwer dostarcza tylko dokument HTML w początkowym żądaniu i dane JSON w kolejnych żądaniach. Oznacza to, że SPA przepisze zawartość bieżącej strony, a nie przeładuje całą witrynę.

Krótko mówiąc, SPA działa tak:

1. Klient najpierw nawiązuje połączenie z serwerem i uzyskuje zawartość strony, która składa się przede wszystkim z kodu HTML, CSS i pakietu JavaScript zawierającego wszystkie skrypty wymagane do uruchomienia logiki aplikacji.
2. Akcja użytkownika aktywuje wykonanie odpowiednich skryptów JavaScript, które następnie wysyłają żądania AJAX do serwera. Dane są zwykle w formacie JSON i nie wymagają pełnego odświeżenia strony internetowej.

Zamiast normalnej techniki przeglądarki uruchamiającej zupełnie nową stronę, aplikacja jednostronicowa wchodzi w interakcję z użytkownikami, wymuszając modyfikację istniejących stron internetowych za pomocą nowych danych z serwera WWW. Przeglądarka pobiera niezbędny kod HTML, JavaScript i CSS lub inne odpowiednie zasoby i dodaje je do stron w razie potrzeby.

Chociaż interfejs API historii HTML5 lub skrót lokalizacji można wykorzystać do zapewnienia nawigacji i postrzegania różnych stron logicznych w aplikacji internetowej, strona nie jest ponownie ładowana w żadnym momencie procedury i nie przenosi kontroli na inną stronę.

Jeśli chcesz zobaczyć przykład działania aplikacji jednostronicowej, przejdź do tego linku i kliknij stronę główną, listę najnowszych kursów i górne menu. Gdy to zrobisz, zauważysz, że strona nie przeładuje się całkowicie, tylko nowe dane są przesyłane przez sieć, gdy użytkownik porusza się po aplikacji.

To jest przykład SPA.

Dla kogo SPA są najbardziej odpowiednie?

Ze względu na zalety SPA są obecnie preferowanym rozwiązaniem w wielu sytuacjach.

Doskonale sprawdzają się w projektach wykorzystujących różne technologie internetowe, w których wydajność i zadowolenie użytkownika są ważniejsze niż treść.

Jest wielu dużych graczy, którzy korzystają ze SPA. Facebook, Gmail, Mapy Google, Netflix i Paypal to jedne z najbardziej znanych przykładów tego typu technologii (patrz poniżej).

Dlaczego testy A/B są trudne w SPA?

Wszystkie trzy frameworki – React.js, Angular.js i Vue.js – są bardzo popularne wśród programistów JavaScript, ponieważ umożliwiają tworzenie wyrafinowanych interfejsów użytkownika, które zapewniają lepsze wrażenia użytkownika i wyższe współczynniki konwersji.

Są bardzo pożądane dla programistów, ponieważ

• Odświeżanie strony nie jest potrzebne
• Szybkość ładowania strony jest większa
• Interakcje są bogate i płynne
• Transfery danych są zmniejszone
• Kawałki wielokrotnego użytku pozwalają na szybszy rozwój
• Społeczność deweloperów jest ugruntowana

Są także źródłem informacji dla każdego, kto rozpoczyna nowe SPA.

Istnieje jednak jedna poważna wada: ze względu na sposób działania tych struktur narzędzia do testowania A/B po stronie klienta mają problemy z prawidłowym działaniem .

Gdy ktoś przegląda stronę internetową w SPA, strona – w tym adres URL – nie jest odświeżana . Stan strony różni się w zależności od interakcji użytkownika (na przykład różne elementy widoczne na ekranie).

Ponieważ narzędzia do testowania A/B zwykle wprowadzają korekty tylko raz podczas pierwszego wczytywania strony, te późniejsze interakcje nie są brane pod uwagę.

Oto dwa typowe scenariusze:

1. Jeśli masz włączone odsłony strony w SPA, otrzymasz odsłonę, gdy ktoś odwiedzi adres URL, ale nie drugą, jeśli przegląda inną stronę, na której włączone są odsłony. Dzieje się tak, ponieważ materiał jest ładowany na bieżącą stronę, a nie na nową.
2. Jeśli spróbujesz ograniczyć wydarzenie do określonego adresu URL , napotkasz ten sam problem. Narzędzie do testowania A/B „uwierzy”, że pozostaje na tej samej stronie, na której zostało załadowane po raz pierwszy, nawet jeśli użytkownik sądzi, że znajduje się na innej stronie. Ponieważ elementy są przenoszone do i z witryny, mogą wystąpić trudności z monitorowaniem kliknięć lub innych zdarzeń.

Aby renderować doświadczenia, oprogramowanie do testowania A/B po stronie klienta i platformy personalizacji opierają się na całkowitym załadowaniu stron.

Ponieważ ta koncepcja jest nieobecna podczas korzystania z frameworków SPA, takich jak React, Angular lub Vue, określenie, czy nowa treść została dodana do strony, czy też zmienił się status istniejącej treści – a co ważniejsze, kiedy wstrzyknąć dopasowaną treść – staje się trudniejsze.

Dlatego narzędzia do testowania A/B muszą być w stanie rozpoznać kontekst odwiedzającego, np. czy dotarł do listy produktów, szczegółów lub strony koszyka oraz w którym momencie należy dostarczyć świeży materiał.

Oznacza to, że zespół techniczny musi stale być na bieżąco ze zmianami modułowymi komponentów React SPA lub Angular SPA, a także aktualizować doświadczenia wpływające na te komponenty w czasie rzeczywistym.

Na przykład każda interakcja użytkownika w React.js powoduje odświeżenie jednego lub więcej elementów interfejsu użytkownika, usuwając wszelkie zmiany wprowadzone przez rozwiązanie do testowania A/B.

Testowanie po stronie klienta a testowanie po stronie serwera w SPA

Jeśli chodzi o testy A/B na SPA, istnieją dwie opcje:

1. Wyizolowanie różnych „stanów” aplikacji, którą chcesz przetestować, a następnie skonfigurowanie ich tak, aby po wyświetleniu każdego „stanu” wywoływane było API w celu dokonania odpowiednich zmian. Nazywa się to aktywacją warunkową i odbywa się po stronie klienta .

Niektóre przykłady „stanów” obejmują wyświetlanie formularza subskrypcji, ładowanie listy wyników wyszukiwania i tak dalej.

2. Zakodowanie modyfikacji po stronie serwera lub niestandardowe wdrożenie dla każdego nowego doświadczenia.

Na obie te opcje wpływa struktura SPA, która jest używana. Tak więc, jak można się domyślić, wymagają one dużej współpracy między zespołem technicznym a marketerami, aby dobrze funkcjonowały.

Teraz przejrzyjmy obie te opcje i zobaczmy, co zespoły muszą zrobić, aby odnieść sukces.

Aktywacja warunkowa po stronie klienta

Jeśli nadal musisz wykonywać testy po stronie klienta w aplikacji SPA, istnieje obejście tego problemu.

Aby upewnić się, że skrypty testowe są wykonywane tylko wtedy, gdy aplikacja osiągnie pożądany stan, twórcy stron internetowych mogą użyć funkcji zwanej trybem aktywacji warunkowej .

Jeśli nie znasz aktywacji warunkowej, jest to prosta koncepcja do zrozumienia.

Aktywacja warunkowa zasadniczo daje możliwość zdefiniowania, kiedy eksperyment powinien zostać aktywowany w inny sposób niż za pomocą standardowej metody wykonywania tego przy odświeżaniu strony.

Można to osiągnąć, pisząc trochę JavaScript. Można to zrobić na dwa sposoby.

1. Funkcja odpytywania

Funkcja odpytywania jest najbardziej podstawowym sposobem użycia aktywacji warunkowej. Funkcja skanuje stronę co 50 ms, aż pojawi się określony element — może to być modalny, div, a nawet cała strona.

Eksperyment rozpoczyna się w momencie pojawienia się elementu.

Platforma testowa A/B generuje kilka wierszy kodu JavaScript, które możesz zmodyfikować w zależności od tego, którego elementu ma szukać funkcja odpytywania.

Eksperyment jest aktywowany, gdy funkcja osiągnie wartość TRUE .

2. Funkcja oddzwaniania

Wykonanie funkcji zwrotnej jest podobne do wykonywania funkcji odpytującej, ale dodaje trochę elastyczności.

Ta funkcja umożliwia wprowadzenie dowolnego warunku JavaScript, a jeśli jego wartość ma wartość TRUE , rozpoczęcie eksperymentu.

Podczas gdy funkcja odpytywania stale pinguje stronę, aby sprawdzić, czy określony element jest obecny, funkcja wywołania zwrotnego jest bardziej pasywna i opiera się na obsłudze zdarzeń.

Testowanie po stronie serwera

Podczas wykonywania testów po stronie serwera żadne zmiany nie są wprowadzane na poziomie przeglądarki. Parametry odmiany eksperymentu („Użytkownik 1 widzi odmianę A”) są określane na poziomie serwera i bezpośrednio podłączane do aplikacji JavaScript przez dostawcę usług, co ułatwia testowanie bardziej skomplikowanych, dynamicznych treści, które wykraczają poza granice statycznego interfejs użytkownika witryny.

Weźmy na przykład aplikacje społecznościowe, które w większości są SPA. Chociaż do eksperymentowania z nimi można użyć frontendowego testowania po stronie klienta, jest to znacznie bardziej skomplikowane ze względu na zaangażowaną zawartość dynamiczną, dlatego przejście na testowanie po stronie serwera znacznie ułatwia ten proces.

Przykłady testów A/B na SPA

Jakie są rzeczywiste przypadki testowania A/B w aplikacjach jednostronicowych, na które możesz się natknąć?

Zmiana obrazu na stronie docelowej

Załóżmy, że musisz ustawić eksperyment na SPA, aby pokazać dynamiczny obraz 50% odbiorców, którzy trafili na określoną stronę. Framework SPA użyty w tym przykładzie to React.js, co oznacza, że ​​strona się zmienia, a obrazy są regularnie zastępowane.

Jeśli wyświetlisz wariant obrazu, mogą wystąpić problemy z migotaniem, co oznacza, że ​​zostanie zauważona sekwencja oryginalnego obrazu wariantu obrazu-oryginalny obraz.

Tego problemu można całkowicie uniknąć, uruchamiając odpytywanie po załadowaniu określonej strony docelowej.

Testowanie dodatkowej kopii poniżej CTA

Kolejny eksperyment na stronie SPA zbudowanej przy użyciu Angular.js może polegać na wyświetlaniu dodatkowej linii tekstu poniżej głównego CTA 30% docelowej grupy odbiorców.

W tym przykładzie wersja A pokaże dodatkowy wiersz kopii poniżej głównego CTA, podczas gdy wersja B nie. Prześlemy 30% naszego ruchu do wersji A i 70% do wersji B, a następnie porównamy wyniki, aby sprawdzić, czy występuje znacząca różnica we współczynnikach konwersji.

Ponieważ strona jest zbudowana w Angular.js, elementy są zmieniane na bieżąco. Zdarzenie zwrotne w tym miejscu może nam pomóc w wyświetlaniu zmian w wariancie.

Wyświetlanie bonu podarunkowego

W tym przykładzie załóżmy, że gdy użytkownik doda do koszyka produkt marki premium, chcemy, aby wyświetlał się ekskluzywny bon upominkowy. Pod warunkiem, że gdy użytkownik usunie produkt premium z koszyka, kupon zostanie usunięty ze strony.

1. To, co musi się tutaj wydarzyć, to to, że gdy użytkownik wykona wymaganą akcję, powinno zostać wysłane zdarzenie ręcznej aktywacji. Eksperyment zostanie aktywowany w wyniku tego zdarzenia.
2. Zdarzenie aktywacji powinno zostać wywołane, gdy użytkownik usunie produkt premium z koszyka, dezaktywując eksperyment.
3. Eksperyment należy ponownie aktywować, aby pokazać produkt premium, jeśli konsument doda go ponownie.

Wyświetlam slogan poniżej CTA „Kup teraz”

Jeśli chcesz wyświetlić unikalny slogan pod przyciskiem wezwania do działania „Kup teraz”, możesz aktywować eksperyment, przekazując zdarzenie aktywacji w historii zmiany.

Dzieje się tak, ponieważ strona zawierająca przycisk CTA „Kup teraz” nie załaduje się na początku.

Jak Convert ominął problem testowania na SPA

Eksperymenty na SPA muszą być traktowane inaczej niż inne eksperymenty. Ponieważ skrypt Convert nie może odczytać adresu URL, po którym nawiguje użytkownik witryny, nie może uruchamiać eksperymentów za pomocą standardowych metod.

Oto jak to się robi.

Zacznij od zainstalowania kodu śledzenia konwersji zgodnie z opisem w tym artykule.

Następnie zastosuj jedną z 3 poniższych metod:

1. Uruchamianie odpytywania

Jak wspomniano, odpytywanie jest procesem, w którym testowane są warunki doświadczenia w celu określenia, czy dane doświadczenie powinno zostać wywołane.

Obejmuje to monitorowanie adresu URL odwiedzającego, warunków odbiorców lub warunków JavaScript w celu przeprowadzenia testu.

Odpytywanie jest zwykle wyzwalane przez Convert, gdy ładowana jest nowa strona. W SPA zwykle żadne nowe strony nie są ładowane do aplikacji sieci Web.

W takim przypadku do rozpoczęcia sondowania potrzebny będzie następujący kod:

 okno._konw_q = _konw_q || [];
window._conv_q.push(["uruchom","prawda"]);

Powinieneś określić, jakie zdarzenie w Twoim SPA będzie najlepsze, aby wyzwolić powyższy kod. Przykładowy kod, który należy dodać w sekcji Ustawienia projektu > Globalny JavaScript projektu.

 console.log('SPA/Convert Code w Global Project JavaScript wykonany');
if (!window.globalExecutedTs) {
window.globalExecutedTs = prawda;
var staryPushState = window.history.pushState;
window.history.pushState = function(data) {
próbować {
setTimeout(funkcja() {
return oldPushState.apply(to, argumenty);
console.log('konwersja aktywowana z pushstate');
okno._konw_q = _konw_q || [];
window._conv_q.push(["uruchom", "prawda"]);
}, 0);
} złapać (e) {
konsola.log(e);
}
};
window.onpopstate = funkcja(zdarzenie) {
setTimeout(funkcja() {
console.log('konwersja aktywowana z popstate');
okno._konw_q = _konw_q || [];
window._conv_q.push(["uruchom", "prawda"]);
}, 0);
};
}

2. Użyj warunków JavaScript w obszarze witryny

Ponieważ skrypt Convert nie może odczytać zmian adresu URL w SPA, należy użyć warunku JavaScript zamiast warunku dopasowania adresu URL, aby wyzwolić eksperyment.

W następnym artykule znajdziesz szczegółowe wyjaśnienie, jak to zrobić.

3. Ręcznie aktywuj eksperyment

Eksperymenty można wyzwolić ręcznie po ustaleniu, że wystąpił określony przepływ. Korzystając z tej metody, obszar witryny i warunki odbiorców będą nadal testowane po uruchomieniu odpytywania za pomocą kodu. Przeczytaj ten artykuł, aby uzyskać bardziej szczegółowe informacje na temat ręcznego aktywowania eksperymentu.

Dzięki powyższym 3 metodom powinieneś być w stanie wywołać eksperymenty we właściwym momencie w aplikacji SPA.

Czy konwertowanie zwiększa ryzyko migotania w SPA?

Krótka odpowiedź, nie.

Wszystkie frameworki SPA są kompatybilne z technologią przeciwdziałania migotaniu Convert. Convert wykorzystuje technologię SmartInsert ^TM za kulisami, aby zapewnić, że modyfikacje eksperymentalne zostaną zastosowane lub ponownie zastosowane w odpowiednim czasie w SPA, nawet podczas dynamicznego ponownego ładowania strony.

Zalecamy przeczytanie naszej białej księgi na temat efektu migotania, aby dowiedzieć się więcej na jego temat i dlaczego należy go unikać za wszelką cenę.

Typowe problemy podczas testów A/B w witrynach z aplikacjami jednostronicowymi

Jak widać, podczas przeprowadzania testów w witrynach SPA należy pamiętać o kilku rzeczach. Po omówieniu używanego frameworka, metody testowania narzędzia i zdarzenia wyzwalającego, głównym problemem jest zwykle to, że element testowy nie ładuje się ponownie po wyświetleniu nowej strony lub widoku w przeglądarce.

Może to być spowodowane kilkoma rzeczami:

1. Testuj zmiany pojawiające się w widoku pierwszej strony, ale nie w kolejnych

Czasami zmiana, którą chcesz wyświetlić, pojawia się tylko na pierwszej stronie załadowanej w przeglądarce, ale nie na kolejnych widokach. Dzieje się tak, ponieważ część skryptu Convert, która ocenia eksperymenty i je aktywuje, nie jest uruchamiana podczas uzyskiwania dostępu do nowego widoku lub „strony” witryny.

2. Zmiany pojawiające się w edytorze wizualnym nie pojawiają się podczas podglądu ich poza nim

Czasami może się zdarzyć, że zmiany wprowadzone za pomocą edytora wizualnego nie będą widoczne poza podglądem edytora.

Większość struktur SPA nie używa interfejsu API DOM i zamiast tego używa własnych metod do wdrażania zmian na stronie. Powoduje to, że DOM traci synchronizację po zaktualizowaniu przez SPA. Jest to powszechne w React i Angular, powodując, że selektory CSS znajdujące się w kodzie Jquery nie działają.

3. Zmiany pojawiają się w kolejnych „widokach”

W tym scenariuszu zmiana eksperymentu jest wyświetlana we właściwym widoku (strony). Ale podczas odwiedzania nowych (stron) odsłon, zmiana nie znika. Dzieje się tak, ponieważ w witrynie SPA zmiany nie są usuwane podczas ponownego ładowania nowej strony.

Skrypt Convert usuwa kod dodany, gdy warunki eksperymentu nie są zgodne z kolejnym widokiem, w którym zmiany zostały wdrożone po wywołaniu sondowania. To jednak nie wystarczy, ponieważ zmiany jquery nie znikną nawet po usunięciu kodu eksperymentu ze strony.

Musisz wykonać kod, który cofa zmiany wprowadzone przez eksperyment.

Twoja kolej: unikaj tych błędów podczas optymalizacji SPA

Ze względu na postęp w przetwarzaniu i udostępnianiu informacji SPA mogą stać się bardziej powszechnie akceptowane, ale należy pamiętać, że ta nowa technologia ma problemy z integracją z platformami optymalizacji i eksperymentowania, które zwykle działają z bardziej klasycznymi konfiguracjami.

Mamy nadzieję, że w tym artykule omówiono różne komponenty SPA, a także niektóre rozwiązania umożliwiające pokonanie tych przeszkód w dążeniu do zapewnienia odwiedzającym szybszych, bardziej intuicyjnych i spersonalizowanych doświadczeń cyfrowych.

Jednak lepiej będzie współpracować z dostawcą rozwiązań, który może zapewnić bezproblemową obsługę SPA, na przykład możliwość wykrywania zmian w składnikach interfejsu użytkownika i typach stron w celu dynamicznego dostosowywania bez modyfikowania kodu źródłowego. Jak ten w polu poniżej.