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.
Tracking SPA with 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.
Configuration Steps
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:
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.
