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 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 Set up 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 uruchomić 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 zmiany 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ądania.

Włącz pomiar zaawansowany w GA4

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

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. Upewnij się, że włączone są zarówno opcje Wczytania strony , jak i Zmiany na stronie na podstawie zdarzeń historii przeglądania.

   

5. Zapisz zmiany.

Uwaga: gdy pomiar zaawansowany jest włączony w przypadku opcji „Zmiany na stronie na podstawie zdarzeń historii przeglądania”, Google Analytics automatycznie nasłuchuje zdarzeń historii (takich jak te używane w aplikacjach jednostronicowych) i wysyła zdarzenia page_view. Nie musisz konfigurować w Menedżerze tagów Google konkretnych zmiennych ani reguł historii na potrzeby wysyłania wyświetleń stron do GA4.

Używanie reguł Menedżera tagów Google na potrzeby zdarzeń historii

Jeśli musisz uruchamiać w Menedżerze tagów Google inne typy tagów na podstawie zmian w historii przeglądarki, np. aby wysyłać dane do innych platform marketingowych, możesz użyć typu reguły „Zmiana historii”.

Podczas konfigurowania tagów lub zmiennych do współpracy z regułą zmiany historii upewnij się, że używasz prawidłowych zmiennych wbudowanych udostępnianych przez Menedżera tagów Google:

• History New URL Fragment: fragment adresu URL po zdarzeniu historii.
• History Old URL Fragment: fragment adresu URL przed zdarzeniem historii.
• History New State: nowy obiekt stanu historii.
• History Old State: Stary obiekt stanu historii.
• History Source: źródło zdarzenia historii (np. popstate, pushState, replaceState).

Te zmienne wbudowane mogą wymagać włączenia w Menedżerze tagów Google w sekcji Zmienne > Konfiguracja.

Ważne: unikaj używania niezdefiniowanych nazw zmiennych. Na przykład New History URL nie jest standardową zmienną Menedżera tagów Google i spowoduje błędy podczas publikowania. Zawsze wybieraj spośród dostępnych zmiennych wbudowanych lub zdefiniowanych przez siebie zmiennych.

Więcej informacji o tej regule znajdziesz w artykule Reguła zmiany historii.

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 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 adres 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 lepszą obsługę 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 wirtualnej strony, co może wpływać na śledzenie głębokości przewijania.

Zalecenie: po każdej zmianie wirtualnej strony 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 wirtualnej stronie.

Zapewnij dostępność treści dla funkcji przeglądarki

Jeśli użytkownicy zgłaszają problemy z funkcjami przeglądarki, np. z wyszukiwaniem na stronie (Ctrl+F), które nie działa po wczytaniu strony, 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 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 jednostronicowej, Google Analytics odpowiednio obsłuży 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 zaimplementowany:

• Zdarzenie user_engagement jest wysyłane, gdy użytkownik przechodzi z jednej wirtualnej strony na drugą.
• Czas zaangażowania na poprzedniej wirtualnej stronie jest obliczany i wysyłany wraz ze zdarzeniem user_engagement, zwykle tuż przed przetworzeniem zdarzenia page_view na nowej wirtualnej stronie.
• 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 na poszczególnych ekranach lub w sekcjach aplikacji jednostronicowej, co pozwala dokładniej zrozumieć ścieżkę użytkownika.