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

Last Updated: November 15, 2022

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.

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.

#1 Google Analytics 4 Intro

  1. What is GA4 (Google Analytics 4) – The Apps + Web Property?
  2. Key Benefits of Using Google Analytics 4 (GA4)
  3. Setup GA4 – Upgrade to GA4 – Implementation Guide
  4. Google Analytics 4 (GA4) vs Universal Analytics – What is the Difference?
  5. GA4 vs GA4 360 – Pricing, Limits, Billing and More
  6. Google Analytics 4 Training & Tutorial with FREE GA4 ebook

#2 Google Analytics 4 Property

  1. Google Analytics Account Hierarchy (Structure Explained)
  2. Understanding Google Analytics Measurement ID (GA4)
  3. Google Signals GA4 – See Demographics (Gender, Age) in Google Analytics 4
  4. Using the GA4 (Google Analytics 4) Test Property
  5. Google Analytics 4 Sub Properties Tutorial
  6. Roll up Property in Google Analytics 4 (GA4) – Tutorial

#3 Google Analytics 4 Integrations

  1. How to connect GA4 (Google Analytics 4) with Google Data Studio
  2. How to link GA4 (Google Analytics 4) with Google Ads
  3. How to link Google Search Console to Google Analytics 4 (GA4)
  4. How to Install Google Analytics 4 on Shopify
  5. GA4 Firebase Integration – Correctly Add App Data Streams to GA4 Property

#4 Google Analytics 4 Events

  1. GA4 (Google Analytics 4) Event Tracking Setup Tutorial
  2. Understanding Event Parameters in Google Analytics 4 (GA4)
  3. Recommended Events in Google Analytics 4 (GA4)
  4. Enhanced Measurement Events in Google Analytics 4 (GA4)
  5. Automatically Collected Events in Google Analytics 4 (GA4)
  6. How to Set Up GA4 Custom Events via Google Tag Manager
  7. Events Report in Google Analytics 4 (GA4)
  8. How to Rename Events in Google Analytics 4 (GA4)
  9. How to Use Google Analytics 4 Event Builder
  10. GA4 Form Interactions Tracking – Enhanced Measurement

#5 Google Analytics 4 Conversions

  1. Google Analytics 4 Conversion Tracking Guide – GA4 Goals
  2. How to Import Conversions from GA4 Property to Your Google Ads account
  3. GA4 Conversion Rate – How to find it and use it

#6 Google Analytics 4 Dimensions

  1. GA4 (Google Analytics 4) Dimensions Tutorial
  2. GA4 (Google Analytics 4) Custom Dimensions Tutorial
  3. GA4 User Properties (User Scoped Custom Dimensions) – Tutorial
  4. Event Scoped Custom Dimensions in GA4 – Tutorial

#7 Google Analytics 4 Metrics

  1. GA4 (Google Analytics 4) Metrics Tutorial with Free Google Analytics 4 Ebook
  2. GA4 (Google Analytics 4) Custom Metrics Tutorial
  3. What are Predictive Metrics in Google Analytics 4 (GA4)

#8 Google Analytics 4 Ecommerce

  1. GA4 (Google Analytics 4) Ecommerce Tracking via GTM – Tutorial

#9 Google Analytics 4 Specialized Tracking

  1. GA4 (Google Analytics 4) Enhanced Measurement Tracking Tutorial
  2. Cross Domain Tracking in GA4 (Google Analytics 4) Setup Guide
  3. GA4 Site Search – Tracking Site Search in Google Analytics 4
  4. GA4 (Google Analytics 4) Scroll Tracking Tutorial
  5. Self-referral Google Analytics 4 – Referral exclusion GA4
  6. GA4 (Google Analytics 4) Data Import Tutorial
  7. Google Analytics 4 Content Grouping – Create Content Groups in GA4
  8. How to Track Single Page Apps in Google Analytics 4 (GA4)
  9. utm_source, utm_medium, utm_campaign Parameters – GA4 (Google Analytics 4)

#10 Google Analytics 4 filters

  1. GA4 filters – Understanding Data Filters in Google Analytics 4
  2. How to Create and Test Filters in Google Analytics 4 (GA4)?
  3. Exclude Internal Traffic in GA4 (Google Analytics 4) via IP Filter

#11 Google Analytics 4 Explorations

  1. Free Form Report in GA4 (Google Analytics 4) – Exploration Report
  2. How to Use the User Lifetime Report in Google Analytics 4 (GA4)
  3. How to Use Path Exploration Report in GA4 (Google Analytics 4) – Path Analysis
  4. How to Use Segment Overlap Report in Google Analytics 4 (GA4)
  5. How to Use the Funnel Exploration Report in GA4 (Google Analytics 4) – Funnel Analysis
  6. Cohort Exploration Report in Google Analytics 4 (GA4)
  7. How to Create Landing Pages Report in GA4 (Google Analytics 4)
  8. How to Create Google Ads report in GA4 (Google Analytics 4)
  9. How to Segment GA4 Data by Data Stream
  10. Organic Search Traffic Analysis in GA4 – Complete Guide
  11. Google Analytics 4 (GA4) Outbound Links Tracking
  12. How to Track Email Campaigns and Traffic in GA4 

#12 Google Analytics 4 Advanced

  1. Understanding Google Analytics 4 Sessions
  2. GA4 (Google Analytics 4) Measurement Protocol Tutorial
  3. How to Build Comparisons (Advanced Segments) in Google Analytics 4 (GA4)
  4. Understanding Automated Insights in Google Analytics 4 (GA4)
  5. Understanding Channel Groupings in Google Analytics 4 (GA4)
  6. Understanding Data Sampling in Google Analytics 4 (GA4)

#13 Google Analytics 4 Reports

  1. How to Create Custom Insights in Google Analytics 4 (GA4)
  2. How to Use Debug View Report in Google Analytics 4 (GA4)

#14 Google Analytics 4 Attribution

  1. Guide to Attribution Models in GA4 (Google Analytics 4)
  2. How to Change Attribution Models in GA4 (Google Analytics 4)?
  3. GA4 (Google Analytics 4) Conversion Paths Report in Attribution
  4. GA4 (Google Analytics 4) Model Comparison Report in Attribution
  5. Advertising Snapshot in GA4 (Google Analytics 4) Attribution
  6. GA4 Attribution Modelling Tutorial

#15 Google Analytics 4 Audiences

  1. GA4 Audiences – Creating Custom Audience in Google Analytics 4
  2. How to Create a Remarketing Audience in Google Analytics 4 (GA4)
  3. Understanding Audience Triggers in Google Analytics 4 (GA4)
  4. Google Analytics 4 (GA4) Predictive Audiences – Tutorial

#16 Google Analytics 4 BigQuery

  1. GA4 BigQuery – Connect Google Analytics 4 with BigQuery
  2. BigQuery GA4 Schema – Send Custom GA4 Data to BigQuery
  3. How to Backfill GA4 Data in BigQuery
  4. How to Connect and Export Data from GA4 to BigQuery

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

Learn and Master Google Analytics 4 (GA4) - 126 pages ebook

X
error: Alert: Content is protected !!