Pomiar aplikacji jednostronicowych

Ten dokument jest przeznaczony dla deweloperów, którzy chcą mierzyć wyświetlenia stron w aplikacji na jednej stronie za pomocą Google Analytics.

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

Przykład: załóżmy, że masz formularz do pozyskiwania potencjalnych klientów. Formularz ma 3 ekrany: > * pierwszy ekran do zbierania informacji o klientach, * drugi ekran, na którym klienci mogą wyrazić zainteresowanie określonymi usługami, * trzeci ekran , na którym klienci mogą zapisać się na webinary związane z ich zainteresowaniami.

Aby prawidłowo mierzyć wyświetlenia stron w aplikacjach SPA, musisz zliczać wyświetlenia każdej strony, z którą użytkownik wchodzi w interakcję, i prawidłowo określać odsyłającą stronę, aby móc prawidłowo śledzić ścieżkę użytkownika.

Zanim zaczniesz

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 uruchamia się przy pierwszym wczytaniu strony. Dowiedz się, jak skonfigurować tag Google.

Implementowanie pomiaru aplikacji na jednej stronie

Aby wdrożyć dokładny pomiar aplikacji SPA, użyj jednej z tych metod, aby wywołać nowe wirtualne wyświetlenie strony:

• Zmiany w historii przeglądarki (zalecane): jeśli Twoja aplikacja SPA używa interfejsu History API, a konkretnie 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 używa interfejsu History API, możesz włączyć pomiar zaawansowany w Google Analytics, aby automatycznie śledzić wyświetlenia stron na podstawie zdarzeń historii przeglądarki.

Włączanie pomiaru zaawansowanego w Google Analytics

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

1. Otwórz Google Analytics.

2. W sekcji Administracja w obszarze 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. Upewnij się, że włączone są opcje Wczytania strony i Zmiany na stronie na podstawie zdarzeń historii przeglądania.

   

5. Zapisz zmiany.

Sprawdzanie konfiguracji pomiaru

Aby sprawdzić, czy aplikacja na jednej stronie prawidłowo mierzy wyświetlenia stron:

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

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

Dodatkowe uwagi dotyczące aplikacji SPA

Oprócz wysyłania zdarzeń page_view warto wziąć 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 strony wirtualnej, co może mieć wpływ na śledzenie głębokości przewijania.

Zalecenie: po każdej zmianie strony wirtualnej programowo resetuj pozycję przewijania do góry strony lub do głównego kontenera 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 mierzenie 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, takimi jak wyszukiwanie na stronie (Ctrl+F), które nie działają po wczytaniu strony wirtualnej, może to wskazywać na sposób, w jaki aplikacja SPA aktualizuje DOM.

Zalecenie: upewnij się, że framework aplikacji SPA i logika routingu całkowicie 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 przeglądarki. Po nawigacji wirtualnej przetestuj wyszukiwanie na stronie, aby potwierdzić dostępność treści.

Wpływ na zdarzenia automatyczne

Jeśli prawidłowo wdrożysz pomiar wyświetleń stron wirtualnych w aplikacji SPA, Google Analytics odpowiednio obsłuży inne zdarzenia automatyczne. Jeśli wyświetlenia stron wirtualnych nie są rejestrowane w przypadku zmian ekranu, Google Analytics traktuje aplikację SPA jako jedną stronę, co prowadzi do przekłamań w danych.

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

Gdy pomiar wyświetleń stron wirtualnych jest prawidłowo wdrożony:

• Zdarzenie user_engagement jest wysyłane, gdy użytkownik przechodzi z jednej strony wirtualnej na drugą.
• Czas zaangażowania na poprzedniej stronie wirtualnej jest obliczany i wysyłany razem 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 strony wirtualnej, 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 zrozumieć ścieżkę użytkownika.