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
.