Peculiarities of Using Google Analytics to Track Sites Built on SPA Technology

peculiarities-of-using-google-analyticsDid you know that not all websites use the same technologies to load their pages?

On the one hand, when you navigate from one page to another on traditional navigation or transaction websites, such as Amazon, the associated code (CSS, HTML, Javascript) is retrieved for every new page load.

On the other hand, when you jump from one page to another of sites like Twitter or Gmail, the corresponding code is rendered only once during the first page load.

This is because email websites, including Gmail, and micro-blogging social media sites, such as Twitter, are built using Single Page Application (SPA) technology.

So, how does SPA technology impact the page loads for websites, and what are the challenges in tracking such sites? In this article, we explain this, as well as how Google Analytics helps track SPA sites.

The Impact of SPA Technology on Sites

The use of SPA technology for a website ensures the loading of only a single HTML page, which is dynamically updated upon any user interaction, such as clicks.

The responsiveness and performance of such SPA sites are quite good as all the resources that are needed for full-site navigation are loaded during the first page load itself.

If a user clicks on the page after the initial page load, the subsequent content is loaded without control being passed to another page and without another full page load.

Only the URL changes for SPA websites and this is updated by the SPA in order to make it resemble the actual experience of traditional site navigation. This explains why only a few buttons and the content change, while navigating from one page to another in the case of Gmail or Twitter.

Challenge of SPA Technology

It may be one of the easiest tasks to add the JavaScript tracking snippet to a website’s template in order to start using Google Analytics.

However, there is a challenge that results from the functionality of this tracking snippet. The snippet helps to track information, such as the total time spent on a website, the internal page links that are clicked and the sequence in which the different pages were visited.

And, these are built in such a way that the snippets identify new page links (changes in the URL of the site for every new page) only when they are initialized or triggered for any user action.

However, with SPA sites, this trigger does not happen for every new page because the new content is uploaded dynamically with only a change in the URL and with no change to the tracking snippet.

So, if you wish to track the subsequent page views after the first page load, it is important to get the change reflected in the tracking snippet. Thus, Google Analytics needs to be used in a different way to track SPA websites.

Special Ways of Using Google Analytics to Track SPA Sites

It is necessary to bring some innovation to the way Google Analytics is used, if you want to accurately track SPA sites. Hence, below is a list of some minor changes that need to be done to the Google Analytics tracking snippet with the support of developers.

Updating the Tracker

The tracker needs to be re-initialized with the new page value for the content that is loaded dynamically. You can get this value passed by using the “set” command, as directed in the line of code below:

ga(‘set’, ‘page’, ‘/new-page.html’);

The above code can be added just before the “send” command code line, as seen in the traditional JavaScript tracking snippet below:peculiarities-of-using-google-analytics-1While sending the page value to Google Analytics, it is necessary to select the hash portion of the URLs, i.e. only the canonical URL.

Such a practice helps you tackle the dynamic change only to the hash part of the URLs for SPA sites. Thus, even if a particular page can be accessed with multiple URLs (containing minor changes), there will be no duplication in the Google Analytics reports.

The above new page value can be used for all the page hits that happen after the value is set. Once the tracker is updated, you can use the “send” command to instantly send a page view hit in order to ensure that the corresponding page view is recorded:

ga(‘send’, ‘pageview’);

Key Points to Remember

The following are key point to remember:

  • While creating the tracker, using the create command, the “referrer” field indicates the value (URL) of the referral source that brought the traffic (visitor) to the website. Google Analytics can automatically determine the correct site URL path, without you having to update the “referrer” field. And, for SPA websites, the “referrer” field contains the “document.referrer” value (as used by the tracker) and always stays the same.
  • The “page” field is always given priority. So, even if additional fields, such as the “location,” are present and contain different paths than the path stated in the “page” field, Google Analytics will always consider the page field value.
  • It is possible to pass the page value to Google Analytics by using Google Tag Manager. However, this method is a bit complicated and involves plenty of support from developers.

So, have you used Google Analytics to track a SPA website yet? Do you have any queries? Please feel free to comment in the section below!


If you like my articles,