Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Tài liệu này dành cho các nhà phát triển muốn đo lường số lượt xem trang trên ứng dụng một trang bằng Google Analytics.
Ứng dụng trang đơn (SPA) là những trang web tải một tài liệu HTML một lần và tìm nạp mọi nội dung bổ sung bằng API JavaScript.
Ví dụ: Giả sử bạn có một biểu mẫu để thu nạp một số khách hàng tiềm năng. Biểu mẫu có ba màn hình:
Màn hình đầu tiên để thu thập thông tin khách hàng.
Màn hình thứ hai, nơi khách hàng cho biết họ quan tâm đến một số dịch vụ nhất định.
Trang màn hình thứ ba để đăng ký tham gia hội thảo trên web liên quan đến mối quan tâm của khách hàng.
Để đo lường chính xác số lượt xem trang từ SPA, bạn cần tính số lượt xem trang cho mỗi màn hình mà người dùng tương tác và lấy đúng đường liên kết giới thiệu của trang để có thể theo dõi chính xác hành trình của người dùng.
Trước khi bắt đầu
Trang này giả định rằng bạn đã:
Tài khoản và tài sản Google Analytics 4 cho trang web của bạn. Tìm hiểu cách Thiết lập Google Analytics.
Một thẻ Google được triển khai trên trang web của bạn sẽ kích hoạt khi trang tải lần đầu. Tìm hiểu cách Thiết lập thẻ Google.
Triển khai tính năng đo lường ứng dụng trang đơn
Để triển khai tính năng đo lường SPA chính xác, hãy sử dụng một trong các phương thức sau để kích hoạt một lượt xem trang ảo mới:
Thay đổi nhật ký duyệt web (nên dùng): Nếu SPA của bạn sử dụng API Lịch sử, cụ thể là phương thức pushState() và replaceState() để cập nhật màn hình, hãy sử dụng tuỳ chọn này.
Sự kiện tuỳ chỉnh: Nếu trang web của bạn sử dụng đối tượng DocumentFragment để hiển thị nhiều màn hình, hãy sử dụng tuỳ chọn này.
Xác minh chế độ thiết lập tính năng đo lường
Cách xác minh rằng ứng dụng trang đơn của bạn đo lường chính xác số lượt xem trang:
Nhấp vào ứng dụng trang đơn. Khi nhấp vào một màn hình ảo mới, bạn sẽ thấy một sự kiện page_view mới trong DebugView. So sánh các thông số sự kiện page_view với sự kiện page_view trước đó để kiểm tra xem liệu liên kết giới thiệu trang và vị trí trang đã được cập nhật chính xác hay chưa.
[null,null,["Cập nhật lần gần đây nhất: 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."]]
