Measure single-page applications

AI-generated Key Takeaways

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

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