This page describes how to use gtag.js to measure interactions with pages on sites that load content dynamically, without traditional full page loads.
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
gtag('set', 'page_path', page_path); gtag('event', 'page_view');
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:
To avoid duplication in your reports, it's best to record all of these
/about for the