Pomiar aplikacji jednostronicowych

Ten dokument jest przeznaczony dla deweloperów, którzy chcą mierzyć wyświetlenia stron 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: masz formularz do pozyskiwania potencjalnych klientów. Formularz ma 3 ekrany: > * Pierwszy ekran służy do zbierania informacji o klientach. * Drugi ekran, na którym klienci mogą wyrazić zainteresowanie określonymi usługami. * Trzeci ekran , na którym można zapisać się na seminaria internetowe związane z zainteresowaniami klienta.

Aby prawidłowo mierzyć wyświetlenia stron w aplikacjach jednostronicowych, musisz zliczać wyświetlenia każdej strony, z którą użytkownik wchodzi w interakcję, i prawidłowo określać adres URL strony odsyłającej, 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ę podczas pierwszego wczytania strony. Dowiedz się, jak skonfigurować tag Google.

Implementowanie pomiaru aplikacji jednostronicowej

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

• Zmiany w historii przeglądarki (zalecane): jeśli Twoja aplikacja jednostronicowa 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 historii przeglądarki Implementacja zdarzenia niestandardowego

Implementacja zmian w historii przeglądarki

Jeśli Twoja aplikacja jednostronicowa 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.

Ważne: jeśli konfigurujesz tagi za pomocą Menedżera tagów Google, nie włączaj automatycznego śledzenia historii w GA4, ponieważ może to spowodować podwójne zliczanie wyświetleń stron. Zamiast tego zapoznaj się z samouczkiem Mierzenie aplikacji jednostronicowych za pomocą Menedżera tagów Google.

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 jednostronicowa prawidłowo mierzy wyświetlenia stron:

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

2. Kliknij aplikację jednostronicową. 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 adres URL strony odsyłającej i lokalizacja strony zostały prawidłowo zaktualizowane.

Dodatkowe uwagi dotyczące aplikacji jednostronicowych

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

Zarządzanie pozycją przewijania

Gdy użytkownicy przechodzą między widokami w aplikacji jednostronicowej, 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 wpływać 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 pozwoli śledzeniu przewijania w Google Analytics dokładnie mierzyć zaangażowanie 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 jednostronicowa aktualizuje DOM.

Zalecenie: upewnij się, że framework aplikacji jednostronicowej 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 w przeglądarce. Po przejściach wirtualnych przetestuj wyszukiwanie na stronie, aby potwierdzić dostępność treści.

Wpływ na zdarzenia automatyczne

Jeśli prawidłowo wdrożysz pomiar wirtualnych wyświetleń stron w aplikacji jednostronicowej, Google Analytics będzie odpowiednio obsługiwać inne zdarzenia automatyczne. Jeśli wirtualne wyświetlenia stron nie są rejestrowane w przypadku zmian ekranu, Google Analytics traktuje aplikację jednostronicową jako jedną stronę, co prowadzi do przekłamania danych.

Na przykład zdarzenie user_engagement mierzy czas, jaki użytkownik aktywnie spędza na stronie. Bez wirtualnych wyświetleń stron 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 wirtualnych wyświetleń stron 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 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 strony wirtualnej, którą użytkownik aktualnie wyświetla.

Dzięki temu możesz analizować zaangażowanie użytkowników i inne dane na poszczególnych ekranach lub w sekcjach aplikacji jednostronicowej, co pozwala lepiej zrozumieć ścieżkę użytkownika.