How to track single page apps in Google Analytics 4 (GA4)

Table of contents for how to track single-page apps in Google Analytics 4 (GA4)

  1. Introduction to single-page applications
  2. How to identify if your website is a single-page application
  3. Different methods of tracking SPAs in GA4
  4. Tracking using enhanced measurement in GA4
  5. Tracking using history change trigger in GTM
  6. Custom event implementation through the data layer
  7. How to validate data in the Google Analytics 4 debug view
  8. Conclusion
  9. FAQs

Introduction to single-page applications

Single-page applications (SPAs) are web-based applications or websites that load all the content required for the page on the initial load.

As the users interact with the website, subsequent content is loaded dynamically, which means there is no refresh and the Google Analytics tags fire only once. The analytics on normal websites work every time the page refresh happens, and page views get sent to Google Analytics reports.

Since there is no refresh happening for SPAs, there is no pageview if the users scroll on the website. In some cases, you will notice that the URL will change, and has the hash fragment, but then the GA snippet is loaded only on the initial load, so you only see one (single) page view recorded in Google Analytics reports.

62 point checklist 
Get the E-Book (50 Pages)
Google Analytics 4 thumb 
Get the FREE E-Book (50+ Pages)

How to identify if your website is a single-page application

To understand the steps to identify if your website is a single-page application, when you scroll through the page you will notice that the hash fragment is being added to the URL, but there is be no page load or page refresh happening when you scroll through the page.

Another way of checking if you are dealing with SPA is through GTM preview mode.

Step-1: Log in to your Google Tag Manager account.

Step-2: Click on ‘Preview’ on the top right-hand side to enter preview mode.

preview mode

Step-3: A new tab will open with Tag Assistant in the URL name. Enter the website URL to begin previewing the GTM container.

tag assistant preview mode

Step-4: Enter the website URL- https://www.example.com/, making sure that the URL starts with “https” and click on ‘Connect’.

Tag manager preview mode

Step-5: Once you click on ‘Connect’, the website is now in preview and debug mode. You should notice the query string in the URL is gtm_debug=x, as shown below:

gtm debug enabled

Step-6: Additionally, in the Tag Assistant tab you will see that the GTM container is connected and is now in preview mode.

preview mode connected

Step-6: In preview mode, you will see only one tag being fired, highlighted in yellow, as below. Even if you scroll through the page, there wouldn’t be any tags in the console.

tag summary 1

In traditional websites, the behavior is different. Let us check for a normal website and see how it works in GTM preview mode.

When you scroll on the website and navigate to different pages, in preview mode you can see two tabs, highlighted in green, this gets triggered every time the user navigates to different pages.

This happens because every time a user navigates to other pages on a website, the page would be refreshed.

preview mode tags 1

This is not the case in a single-page application. You would only see one (single) page view, which we have discussed above.

Different methods of tracking SPAs in GA4

However, this issue with SPA’s can be resolved in three different ways. Below are the methods that we can implement to track pageviews for single-page applications.

  1. Using enhanced measurement in GA4
  2. History change trigger in GTM
  3. Custom event implementation through the data layer

Using enhanced measurement in GA4

Many web tracking solutions do not work well with single-page applications as they are designed in a way where tags work only when a page refresh happens. However, with Google Analytics 4, we have built-in pageview tracking through enhanced measurement.

This may not work perfectly for all single-page applications. In such cases, we might use an additional configuration in Google Tag Manager.

So, let’s see how to enable inbuilt tracking for single-page applications using Google Analytics 4.

Steps to implement SPA tracking in GA4 using enhanced measurement:

Step-1: Log in to your GA4 account.

Step-2: Click on the ‘Admin’ section from the left-hand side.

Admin Link

Step-3: Click on ‘Data streams’ under the ‘Property’ section.

data streams

Step-4: Select ‘Data streams’ to view the web stream details.

data stream created

Step-5: In the web stream details, click on the gear icon in the ‘Enhanced measurement’ section.

enhanced measurment settings

Step-6: A pop-up on the right-hand side will appear. Click on ‘Show advanced settings’, under ‘Page Views’:

pageview advanced settings

Step-7: Enable ‘Page changes based on browser history events’, as shown below:

Browser page history events

Step-8: In some cases, the default tracking such as scroll tracking, site search and outbound tags may not work properly, so make sure you disable them:

