AI-generated Key Takeaways
-
This document provides guidance for developers on measuring page views for single-page applications (SPAs) using Google Analytics.
-
SPAs load content dynamically, requiring a different approach to tracking page views for accurate user journey analysis.
-
To measure SPA page views correctly, you need to count page views for each screen interaction and accurately track the referrer.
-
Implementing SPA measurement involves triggering virtual page views through either browser history changes or custom events.
-
Verifying your SPA measurement setup requires enabling debug mode and checking for
page_view
events in DebugView as you navigate the application.
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()
andreplaceState()
method to update screens, use this option.Custom events: If your website uses the
DocumentFragment
object to render different screens, use this option.