Measure single-page applications

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:

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

    An image showing page views setting

  5. Save the changes.

Verify your measurement setup

To verify your single-page application measures page views correctly:

  1. Enable debug mode for every tag in your SPA measurement setup. Learn how to Monitor events in DebugView.

  2. 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.