Measure single-page applications

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

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.