Stay organized with collections
Save and categorize content based on your preferences.
This document is for developers who want to measure page views on their
single-page application using Google Analytics.
Single-page applications
(SPA) are websites that load an HTML document once and fetch any additional
content using JavaScript APIs.
Example: Suppose you have a form to acquire some leads. The form has three
screens:
First screen to capture the customer information.
Second screen where customers indicate interest in certain services.
Third screen page to sign up for webinars related to the customer's interests.
The key to measuring page views from SPAs correctly is to count page views for
each screen a user interacts with and get the page referrer right, so you can correctly
trace the user journey.
Before you begin
This page assumes that you already have:
A Google Analytics 4 account and property for your website. Learn how to
Set up Google
Analytics.
A Google tag implemented on your website that fires when the page initially
loads. Learn how to Set up the Google
tag.
Implement single-page application measurement
To implement accurate SPA measurement, use one of these methods to trigger a new
virtual page view:
Browser history changes (recommended): If your SPA uses the History
API, specifically
the pushState() and replaceState() method to update screens, use this
option.
Custom events: If your website uses the DocumentFragment
object to render different screens, use this option.
Verify your measurement setup
To verify your single-page application measures page views correctly:
Click through your single-page application. When you click to a new virtual
screen, you should see a new page_view event in DebugView. Compare the
page_view event parameters with the preceding page_view event to check
if the page referrer and page location have been updated correctly.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-09 UTC."],[[["This guide helps developers track page views within single-page applications using Google Analytics 4."],["Accurate tracking involves counting views for each screen a user interacts with and ensuring correct referral data for user journey analysis."],["Implementation relies on leveraging browser history changes or custom events to trigger virtual page views for different screens within the application."],["Before starting, ensure you have a Google Analytics 4 account and a Google tag implemented on your website."],["Verification involves enabling debug mode and confirming that new `page_view` events are triggered with updated page referrer and location data upon screen transitions."]]],[]]
