Measuring single-page applications (SPA) with Google Analytics 4 and Google Tag Manager

Share this article

Tracking page views on a single-page application is not as straightforward as it is on a traditional website.

Most analytics tools, including Google Analytics, are designed to detect a new page when the browser loads a new document. In a single-page application, however, content often changes dynamically without a full page reload, so page views may not be tracked correctly unless the setup accounts for that behavior.

In GA4, page views can be tracked automatically in some SPAs through enhanced measurement and browser history changes, but not in every implementation.

What is a single-page application (SPA)?

A single-page application (SPA) is a website that loads the resources needed for navigation during the initial page load. As the user interacts with the site, the content is updated dynamically within that same page.

The main measurement challenge with this type of site comes from the way the content is loaded. On a traditional website, a new page loads each time the user clicks on a link, and the Analytics tracking code runs again on each page load. In a SPA, however, the page itself does not fully reload, so the tracking code usually fires only on the initial load unless the implementation is adapted to track those virtual page changes properly.

How to measure a SPA with Google Tag Manager and GA4

As mentioned above, traditional page view tracking is based on full page loads, which is why SPAs need a different approach.

In Google Analytics 4, enhanced measurement includes an option that can detect page changes based on browser history events. If the SPA uses the History API in a standard way, this may be enough to track virtual page views correctly. If not, an additional setup in Google Tag Manager may be needed.

Tracking page views with GA4 enhanced measurement

GA4 enhanced measurement automatically tracks several interactions, including page views.

Within the page view settings, there is an option that allows GA4 to detect page changes based on browser history events. To check whether this is enabled, go to the web data stream settings in GA4, open the enhanced measurement settings, and review the page view configuration. There, page changes based on browser history events should be enabled.

Once this is enabled, the next step is to open Google Tag Manager Preview mode and navigate through the site. If the implementation is compatible, you should start seeing History Change events (gtm.historyChange-v2) appear as you move between sections of the SPA.

From there, it is worth checking both GTM Preview and GA4 DebugView to confirm that page_view events are being sent correctly and that parameters such as page_location, page_title, and the referrer update properly on each virtual page change.

If everything works as expected, no additional setup is needed and GA4 will be able to track page views on the SPA correctly. If it does not work, the next option is to configure the tracking manually through Google Tag Manager.

Using the History Change trigger in Google Tag Manager

Inside Google Tag Manager, you can create a History Change trigger and set it to fire on all history changes.

After that, go into Preview mode and interact with the site again. If the SPA updates the URL through browser history changes, you should see gtm.historyChange events appear during navigation.

At that point, it is important to check whether each virtual page change causes one history event or several. If multiple history events are fired for the same navigation, the trigger may need to be refined so page views are not duplicated. This matters because GA4 can generate duplicate page views if manual page view tracking is added on top of automatic page view measurement without proper control.

Finally, page view events need to be sent to GA4 from Google Tag Manager. The exact configuration depends on how the SPA updates its URLs and content, but the key point is that each virtual screen change should send a new page_view with the correct page location and title. If page views are being sent manually, the automatic page view behavior should be reviewed carefully to avoid duplication.

If none of these methods work, you’ll need to ask a developer to send a push to the data layer every time a user accesses a page in the SPA. Then, you can use this push to the data layer as a trigger in Google Tag Manager and send the information to Google Analytics 4.

In short, measuring a SPA in GA4 requires making sure that each virtual page change is tracked as a new page view. In some cases, enhanced measurement is enough. In others, Google Tag Manager needs to handle the history changes directly so the page view events are sent correctly.


Share this article
raul revuelta seo y marketing digital

About me

Raúl Revuelta

Digital marketing consultant specialized in SEO, CRO, and digital analytics. On this blog, I share content about these areas and other topics related to digital marketing, always with a practical, business-focused approach. You can also find me on LinkedIn and X.

Leave a Comment

Your email address will not be published. Required fields are marked *

Would you like to talk about your project?

Scroll to Top