Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Ten dokument jest przeznaczony dla programistów, którzy chcą mierzyć liczbę wyświetleń stron w aplikacji jednostronicowej za pomocą Google Analytics.
Aplikacje jednostronicowe to witryny, które wczytują dokument HTML tylko raz, a dodatkowe treści pobierają za pomocą interfejsów API JavaScript.
Przykład: masz formularz, który służy do zdobywania potencjalnych klientów. Formularz ma 3 ekrany:
Pierwszy ekran służący do rejestrowania informacji o kliencie.
Drugi ekran, na którym klienci mogą wyrazić zainteresowanie określonymi usługami.
Trzeci ekran, na którym można zapisać się na webinaria związane z zainteresowaniami klienta.
Kluczem do prawidłowego zliczania wyświetleń stron w ramach aplikacji SPA jest zliczanie wyświetleń stron dla każdej strony, z którą użytkownik wchodzi w interakcję, oraz prawidłowe określanie odwołania strony, aby można było prawidłowo śledzić ścieżkę użytkownika.
tag Google zaimplementowany w witrynie, który uruchamia się, gdy strona jest po raz pierwszy wczytywana. Dowiedz się, jak skonfigurować tag Google.
Implementacja pomiaru aplikacji jednostronicowych
Aby wdrożyć dokładne pomiary SPA, użyj jednej z tych metod, aby wywołać nowe wyświetlenie wirtualnej strony:
Zmiany historii przeglądarki (zalecane): jeśli aplikacja SPA korzysta z interfejsu History API, w szczególności z 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.
Weryfikowanie konfiguracji pomiarów
Aby sprawdzić, czy aplikacja jednostronicowa prawidłowo mierzy wyświetlenia strony:
Przejdź przez aplikację jednostronicową. Gdy klikniesz nowy ekran wirtualny, w raporcie DebugView powinno pojawić się nowe zdarzenie page_view. Porównaj parametry zdarzenia page_view z poprzednim zdarzeniem page_view, aby sprawdzić, czy prawidłowe są parametry referrera i lokalizacji strony.
[null,null,["Ostatnia aktualizacja: 2025-04-29 UTC."],[[["\u003cp\u003eThis guide helps developers track page views within single-page applications using Google Analytics 4.\u003c/p\u003e\n"],["\u003cp\u003eAccurate tracking involves counting views for each screen a user interacts with and ensuring correct referral data for user journey analysis.\u003c/p\u003e\n"],["\u003cp\u003eImplementation relies on leveraging browser history changes or custom events to trigger virtual page views for different screens within the application.\u003c/p\u003e\n"],["\u003cp\u003eBefore starting, ensure you have a Google Analytics 4 account and a Google tag implemented on your website.\u003c/p\u003e\n"],["\u003cp\u003eVerification involves enabling debug mode and confirming that new \u003ccode\u003epage_view\u003c/code\u003e events are triggered with updated page referrer and location data upon screen transitions.\u003c/p\u003e\n"]]],["Developers using Google Analytics to measure page views on single-page applications (SPAs) should count page views for each user-interacted screen and accurately track the page referrer. To implement this, they can trigger virtual page views via browser history changes using the History API's `pushState()` and `replaceState()` methods, or through custom events with the `DocumentFragment` object. After implementation, debug mode should be enabled to verify new `page_view` events for each virtual screen, ensuring referrer and location data updates correctly.\n"],null,["# Measure single-page applications\n\n\u003e This document is for developers who want to measure page views on their\n\u003e single-page application using Google Analytics.\n\n[Single-page applications](//developer.mozilla.org/en-US/docs/Glossary/SPA)\n(SPA) are websites that load an HTML document once and fetch any additional\ncontent using JavaScript APIs.\n\u003e Example: Suppose you have a form to acquire some leads. The form has three\n\u003e screens:\n\u003e\n\u003e - First screen to capture the customer information.\n\u003e - Second screen where customers indicate interest in certain services.\n\u003e - Third screen page to sign up for webinars related to the customer's interests.\n\nThe key to measuring page views from SPAs correctly is to count page views for\neach screen a user interacts with and get the page [referrer](//developer.%0Amozilla.org/en-US/docs/Web/API/Document/referrer) right, so you can correctly\ntrace the user journey.\n\nBefore you begin\n----------------\n\nThis page assumes that you already have:\n\n- A Google Analytics 4 account and property for your website. Learn how to\n [Set up Google\n Analytics](//support.google.com/analytics/answer/9304153).\n\n- A Google tag implemented on your website that fires when the page initially\n loads. Learn how to [Set up the Google\n tag](/analytics/devguides/collection/ga4/tag-options).\n\nImplement single-page application measurement\n---------------------------------------------\n\nTo implement accurate SPA measurement, use one of these methods to trigger a new\nvirtual page view:\n\n- Browser history changes (recommended): If your SPA uses the [History\n API](//developer.mozilla.org/en-US/docs/Web/API/History), specifically\n the `pushState()` and `replaceState()` method to update screens, use this\n option.\n\n- Custom events: If your website uses the [`DocumentFragment`](//developer.mozilla.org/en-US/docs/Web/API/DocumentFragment)\n object to render different screens, use this option.\n\nBrowser history implementation Custom event implementation\n\n\u003cbr /\u003e\n\nVerify your measurement setup\n-----------------------------\n\nTo verify your single-page application measures page views correctly:\n\n1. Enable debug mode for every tag in your SPA measurement setup. Learn how to\n [Monitor events in\n DebugView](//support.google.com/analytics/answer/7201382).\n\n2. Click through your single-page application. When you click to a new virtual\n screen, you should see a new `page_view` event in DebugView. Compare the\n `page_view` event parameters with the preceding `page_view` event to check\n if the page referrer and page location have been updated correctly."]]
