What are single page applications (SPAs)?

SPAs are single page applications which look like a traditional website, but they work differently. They are basically web applications, or websites, which load all the resources on the first load of the page. 

As the user interacts with the website, the content is loaded dynamically. In general, for normal websites, when the user interacts with the website and navigates to the page, the page refresh happens and resources are loaded. However, this is not the case with a single page application. There would be no refresh when the users interact, the content is loaded dynamically on the page.

Since SPAs load all the HTML, CSS, and JavaScript resources on the initial load, this makes them fast and responsive. To achieve the desired results, SPAs use modern technology frameworks such as Angular and React.

Why is it hard to track single page applications?

In the case of traditional websites, Google Analytics works fine because the code snippet is loaded every time the page is loaded. But in the case of a single page application, content is loaded dynamically which means the page refresh happens only once and Google Analytics runs only once on the page. So, the Google Analytics tag fires only on the initial load of the page.

Because Google Analytics relies on browser events for tracking, in the case of single page applications the GA tag fires only once on the initial load. This is basically only one web page that you visit and reloads all the other content using JavaScript.

My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

My Step-By-Step Blueprint For Setting up Server Side Tracking via Google Tag Manager.

Server Side Tracking Via Google Tag Manager (83 Pages)

Download the FREE ebook

How does the history change trigger in GTM help in tracking SPAs?

If you open the GTM preview console and check the tag for any SPA page, you will notice only one page view. However, we have a solution for this in GTM. You can track SPA’s using the history change trigger in GTM. 

If the developer of the SPA page has implemented the browser history functionality, then you link this to GTM history, change the trigger and track the activity of the users on a single page application. 

You will also have to enable the inbuilt variables to use this trigger in GTM, which are called as history listeners.

How to implement the history change trigger in GTM

Let’s see how we can use GTM 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’ for a new trigger type from the right-hand side, as shown below:

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 in the ‘Other’ section.

Step-7: Let’s name this trigger ‘History Change Trigger’.

Step-8: The trigger configuration will look like 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: Click on ‘Save’ on the top right-hand side.

Step-10: Now, navigate to the ‘Tags’ section in the left-hand side menu.

Step-11: Select the ‘GA- Page view tag’, which triggers all the pages from the tags created.

Step-12: In the trigger condition, click on ‘Edit’ and you will see the ‘+’ icon to add another trigger as shown below:

Step-13: Select the ‘History change trigger’ that we created.

Step-14: Click on ‘Save’.

My Step-By-Step Blueprint (100 Pages) For Learning and Mastering Google Tag Manager

Get the FREE ebook on Google Tag Manager (100 pages). Learn & Master GTM

Yes I want the FREE ebook

Steps to enable built-in history variables in GTM

Now in order for the history change trigger to work, we have to enable variables in GTM.  

Follow the below steps in GTM in order to enable history variables in GTM.

Step-1: Click on ‘Variables’ from the left-hand side.

Step-2: From the ‘Built-in variables’ section, click on ‘Configure’ from the right-hand side.

Step-3: Scroll down to the bottom and, from the history section, select all the options as shown below:

My Step-By-Step Blueprint For Setting up Server Side Tracking via Google Tag Manager.

Server Side Tracking Via Google Tag Manager (83 Pages)

Download the FREE ebook

Steps to validate SPA implementation in GTM preview mode

Step-1: Click on the ‘Preview’ mode in the GTM container from the top right-hand side.

Step-2: A new tab will open, when you click on GTM preview mode, enter the website URL to begin previewing the GTM container.

