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

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 initial load, so you only see one page view recorded in Google Analytics reports.

 
Get the E-Book (50 Pages)
 
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 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.

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

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

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:

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

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.

In traditional websites, the behaviour 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.

This is not the case in a single page application. You would only see one 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 Analytic 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.

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

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

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

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

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

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:

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

Now, let’s validate if the inbuilt feature enabled in 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:

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

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

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

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

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

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

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.

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.

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

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

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

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

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

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’.

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

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

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

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

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

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

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-13: Navigate to GTM and click on ‘Variables’ from the left hand side.

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

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

Step-16: Enter window.location.href in the configuration, as shown below:

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

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

Step-19: 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

#

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

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

Custom event implementation through the data layer

For this method, you will need developer help. Ask your developer to push 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.

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

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

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:

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

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

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

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

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

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:

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

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

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.

How to validate data in Google Analytics 4 DebugView

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

Step-2: Click on ‘DebugView’ in the left-hand side menu at the bottom of the page.

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

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

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.

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 Beyond
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 !!