Measure single-page applications

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() 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.

Browser history implementation Custom event implementation

Browser history change implementation

Enable enhanced measurement in GA4

To measure page_views automatically based on browser history:

1. Open Google Analytics

2. In Admin, under Data collection and modification, click Data Streams > Web.

3. Under Enhanced measurement, slide the switch On to enable all options.

4. Click to edit individual options. Under Page Views, click Show advanced settings. Make sure to enable both Page loads and Page changes based on browser history events.

   

5. Save the changes.