Update time: June 25, 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.
Enhanced Measurement Tracking SPA
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”:
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
