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.
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 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.
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.
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.
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 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:
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-11: Enable preview mode in the GTM container.
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.
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.
Step-15: Click on the ‘New’ from the user-defined variables.
Step-16: Select ‘JavaScript Variable’ from the list of page variables, as shown below:
Step-17: Enter “window.location.href” in the configuration, as shown below:
Step-18: Now, navigate to GA4 event-based tag, add this variable in the event parameters.
Step-19: Enable preview mode in the GTM container from the right-hand side.
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
#
Step-21: Click on ‘Submit’ on the left-hand side of the GTM console.
Step-22: 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 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.
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 the ‘Configure’ link in the left-hand menu.
Step-3: Click on ‘DebugView’.
Step-4: Click on ‘user_engagement’ or ‘page_view’ to see if the page location value is captured correctly in the reports.
Step-5: 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.
Other articles related to GA4 (Google Analytics 4)
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
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of all the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
