W jaki sposób VWO zapewnia odwiedzającym bezproblemowe wrażenia podczas przeprowadzania eksperymentów w aplikacji jednostronicowej (SPA)

Szczegółowe informacje na temat tego, jak natywne wsparcie VWO dla dynamicznych witryn internetowych ułatwia eksperymentowanie podczas tworzenia bezproblemowych doświadczeń dla odwiedzających.

Wiele witryn jest zbudowanych jako aplikacje jednostronicowe (SPA), ponieważ mają kilka kluczowych zalet w porównaniu z tradycyjnymi witrynami statycznymi: Witryny dynamiczne są szybkie, kompaktowe i responsywne. Takie strony internetowe umożliwiają optymalizację treści, które widzi użytkownik, aby tworzyć wciągające i niepowtarzalne doświadczenia. Jeśli usłyszysz od swojego zespołu programistów, że Twoja witryna jest zbudowana przy użyciu React, Vue, AngularJS, Ember lub Backbone, prawdopodobnie pracujesz z SPA, a ten artykuł jest dla Ciebie odpowiedni.

W tym artykule mówimy o tym, jak my, w VWO, przeprowadzamy eksperymenty na dynamicznych witrynach internetowych, które są skuteczne i łatwe dzięki wbudowanej obsłudze testów SPA, dzięki czemu możesz skupić się tylko na optymalizacji witryny i niczym więcej.

Ale najpierw porozmawiajmy o problemie, który cię tu przywiódł.

Wyzwania prowadzenia eksperymentów na dynamicznych stronach internetowych

Prawdopodobnie jesteś tutaj, ponieważ kiedy przeprowadzasz eksperymenty na SPA, zmiany, które wprowadzasz na swojej stronie docelowej, nie są widoczne dla użytkowników końcowych. W rezultacie nie możesz testować i sprawdzać swoich pomysłów tak szybko, jak chcesz, co powoduje frustrację.

Po pierwsze, zrozummy, że SPA różnią się od tradycyjnych stron internetowych. Cała strona internetowa ładuje się za każdym razem, gdy ktoś odwiedza konwencjonalną witrynę. W SPA jednak aktualizowane są tylko niektóre sekcje strony. Dzieje się tak, ponieważ w SPA zasoby, takie jak HTML, CSS, skrypty itp., które budują wygląd Twojej strony internetowej, są ładowane tylko raz.

W zależności od tego, jak użytkownik wchodzi w interakcję z różnymi częściami strony internetowej, to, co widzisz w określonej sekcji strony, zmienia się dynamicznie w odpowiedzi na działanie użytkownika. Powiedzmy, że jeśli użytkownik kliknie przycisk, otworzy się wyskakujące okienko. To wyskakujące okienko to dynamiczna zmiana wprowadzona przez platformę zgodnie z interakcją użytkownika bez wpływu na wydajność. Kilka innych przykładów dynamicznych zmian w SPA jest jak poniżej:

• Pozycje na liście wyników wyszukiwania, którą można rozwinąć, aby wyświetlić jej szczegóły.
• W formularzu niektóre pola pojawiają się na stronie tylko wtedy, gdy użytkownik wybierze wstępnie zdefiniowaną wartość z listy rozwijanej.
• Witryna korzysta z niektórych elementów, takich jak kalendarz, próbnik kolorów itp., które są ponownie ładowane za każdym razem, gdy użytkownik musi z nich skorzystać.

Chociaż jest to dobre dla wygody użytkownika, prowadzenie kampanii testowej ze zmianami wprowadzonymi do dowolnego z tych dynamicznych elementów (takich jak listy wyników wyszukiwania, listy rozwijane, widżety, wyskakujące okienka, banery itp.) na Twoich stronach internetowych staje się trudne. Dzieje się tak, ponieważ modyfikacje wprowadzone do komponentu muszą być stosowane za każdym razem, gdy coś dynamicznie zmienia się na stronie.

Pomyśl o tym w ten sposób – przeprowadzasz test na stronie internetowej. Za każdym razem, gdy strona ładuje się (przez użytkownika odwiedzającego stronę) lub strona tworzy element dynamiczny, jak opisano powyżej, framework SPA pokazuje pierwotny stan (różny od odmiany, którą chcesz pokazać w ramach testu).

