Single page applications (SPAs) are becoming increasingly popular, but tracking pageviews on these types of applications can be challenging. With the latest version of Google Analytics, Google Analytics 4 (GA4), tracking pageviews on SPAs is made easier. In this article, we will discuss the best way to track pageviews on a single page application with GA4 and Google Tag Manager (GTM), specifically focusing on custom pageview events, history change instead of page view triggers.
Custom event instead of GTM “All pages” standard trigger
The traditional way of tracking pageviews in GA4 is by using the built-in pageview event. However, when it comes to SPAs, traditional pageview tracking might not be sufficient. That’s why we can use a custom pageview event.
You can instruct your developer to push a virtualPageview event into the data layer when the website loads, and when the URL changes. Then, use the virtualPageview event as a trigger instead of the standard “All Pages” GTM trigger.
window.dataLayer = window.dataLayer || []; window.dataLayer.push({
'event': 'virtualPageview',
'pageTitle': 'Current Page title',
'pageURL': 'https:// _current_page_url_'
});
History change for GA4 page_view tracking
Another way to track pageviews on a SPA is by using history change instead of a pageview trigger. History change triggers are GTM triggers that fire when the URL of the page changes. This can be done by listening to the browser’s popstate event, which fires when the user navigates through the browser’s history. When a history change trigger fires, you can send a virtual pageview hit to GA4. This approach can be useful in situations where the built-in pageview event might not be sufficient.
It’s important to test the implementation before going live with your tracking, by checking the GA4 real-time report and verifying that the data is being collected correctly. As the website evolves, you may need to add or remove triggers, or change the way data is collected. By keeping an eye on your tracking, you can ensure that you’re always getting accurate and useful data.
How I set it up GA4 via GTM
In order to track pageviews on a SPA, the GA4 configuration tag is first fired with an “All Pages” trigger when the website first loads. However, when navigating to other pages within the SPA, this trigger does not fire again.
To resolve this issue, a GA4 event tag with the “page_view” event name is created and a history change trigger is used for this event. This ensures that the GA4 event tag is fired every time the user navigates to a different page within the SPA, allowing for accurate tracking of pageviews.
It is important to note that the GA4 configuration tag should only be fired once, as firing it multiple times can cause issues with the data. A “Once per Page” or “Once per Session” trigger can be used for this tag to ensure it is only fired once.
Additionally, the implementation should be tested by checking the GA4 real-time report and verifying that the data is being collected correctly. As the website evolves, adjustments to the triggers or changes to the way data is collected may be necessary. By constantly monitoring the tracking, accurate and useful data can be obtained.
In conclusion, using a GA4 event tag with a history change trigger, along with the GA4 configuration tag set to fire only once, is an effective method for tracking pageviews in a single page application using GA4 and GTM. This approach allows for accurate tracking of pageviews and valuable insights into user behavior and website performance.