Step-3: For this example, I enter the URL of a single page application (https://muffingroup.com/), and click on the ‘Connect’ button.

Step-4: Once you click on ‘Connect’ the website is now in preview and debug mode.

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

Step-6: To check our implementation, let’s scroll on the website and validate if the GA page view is firing for the history change. 

In the Tag Assistant tab, you should see the history variable on the left hand side, as shown below:

Step-7: Now, click on any of the history tabs from the left-hand side and check if the GA pageview tag is firing.

If the GA tag is firing for the history change, then it means that our implementation is working fine.

Step-8: In some SPAs you would like the GA pageview fire for only some history changes. In that case, check the variables in the preview mode and based on values in the history change variables, you can tweak the trigger condition.

Steps to publish the changes in GTM container

Step-1: Navigate to your GTM container and click on the ‘Submit’ button on the top right-hand side.

Step-2: Add a version name and version description. For example, you can enter SPA tracking enabled on the website.

Step-3: Finally click on ‘Publish’.

Step-4:  You will now be able to see that the GA tag fires on the SPA page. Alternatively you can also validate in your GA real time reports.

My Step-By-Step Blueprint (100+ Pages) For Learning and Mastering GTM Data Layers

Get The Only Ebook On GTM Data Layer Ever Published (100+ pages). Learn & Master Data Layers

Yes I want the ebook

Custom data layer for implementing tracking for SPAs

Apart from tracking SPAs using the history change trigger in GTM, you can also use the data layer approach. 

You may need developer help to implement a custom data layer on the website. For this solution, the developer has to use the custom data layer push method. This means they have to push data into the data layer with the help of JavaScript code.

Below is the code that the developer has to pass:

dataLayer.push({‘event’: ”Pageview”})

This snippet should be deployed on every new visible page to the user. Along with this, the developer can also pass information like page name, query path and URL in the data layer.

Once the data layer is implemented, you are able to see the values in the data layer correctly, based on that you can create a custom event in GTM.

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

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

Step-3: Click on ‘New’ for a new trigger type from the right-hand side, as shown below:

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

Step-5: From the trigger type, select a ‘Custom event’.

Step-6: Let’s say your developer is passing the event name as ‘SPA pageview’, enter that as the event name and save the trigger.

Step-7: Navigate to the GA pageview tag and add this trigger condition to fire the tag on a custom event.

Note that, depending on your SPA, you can either keep the ‘all pages’ trigger or remove it based on whether a custom event triggers on the initial load of the page.

My Step-By-Step Blueprint For Setting up Server Side Tracking via Google Tag Manager.

Server Side Tracking Via Google Tag Manager (83 Pages)

Download the FREE ebook

Common issues and solutions for single page application tracking

URL issue

In single page applications, because there is no URL change, some SPAs use the hash symbol in the URL when we navigate to a specific part of the website. 

However, in Google Analytics reports, it ignores the hash part of the URL so you will notice that all the pages are the same.

In this case, you can use the history change built in variables that will help us identify the visible pages the user navigated to on the SPA. 

To check if data is captured in these variables follow below steps:

Solution for the SPA URL issue

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

Step-2: In Tag Assistant preview mode, click on the variables section and check if built in variables are capturing any data.

Step-3: Navigate to the GA pageview tag in GTM and click on ‘More settings’.

Step-4: In the ‘Field to set’ section, select ‘page’ as the field name and as the field value select ‘New History Fragment’, as shown below:

Step-5: If you are using a custom data layer approach, instead of history change, you have to create a data layer variable by selecting variables->user defined variables-> data layer variable.

Step-6: Just like how we added the history variable in the ‘Field to set’ section for the GA pageview tag, in the same way we have to add the data layer variable for custom data layer implementation as well. 

Step-7: Save and publish the changes and this will show the full URLs of the SPA in your Google Analytics reports.

Rogue referral issue

Another issue with single page applications is rogue referral. 

This is related to the wrong attribution of Google Ads as organic traffic in Google Analytics. 

Solution for the rogue referral issue in SPAs

As a fix for this issue, you need to insert the below code in your GTM container.

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ originalLocation: document.location.protocol + ‘//’ + document.location.hostname + document.location.pathname + document.location.search });

Create an HTML tag in GTM and fire it before the page view. 

To understand more about this issue and how to fix it refer to the Simo Ahava blog, who first reported this issue.

Congratulations! You have now learnt how to implement tracking for single page applications using Google Tag Manager.