Tracking Single Page Applications in GA4（4 ways）

Update time: June 26, 2025

What is a Single Page Application (SPA)

A Single Page Application (SPA) is a web application where all necessary HTML, JavaScript, and CSS code is fetched at once when first loaded, or content is loaded dynamically based on user interaction without reloading the entire page. SPA implements dynamic content updates through JavaScript frameworks (such as React, Angular, Vue.js, etc.), and usually relies on the browser History API or DocumentFragment to manage page state and URL changes.

In traditional websites, each page load triggers the page_view event of GA4, but in SPA, since the page does not refresh, GA4 requires additional configuration to correctly record “virtual page views” and other user interactions.

Challenges of GA4 tracking SPA

Common tracking issues faced by GA4 in SPA include:

• Page views not recorded: Since the page does not reload, GA4‘s default page_view event may only be triggered on the first load, and subsequent changes to the page content will not be automatically recorded.
• Inaccurate URLs and Page Titles: SPAs may update URLs through pushState, but GA4 uses document.location.pathname by default, which may not capture the full URL or correct page title.
• Rogue Referral: If not configured correctly, SPAs may cause session data to be broken or referrer data to be incorrect, affecting user journey analysis.
• Event duplication or omission: Automatic tracking (such as enhanced measurement) may cause page view events to be counted repeatedly or fail to trigger in some cases.

How to determine whether your website is SPA

You can click to visit page B from page A in the preview mode of GTM, and see whether Tag Assistant reloads the page during this process. If it reloads, then it is not a single-page application. If it does not reload and a lot of “History” appears, it is a single-page application.

Before previewing, you need to open this trigger condition first. In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「History Change」，Name it “History Change “, and make the following settings:

Then click Preview, click on any page, and see the Tag Assistant:

If “History” appears in Tag Assistant, it means it is a single-page application.

Method 1：Enhanced Measurement

GA4’s Enhanced Measurement feature is one of the easiest ways to track SPAs.

It is enabled by default and automatically captures events such as page views, scrolls, clicks, file downloads, etc. For SPAs, Enhanced Measurement detects URL changes by listening to the browser’s History API (pushState and replaceState) and triggers a page_view event.

Check Whether it is enabled

Click “Enhanced Measurement” in the Web stream details:

Click “Show advanced settings ” and check “Change pages based on browser history time”:

Summary

• Advantages：Easy to use: No additional coding required.
• Disadvantages：Inaccurate URLs and Page Titles: SPAs may update URLs through pushState, but GA4 uses document.location.pathname by default, which may not capture the full URL or correct page title.
• Applicable scenarios：Enhanced Measurement is suitable for simple SPAs, where URL changes are directly related to page content updates, and there is less need for customization of page titles and parameters

Read More: Tracking Single Page Applications (SPA) with Enhanced Measurement on GA4

Method 2：History Change

When Enhanced Measurement does not meet your needs, you can use Google Tag Manager (GTM)’s History Change trigger to track SPA page views. The History Change trigger listens to the browser’s popstate event or the URL change of the History API, triggering the GA4 page_view event.

Step 1：Set Up the Trigger(History Change)

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「History Change」，Name it “History Change “, and make the following settings:

Then click Preview, click on any page, and see the Tag Assistant:

Step 2：Set Up the Data Layer Variable

Click 「History」, then look at the information in API Call, mainly find oldUrl and newUrl:

oldUrl is the previous page, which is the Referral, and newUrl is the current page, which needs to be obtained using Data Layer Variable.

In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv-oldUrl”, and then set as follows:

Use the same method to set dlv-newUrl:

Step 3：Set Up the Tag

We first need to set up a Google Tag. There is no need to set trigger conditions.

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics」——「Google Tag」，Name it “GA4 update”, and make the following settings:

Note: This tag does not require a trigger condition.

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics」——「Google Analytics: GA4 Event」，Name it “GA4-Page View Event”, and make the following settings:

GA4 update is triggered before GA4-Page View Event and is mainly used to update configuration parameters:

How to Track Normal Page Loads

If normal page loads do not trigger “History”, then you need to configure a separate Google Tag to track, just the normal GA4 page tracking, such as:

If a normal page load triggers “History”, then the normal page will be merged into the GA4-Page View Event to trigger tracking, but we still need to trigger the Google Tag, load the basic configuration, but do not send the page_view event, just set send_page_view to false:

