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 raz i pobierają dodatkowe treści za pomocą interfejsów API JavaScriptu.

Przykład: załóżmy, że masz formularz, który służy do pozyskiwania potencjalnych klientów. Formularz ma 3 ekrany: > * Pierwszy ekran służy do zbierania informacji o kliencie. * Drugi ekran, na którym klienci wskazują zainteresowanie określonymi usługami. *   Trzeci ekran – strona, na której można zarejestrować się na webinary związane z zainteresowaniami klienta.

Kluczem do prawidłowego pomiaru wyświetleń stron w aplikacjach jednostronicowych jest zliczanie wyświetleń stron dla każdego ekranu, z którym użytkownik wchodzi w interakcję, oraz prawidłowe określanie strony 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 uruchamia się po pierwszym wczytaniu strony. Dowiedz się, jak skonfigurować tag Google.

Wdrażanie pomiaru aplikacji jednostronicowej

Aby dokładnie mierzyć SPA, użyj jednej z tych metod do wywoływania nowego wirtualnego wyświetlenia strony:

• Zmiany 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: użyj tej opcji, jeśli Twoja witryna używa obiektu DocumentFragment do renderowania różnych ekranów.

Implementacja historii przeglądarki Implementacja zdarzenia niestandardowego

Implementacja zmiany historii przeglądarki

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

Ważna uwaga: jeśli konfigurujesz tagi za pomocą Menedżera tagów Google, nie włączaj automatycznego śledzenia historii w Google Analytics, ponieważ może to prowadzić do podwójnego zliczania wyświetleń strony. 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ć zdarzenie 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. Pamiętaj, aby włączyć opcje Wczytania strony i Zmiany na stronie na podstawie zdarzeń historii przeglądania.

   

5. Zapisz zmiany.

Weryfikowanie konfiguracji pomiaru

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

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

2. Klikaj elementy w aplikacji jednostronicowej. Gdy klikniesz, aby przejść do nowego ekranu wirtualnego, w raporcie DebugView powinno się pojawić 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 jednostronicowych

Oprócz wysyłania zdarzeń page_view weź 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 SPA, przeglądarka zwykle zachowuje bieżącą pozycję przewijania. Może to oznaczać, że użytkownicy nie zobaczą góry nowej strony wirtualnej, co może mieć wpływ na śledzenie głębokości przewijania.

Rekomendacja: po każdym przejściu na stronę wirtualną programowo resetuj pozycję przewijania do góry strony lub 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 zawartości, co pozwoli śledzeniu przewijania w Google Analytics dokładnie mierzyć zaangażowanie na nowej stronie wirtualnej.

Zapewnianie dostępności treści w funkcjach 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 platforma SPA i logika routingu całkowicie i synchronicznie aktualizują odpowiednie części modelu DOM, dodając treść 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. Przetestuj wyszukiwanie na stronie po wirtualnych nawigacjach, aby potwierdzić dostępność treści.

Wpływ na zdarzenia automatyczne

Jeśli prawidłowo zaimplementujesz w aplikacji SPA pomiar wyświetleń stron wirtualnych, 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 pojedynczą stronę, co prowadzi do zniekształcenia danych.

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

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

• Zdarzenie user_engagement jest wysyłane, gdy użytkownik przechodzi z jednej strony wirtualnej na inną.
• Czas zaangażowania dla poprzedniej strony wirtualnej jest obliczany i wysyłany wraz ze zdarzeniem user_engagement, zwykle tuż przed przetworzeniem zdarzenia page_view dla nowej strony wirtualnej.
• Inne zdarzenia, takie jak kliknięcia lub 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 jednostronicowej, co pozwala dokładniej poznać ścieżkę użytkownika.