Categories
How-To

Tracking Virtual Pageviews – Craig Zaccaro

The default tracking snippet runs on each new page load. This makes it difficult to track single page applications where the site loads new page content dynamically rather than as full page loads. In these cases, pageviews can be tracked manually.

Example Use Cases

  • A single page website in which content is loaded once and then changed through user interaction
  • A tabbed scenario where page content is loaded via AJAX
  • A single page checkout process where you might want to track each step as part of a funnel

Basic Examples

There are lots of different implementations which vary based on what is being tracked and the technology be used. Apps using React, Angular, Rails/Turbolinks, and/or Ajax have different implementations, but the principles are the same.

Standard

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

Inline – usually included in a link tag

onClick = ga(‘send’, ‘pageview’, ‘/new-page.html’)

With named trackers

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

Some things to watch for…

  • In single page apps, you will still only have a single page load
  • Virtual pageview tracking can lead to inflated metrics when used to track user interactions. In these cases, prefixing the virtual pageview url and filtering can be used.
  • Updating the document referrer or document location when setting a virtual pageview can have unintended consequences. In most cases it’s recommended to use the ‘page’ field instead.

Resources

Page Tracking
Single Page Application Tracking
How to make Google Analytics work in a Single Page Application
Virtual Pageviews in Google Analytics – Why, How and When to use Them?
Ajax Page Tracking with Google Universal Analytics

Leave a Reply

Your email address will not be published. Required fields are marked *