Summary

• Advantages
  • More flexibility: allows custom page_location and page_referrer, suitable for complex SPA.
  • No need for extensive development work: only need to configure GTM, no need to modify website code

• Disadvantages
  • Inaccurate URLs and Page Titles: SPAs may update URLs through pushState, but GA4 uses document.location.pathname by default, which may not capture the full URL or correct page title.

• Applicable scenarios
  • The History Change trigger condition is suitable for SPAs whose URLs change frequently and require custom page parameters, but still rely on the History API.

Read More：Tracking Single Page Applications (SPA) with History Change

Method 3：Delayed Send(History Change&dataLayer.push)

Delayed sending is an optimization of Tracking Single Page Applications (SPA) with History Change, which can solve the problem of inaccurate URL and page title.

The idea is to delay 500ms when loading the page/History Change, wait for the page to open, and then execute js to obtain the accurate Page URL and Page Title of the current page, and then send it out through dataLayer.push.

Step 1：Set Up the Trigger(History Change)

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「History Change」，Name it “History Change “, and make the following settings:

Then click Preview, click on any page, and see the Tag Assistant:

Step 2：Set Up Delayed Send

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Custom HTML」，Name it “SPA-Delayed Send”, and make the following settings:

The purpose of this configuration is to delay when History Change occurs, ensure that the new page is opened, obtain the accurate webpage title, and then send the data through dataLayer.push.

<script>
setTimeout(function() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'Pageview', 
    pageUrl: window.location.href, 
    pagePath: window.location.pathname, 
    pageTitle: document.title
  });
}, 500);

</script>

Step 3：Set Up the Data Layer Variable

In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv—pagePath”, and then set as follows:

Use the same method to set dlv-pageTitle and dlv-pageUrl.

Step 4：Set Up the Custom Event

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Custom Event—Pageview “, and make the following settings:

Step 5：Set Up the Tag

We first need to set up a Google Tag. There is no need to set trigger conditions.

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics」——「Google Tag」，Name it “GA4 update”, and make the following settings:

Note: This tag does not require a trigger condition.

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics」——「Google Analytics: GA4 Event」，Name it “GA4-Page View Event”, and make the following settings:

GA4 update is triggered before GA4-Page View Event and is mainly used to update configuration parameters:

Read More：Tracking SPA with Delayed Send(History Change&dataLayer.push)

Summary

• Advantages
  • More flexibility: allows custom page_location and page_referrer, suitable for complex SPA.
  • No need for extensive development work: only need to configure GTM, no need to modify website code

• Disadvantages
  • Data loss: If the delay is too long, the user will leave during the delay and quickly access the next page, which may cause data loss; if the delay is too short, there will still be problems with inaccurate URLs and page titles.

• Applicable scenarios
  • The History Change trigger condition is suitable for SPAs whose URLs change frequently and require custom page parameters, but still rely on the History API.

Method 4：dataLayer.push

For complex SPAs or applications that do not rely on the History API, the most reliable tracking method is for developers to help push custom events through the dataLayer.push method.

Developers can actively push page_view events to the data layer when the SPA’s route changes or content is updated, and GTM will trigger GA4 tags based on these events.

Step 1：dataLayer.push sends data

The data structure sent by the page is as follows. Each page needs to be sent in this way. This step needs to be implemented by the developer:

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'Pageview',
 'pageUrl': 'https://www.example.com/something/contact-us',
 'pagePath': '/something/contact-us',
 'pageTitle': 'Contact us' 
 });
</script>

Step 2：Set Up the Data Layer Variable

In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv—pagePath, and then set as follows:

Use the same method to set dlv-pageTitle and dlv-pageUrl.

Step 3：Set Up the Triggers

In GTM , click「Tags」——「New」——「Choose a triggers type to begin setup…」——「Custom Event」，Name it “Custom Event—Pageview”, and make the following settings:

Step 4：Set Up the Tag

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics」——「Google Tag」，Name it “GA4 Basic Tracking”, and make the following settings:

Summary

• Advantages
  • Greater flexibility and accurate data tracking.

• Disadvantages
  • Requires a lot of development work

• Applicable scenarios
  • This method is applicable to all SPAs and is the recommended method for tracking SPAs.

Summary