Single Page Applications or SPA websites are a norm these days. In Univeral Analytics you required a special trigger called the "History" trigger to track such sites. However, in GA4 things are different. In this post, you will learn how to track SPAs in GA4 with or without Google Tag Manager. But before we look at GA4 and GTM, let's understand what SPA is.
What is A single-page application (SPA)?
According to Wikipedia:
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
Developer building web applications/web site using AngularJS, Ember.js, ExtJS, Knockout.js, Meteor.js, React, Vue.js, and Svelte likely develop the SPA sites.
SPA never reloads a new page but the browser history changes as you browse through the site.
Since a new page never loads, the default Page View trigger used in Univeral Analytics does not work.
If you used Google Tag Manager then you had to use the "History" trigger in GTM to track SPAs.
However, GA4 works in a different way as explained below.
Tracking SPA in GA4
As you might already know GA4 tracks several events automatically, these events are called "Enhanced Measurements". You can disable these if you would like but by default, they are enabled. One of the automatically tracked events is "page_view", which tracks the Page Views on your site (see the top one).
Page view tracking in GA4 is also configured to track SPA. Click on "Show advanced settings" under Page views and you will see the following image.
As you can see there is a checkbox labeled "Page changes based on browser history events", which is enabled by default. So anytime the history changes GA4 records a new page view.
As a result GA4 automatically tracks any history changes as a new page.
You don't need to enable the History trigger in Google Tag Manager.
What if you enable History Trigger in Google Tag Manager? Will it double-count the pages?
If you set up History trigger in Google Tag manager and fire GA4 config Tag using history trigger then GA4 will only use one history change, so you won't be double counting page views.
I hope this clarifies SPA tracking in GA4. Stay tuned as we will be adding more content on this page.
Download Free GA4 eBooks
Google Analytics 4 help and support
We are here to help you with all your Google Analytics needs. Our team can get you up and running in no time and also train you and your team to save you a lot of time so that you can focus on driving the business outcomes rather than configuring Google Analytics 4.
Consulting - Reach out to us for more details.