Enhance measurement

Step-9: Click on ‘Save’ on the top right-hand side to save the changes.

save changes

Now, let’s validate if the inbuilt feature enabled in the GA4 property is tracking pageviews on single-page applications through GTM preview mode. Make sure that a GA4 page view tag has been created in GTM to test our implementation.

If you have not created a GA4 page view tag, follow the below steps:

Step-10: Navigate to your Google Tag Manager account and click on ‘Tags’ from the left-hand side:

GTM Tags

Step-11: Click on ‘New’ to create a new event-based pageview tag:

New GTM tag

Step-12: From the tag type, select ‘Google Analytics:GA4 Configuration’:

GA4 Tag type

Step-13: Enter the measurement ID copied from your GA4 property. (Admin-> data streams->copy the measurement ID from GA4 property).

measurment ID

Step-14: Add the ‘All Pages’ trigger to the tag created.

All pages trigger

Step-15: Now, click on ‘Save’ to save the tag.

Save the tag

Step-16: Click ‘Preview’ on the top right-hand side to enable preview mode.

preview mode 1

Step-17: Enable preview mode on the website, as we discussed earlier, by providing the URL of the website. If you notice multiple history events in preview mode when you scroll on your single-page application, as shown below, then it means the inbuilt history change is working for the single-page application.

History Trigger Event in Preview mode

However, if you are noticing only a single history event in GTM preview mode, then it means your inbuilt history change is not working and you might have to use a history change trigger in Google Tag Manager to implement tracking on your SPA.

Tracking using the history change trigger in GTM

Let’s see how we can use the GTM history change trigger to track single-page applications.

Follow the below steps to track SPAs in GTM.

Step-1: Log in to your Google Tag Manager account.

Step-2: Select the container name in which you would like to implement tracking for SPA.

select container

Step-3: Click on ‘Triggers’ from the left-hand side.

GTM Trigger

Step-4: Click on ‘New’ from the right-hand side section, to create a new trigger:

new trigger type 1

Step-5: Click on the pencil icon in the trigger configuration to choose the trigger type.

trigger configuration 1

Step-6: Select ‘History change’ as the trigger type under the ‘Other’ section.

history change custom event

Step-7: Name this trigger ‘History Change Trigger’:

history change trigger config

Step-8: The trigger configuration will look like the one below where you have the option to trigger on ‘all history changes’ or ‘some history changes’. For now, we will select ‘all history changes’.

history change trigger configuration

Step-9: Also, make sure that all the history change variables in GTM are enabled from the inbuilt variables.

history variables

Step-10: Add this trigger to the GA4 event tag in GTM.

Ga4 history setup

Now, let us check if the history change trigger in GTM is working for tracking our single-page application.

Step-11: Enable preview mode in the GTM container.

preview mode 1

Step-12: Navigate to the website and scroll through the page.

Step-13: Check in preview mode if the GA event tag is firing for all the history changes.

GA4 Event in preview mode

Note: The URL for all the history changes will be the same. For example, let’s say your website URL is https://www. xyz.com and when you scroll through the page it changes to https://www. xyz.com#aboutus; in preview mode, you will see https://www. xyz.com for all history changes.

To capture the complete URL after the hash #, we can use GTM variables.

Step-14: Navigate to GTM and click on ‘Variables’ from the left-hand side.

Variables in GTM 3

Step-15: Click on the ‘New’ from the user-defined variables.

new user defined variables

Step-16: Select ‘JavaScript Variable’ from the list of page variables, as shown below:

javascript variable

Step-17: Enter “window.location.href” in the configuration, as shown below:

window.location

Step-18: Now, navigate to GA4 event-based tag, add this variable in the event parameters.

event parameter

Step-19: Enable preview mode in the GTM container from the right-hand side.

preview mode 1

Step-20: Scroll on the website to track the activity. Now navigate to the GTM preview mode tab and see if the complete URL is captured in the GA tag.

Note that in the below screenshot, the complete URL is captured in the event parameters in page location along with #whoPage

tag summary
#

Step-21: Click on ‘Submit’ on the left-hand side of the GTM console.

submit changes

Step-22: Click on ‘Publish’ to push our changes to track single-page applications.

publish changes

Custom event implementation through the data layer

For this method, you will need developer help. Ask your developer to push the “datalayer.push” code when the user navigates through the pages.

