Pomiar aplikacji jednostronicowych

Ten dokument jest przeznaczony dla deweloperów, którzy chcą mierzyć liczbę wyświetleń strony w aplikacji jednostronicowej za pomocą Google Analytics.

Aplikacje jednostronicowe (SPA) to witryny, które wczytują dokument HTML tylko raz, a dodatkowe treści pobierają za pomocą interfejsów API JavaScript.

Przykład: załóżmy, że masz formularz do pozyskiwania potencjalnych klientów. Formularz składa się z 3 ekranów: > * Pierwszy ekran służy do rejestrowania informacji o klientach. * Drugi ekran, na którym klienci mogą wyrazić zainteresowanie określonymi usługami. * Trzeci ekran strona rejestracji na webinary związane z zainteresowaniami klienta.

Kluczem do prawidłowego pomiaru wyświetleń stron w przypadku aplikacji SPA jest zliczanie wyświetleń każdej strony, z którą użytkownik wchodzi w interakcję, i prawidłowe określanie witryny odsyłającej, aby można było prawidłowo śledzić ścieżkę użytkownika.

Zanim zaczniesz

Na tej stronie zakładamy, że masz już:

• konto i usługę Google Analytics dla swojej witryny. Dowiedz się, jak skonfigurować Google Analytics.

• Tag Google zaimplementowany w witrynie, który jest uruchamiany przy pierwszym wczytaniu strony. Dowiedz się, jak skonfigurować tag Google.

Wdrażanie pomiaru aplikacji jednostronicowych

Aby wdrożyć dokładne pomiary SPA, użyj jednej z tych metod, aby wywołać nowy wirtualny widok strony:

• Zmiany w historii przeglądarki (zalecane): jeśli Twoja aplikacja SPA używa interfejsu History API, a w szczególności metod pushState() i replaceState() do aktualizowania ekranów, użyj tej opcji.

• Zdarzenia niestandardowe: jeśli Twoja witryna używa obiektu DocumentFragment do renderowania różnych ekranów, użyj tej opcji.

Implementacja zmiany historii przeglądarki

Jeśli Twoja aplikacja SPA korzysta z interfejsu History API, możesz włączyć w Google Analytics pomiar zaawansowany, aby automatycznie śledzić odsłony na podstawie zdarzeń historii przeglądania.

Włączanie pomiaru zaawansowanego w Google Analytics

Aby automatycznie mierzyć page_views na podstawie historii przeglądania:

1. Otwórz Google Analytics.

2. Na stronie Administracja w sekcji Zbieranie i modyfikowanie danych kliknij Strumienie danych > Sieć.

3. W sekcji Pomiar zaawansowany ustaw przełącznik na Wł., aby włączyć wszystkie opcje.

4. Kliknij, aby edytować poszczególne opcje. W sekcji Wyświetlenia strony kliknij Pokaż ustawienia zaawansowane. Włącz opcje Wczytania strony i Zmiany na stronie na podstawie zdarzeń historii przeglądania.

   

5. Zapisz zmiany.

Weryfikowanie konfiguracji pomiarów

Aby sprawdzić, czy aplikacja jednostronicowa prawidłowo mierzy wyświetlenia strony:

1. Włącz tryb debugowania dla każdego tagu w konfiguracji pomiarów w aplikacji SPA. Dowiedz się, jak monitorować zdarzenia w raporcie DebugView.

2. Klikaj elementy aplikacji na jednej stronie. Gdy klikniesz nowy wirtualny ekran, w raporcie DebugView powinno pojawić się nowe zdarzenie page_view. Porównaj parametry zdarzenia page_view z poprzednim zdarzeniem page_view, aby sprawdzić, czy strona odsyłająca i lokalizacja strony zostały prawidłowo zaktualizowane.

Dodatkowe uwagi dotyczące aplikacji SPA

Oprócz wysyłania page_view zdarzeń weź pod uwagę te dodatkowe aspekty, aby zapewnić solidną integrację aplikacji SPA z Google Analytics i lepsze wrażenia użytkowników:

Zarządzanie pozycją przewijania

Gdy użytkownicy przechodzą między widokami w aplikacji SPA, przeglądarka zwykle zachowuje bieżącą pozycję przewijania. Może to oznaczać, że użytkownicy nie widzą górnej części nowej wirtualnej strony, a także wpływać na śledzenie głębokości przewijania.

Rekomendacja: po każdej zmianie strony wirtualnej programowo resetuj pozycję przewijania do góry strony lub kontenera głównej treści.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Dzięki tej zmianie użytkownicy będą zaczynać od góry nowej treści, co umożliwi śledzeniu przewijania w Google Analytics dokładne pomiary zaangażowania na nowej stronie wirtualnej.

Zapewnianie dostępności treści dla funkcji przeglądarki

Jeśli użytkownicy zgłaszają problemy z funkcjami przeglądarki, np. wyszukiwaniem na stronie (Ctrl+F), które nie działają po wczytaniu strony, może to wskazywać na sposób, w jaki aplikacja SPA aktualizuje DOM.

Zalecenie: upewnij się, że framework SPA i logika routingu w pełni i synchronicznie aktualizują odpowiednie części DOM za pomocą treści nowej strony. Opóźnione renderowanie lub treści ukryte w głównym drzewie DOM mogą nie być od razu indeksowane przez funkcję wyszukiwania w przeglądarce. Po wirtualnej nawigacji przetestuj wyszukiwanie na stronie, aby potwierdzić dostępność treści.

Wpływ na zdarzenia automatyczne

Jeśli prawidłowo zaimplementujesz pomiar wirtualnych wyświetleń stron w aplikacji SPA, Google Analytics będzie odpowiednio obsługiwać inne zdarzenia automatyczne. Jeśli wirtualne odsłony nie są rejestrowane w przypadku zmian ekranu, Google Analytics traktuje aplikację SPA jako jedną stronę, co prowadzi do zniekształcenia danych.

Na przykład zdarzenie user_engagement mierzy czas, przez jaki użytkownik aktywnie korzysta ze strony. Bez wirtualnych wyświetleń strony cały czas zaangażowania jest przypisywany do początkowego wczytania strony, co uniemożliwia analizowanie czasu spędzonego na poszczególnych ekranach.

Jeśli pomiar wirtualnych odsłon jest prawidłowo wdrożony:

• Zdarzenie user_engagement jest wysyłane, gdy użytkownik przechodzi z jednej wirtualnej strony na inną.
• Czas zaangażowania na poprzedniej stronie wirtualnej jest obliczany i wysyłany wraz ze zdarzeniem user_engagement, zwykle tuż przed przetworzeniem zdarzenia page_view na nowej stronie wirtualnej.
• Inne zdarzenia, takie jak kliknięcia czy przewijanie, są powiązane z page_location wirtualnej strony, którą użytkownik aktualnie wyświetla.

Dzięki temu możesz analizować zaangażowanie użytkowników i inne dane dotyczące poszczególnych ekranów lub sekcji w aplikacji SPA, co pozwala lepiej poznać ścieżkę użytkownika.