Single page application measurement with gtag.js

This page describes how to use gtag.js to measure interactions with pages on sites that load content dynamically, without traditional full page loads.

Overview

A single-page application (SPA) is a web application or website that loads all of the resources required to navigate throughout a site on the first page load. As the user clicks links and interacts with the page, subsequent content loads dynamically. The application will often update the URL in the address bar to emulate traditional page navigation, but a separate full page request is never made.

The Google tag works well with traditional websites because the snippet code runs every time users load a new page. However, for a single-page application where the site loads new page content dynamically rather than as full page loads, the gtag.js snippet code only runs once. This means subsequent (virtual) pageviews must be measured manually as new content loads.

Measure virtual pageviews

When your application loads content dynamically and updates the URL in the address bar, the page URL stored with gtag.js should be updated as well. You can also then measure the changes in address on your site as page views.

To set the path gtag.js reports, use the set command to specify a value for the page_path parameter:

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

For example:

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

After you've added the new value for page_path, all subsequent events sent to that property will use that new value.

Handling multiple URLs for the same resource

Some SPAs only update the hash portion of the URL when loading content dynamically. This practice can lead to situations where many different page paths point to the same resource. In such cases, it's usually best to choose a canonical URL and send only that page_path value to Google Analytics.

For example, consider a website whose "About Us" page can be reached via any of the following URLs:

  • /about
  • /#/about
  • /home/#/about

To avoid duplication in your reports, it's best to record all of these pages using /about for the page_path.