Potrzebujesz platformy do eksperymentów, która zapewni, że Twoja odmiana testowa zastąpi oryginalny widok, tak aby użytkownicy zobaczyli odmianę, którą chcesz, aby zobaczyli. Tak więc, ustawiając test na SPA (powiedzmy, że testujesz zawartość w wyskakującym okienku), będziesz oczekiwać, że kontrola i odmiana testu będą wyglądać tak:

Ale w przypadku braku obsługi SPA, zmiany wprowadzone w wariancie powrócą do kontroli, dzięki czemu oba będą wyglądać identycznie. Całkiem tak:

To tylko uproszczona wersja tego, co się dzieje. Jeśli jesteś zainteresowany technicznym zrozumieniem tego, co dzieje się za ekranem, czytaj dalej, w przeciwnym razie możesz przejść do następnej sekcji artykułu.

Niektóre frameworki stron internetowych, takie jak GatsbyJS, Next.js, ReactJS itp., wykorzystują renderowanie po stronie serwera i przechowują migawkę oryginalnej strony internetowej tak, jak powinna się ładować. Tak więc, gdy modyfikujesz element na stronie w celach testowych, platforma wykrywa zmianę jako „problem” i przywraca stronę do pierwotnego stanu, który pojawia się w zapisanej migawce. To z kolei utrudnia wykonanie testu A/B.

Po drugie, najnowsze frameworki, takie jak React, Gatsby, Next.js, Vue.js, Angular itp., wykorzystują koncepcję renderowania opartego na stanie. Na przykład w React za każdym razem, gdy zmiana jest wprowadzana w jednym ze stanów ze względu na odmianę testu A/B, interfejs witryny automatycznie ładuje się ponownie do swojej pierwotnej postaci, więc użytkownicy nigdy nie widzą tej odmiany. Stwarza to nieoptymalne wrażenia dla odwiedzających witrynę.

Jak VWO ułatwia eksperymentowanie z aplikacjami jednostronicowymi?

Teraz, gdy omówiliśmy problem, porozmawiajmy o rozwiązaniu. Zaawansowana obsługa natywnego SPA VWO w edytorze wizualnym, który jest częścią VWO Testing, zapewnia, że ​​modyfikacje wprowadzone w eksperymencie zostaną zastosowane w SPA, aby zapewnić niezawodność kampanii i zapewnić użytkownikom bezproblemowe wrażenia.

1. Testowanie elementów dynamicznych na swojej stronie

Chociaż elementy dynamiczne zostały zdefiniowane w poprzedniej sekcji, przyjrzyjmy się im bliżej na konkretnym przykładzie. Weź pod uwagę, że masz witrynę eCommerce. Po kliknięciu przycisku „X” (Zamknij) na „stronie koszyka” pojawia się ostrzeżenie w wyskakującym okienku. Teraz chciałbyś przetestować kopiowane zmiany w polu działania, aby sprawdzić, czy możliwe do wykonania wiadomości i wezwanie do działania mogą powstrzymać użytkowników przed zamknięciem strony koszyka. Pole alertu nie jest początkowo obecne w kodzie witryny, ale jest dodawane przez ramy SPA, gdy użytkownik kliknie przycisk „X” (Zamknij). Tutaj przycisk, który otwiera wyskakujące okienko, na którym uruchamiasz test, nazywa się elementem docelowym.

VWO zapewnia, że ​​zmiana, którą chcesz przetestować, zostanie zastosowana do wyskakującego okienka zaraz po załadowaniu. Wszystko, co musisz zrobić, to włączyć ustawienie jednym kliknięciem. Więcej informacji na temat tego ustawienia można znaleźć w naszym artykule bazy wiedzy.

W jaki sposób VWO zapewnia prawidłowe stosowanie zmian?

Łatwo.

VWO obserwuje elementy strony (filmy, obrazy, tabele, sekcje itp.) pod kątem wprowadzonych w nich zmian w dowolnym momencie. Dlatego też, gdy element docelowy (przycisk Zamknij „X” w powyższym przykładzie) zostanie załadowany, VWO wykrywa go i stosuje modyfikacje wprowadzone w Wariancji. Dzieje się tak nawet wtedy, gdy strona internetowa nie jest ponownie ładowana, ale użytkownik po prostu wchodzi w interakcję z sekcją witryny.

Przejdźmy trochę techniczny i zbadajmy go dalej. Możesz to wygodnie pominąć i przejść do następnego punktu, jeśli szczegóły techniczne nie są dla Ciebie.

