[null,null,["最后更新时间 (UTC):2025-04-29。"],[[["\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."]]