Below is the sample code snippet that the developer has to add on the page. pageUrl and pageTitle values should be dynamically populated.

 <script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
  'event': 'virtualPageview',
  'pageUrl': 'https://www.example.com/?page#contact-us',
  'pageTitle': 'Contact us' //some arbitrary name for the page/state
  });
 </script> 

Additionally, in your GTM container, you need to create a custom trigger and variables to capture the pageUrl and pageTitle values passed in the datalayer.

GTM configuration to fire the pageview for SPA using data layer method

Step-1: Navigate to the variables in the GTM and click on new user-defined variables.

Variables in GTM 3

Step-2: Click on ‘New’ from the user-defined variables.

new user defined variables

Step-3: Select ‘Data layer variable’ as the variable type.

Data Layer Variable 1

Step-4: Enter the name passed by the developer in the data layer variable section. We have to create two data layer variables, one for the page title and the other for the page URL, as shown below:

data layer variable

Step-5: Now, create a custom trigger in GTM, by clicking on ‘Triggers’ from the left-hand menu.

GTM Trigger

Step-6: Click on ‘New’ from the right-hand side section, to create a new trigger type, as shown below:

new trigger type 1

Step-7: Select ’Custom event’ as the trigger type.

custom event 1

Step-8: Name it as ‘virtualPageview’ and enable the tag to fire for all custom events.

virtual pageview

Step-9: Navigate to the GA4 page event tag, click on ‘Edit’. Now, click on ‘Add Row’ under the event parameters.

Add row in event parameter

Step-10: Add page location and page title in the parameters name and select the page URL and page title data layer variables we created and configure as shown below:

custom tag config

Step-11: Add the custom event trigger to this tag and save the tag.

virtual page view tag

Step-12: Enable preview mode in the GTM container by selecting ‘Preview’ from the right-hand side.

preview mode 1

Step-13: Scroll on the website to track the activity. Now navigate to the GTM preview mode tab and see if the page url and page title are captured correctly.

Step-14: Click on the publish the changes to push our changes to track single-page applications.

publish changes 1

How to validate data in Google Analytics 4 DebugView

Step-1: Log in to your Google Analytics 4 account.

Step-2: Click on the ‘Configure’ link in the left-hand menu.

Configure link

Step-3: Click on ‘DebugView’.

Debug View

Step-4: Click on ‘user_engagement’ or ‘page_view’ to see if the page location value is captured correctly in the reports.

user engagement in debug mode

Step-5: Select ‘page_location’ from the right-hand side parameters.

page location in debug view

You will see that the URL also includes the hash fragment.

Conclusion

Single-page applications require different implementation, as regular tracking will not work in their case.

First, identify if you are really dealing with a SPA and then use any of the three methods that we have discussed to enable tracking of the application.

If you are not sure which method to use then I would suggest going with the data layer method as it is the most robust method but does require developer help. If developer availability is limited, then go with a history change in GTM or enhanced measurement in GA4 property.

Frequently Asked Questions about single-page apps in Google Analytics 4 (GA4)

What are single-page apps in Google Analytics 4 (GA4)?

Single-page applications (SPAs) are web-based applications or websites that load all the content required for the page on the initial load.

As the users interact with the website, subsequent content is loaded dynamically, which means there is no refresh, and the Google Analytics tags fire only once. The analytics on normal websites work every time the page refresh happens, and page views get sent to Google Analytics reports.

Since there is no refresh happening for SPAs, there is no pageview if the users scroll on the website. In some cases, you will notice that the URL will change, and has the hash fragment, but then the GA snippet is loaded only on the initial load, so you only see one (single) page view recorded in Google Analytics reports.

What are the different methods of tracking SPAs in GA4?

Below are the methods that we can implement to track page views for single-page applications.
• Using enhanced measurement in GA4
• History change trigger in GTM
• Custom event implementation through the data layer

What is the best way to track single-page applications in Google Analytics 4?

Even though there are several methods to track single-page applications in GA4, but the best way is by using the data layer method as it is the most robust method but does require developer help. If developer availability is limited, then go with a history change in GTM or enhanced measurement in GA4 property.

Register for the FREE TRAINING...

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."



Here’s what we’re going to cover in this training…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

#5 The number 1 reason why conversion optimization is not working for your business.

#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.



   

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!