W dynamicznej witrynie internetowej, na podstawie zachowań użytkowników, elementy są dodawane, usuwane lub modyfikowane. Drzewo DOM jest jak repozytorium wszystkich komponentów witryny (przycisków, banerów, wyskakujących okienek, widżetów itp.) i przechowuje migawkę aktualnego stanu witryny.

Biblioteka VWO wykorzystuje Mutation Observer – interfejs przeglądarki, który pozwala VWO obserwować zmiany w drzewie DOM SPA. Pomaga to wykryć każdy nowy element dodany, usunięty lub zmodyfikowany na stronie. W takim przypadku VWO automatycznie stosuje zmiany na elementach. Dlatego za każdym razem, gdy elementy ładują się dynamicznie, zmiany są wprowadzane, zanim zostaną pokazane odwiedzającemu. Poprawia to wiarygodność kampanii, zapewniając całkowite zastosowanie zmian w odmianach.

W jaki sposób VWO zarządza zmianami utrudnionymi przez renderowanie frameworka ?

VWO ukrywa przycisk CTA, dopóki renderowanie frameworka nie zostanie zakończone. VWO wielokrotnie sprawdza, czy renderowanie zostało wykonane. Po zakończeniu renderowania frameworka rozpoczyna się realizacja kampanii VWO.

Możesz przeczytać więcej o tych ustawieniach w naszym artykule w bazie wiedzy.

2. Testowanie dowolnego innego elementu strony w Twojej witrynie

Kiedy strona się ładuje, nowoczesne frameworki SPA przywracają zmodyfikowane elementy do ich pierwotnego stanu za każdym razem, gdy ładuje się strona internetowa. Jeśli więc testujesz stronę, wszystkie Twoje modyfikacje zostaną przywrócone do oryginału. Nie tylko elementy dynamiczne, ale także wszystkie elementy na stronie, VWO śledzi zmiany, które wprowadziłeś, aby sprostać wyzwaniu testowania za pomocą frameworka SPA. Podczas stosowania tych zmian na Twojej stronie internetowej VWO wykrywa wszystkie zmiany dokonane na stronie (wstawianie, usuwanie i modyfikacje węzłów DOM) przez test i ponownie je stosuje, aby zapewnić regularność w doświadczeniu użytkownika.

Nie są wymagane żadne wyraźne działania, aby umożliwić to ulepszenie w VWO. Jest to wbudowana funkcja dostępna dla wszystkich kampanii VWO zbudowanych za pomocą Edytora Wizualnego, niezależnie od struktury, na której zbudowana jest Twoja strona internetowa.

Spójrzmy na kilka przykładów użycia zmian, które obsługuje VWO Visual Editor.

1. Załóżmy, że usunąłeś dodatkowy przycisk CTA (powiedzmy „Dodaj do listy życzeń”) ze swojej witryny eCommerce, aby sprawdzić, czy ta zmiana wpływa na liczbę kliknięć głównego CTA (powiedzmy „Dodaj do koszyka”). To jest testowy przypadek użycia, w którym usuwasz element na stronie internetowej. Nawet jeśli usunąłeś przycisk, pozostaje on w wirtualnym DOM stworzonym przez frameworki takie jak React i wygeneruje błąd, gdy strona się załaduje.

2. Teraz wyobraź sobie, że Twoja witryna handlu elektronicznego ma przepływ rejestracji, który pokazuje pole wprowadzania tekstu do przechwytywania adresów e-mail odwiedzających oprócz przycisku „Prześlij teraz”. Kiedy wprowadzasz zmiany w wyglądzie i działaniu pola wprowadzania tekstu, zmieniają się stylizowane komponenty witryny z nim związane. Edytor wizualny VWO zapewnia, że ​​użytkownicy widzą najnowsze zastosowane zmiany. Zobacz, jak możesz wprowadzać zmiany w polu formularza w SPA i upewnij się, że odwiedzający, których próbka dotyczy odmiany, widzą te zmiany, zamiast widzieć kontrolę.

Jak korzystać z VWO w aplikacji jednostronicowej?

Aby korzystać z VWO dla swojego SPA, wystarczy dodać VWO SmartCode w sekcji nagłówka swojej witryny i cieszyć się domyślną obsługą stron SPA.

Dzięki tak prostej integracji możesz zacząć od razu. Zarejestruj się na bezpłatną wersję próbną, poznaj możliwości VWO lub poproś o demo z naszymi ekspertami ds. produktów. Możesz również dowiedzieć się więcej o naszych najnowszych, ekscytujących aktualizacjach produktów.