Google Analytics Virtual Page Actions

(https://calendly.com/dnomia/15min) I respond to almost every message I receive, while also taking careful notes. This way, I keep existing content up to date, and at the same time become aware of topics I may have overlooked or neglected.

In particular, constant presence in our field of vision—such as tools, statements, or calculations—can unconsciously narrow our perception over time, leading us to develop self-reinforcing dependencies.

Of course, we can look at the results we’ve obtained with absolute certainty. Upon reviewing the notes I’ve taken from the fundamental questions I’ve received based on Google Analytics, I noticed a significant accumulation of questions regarding formulas and metrics. First, I’ll address various topics based on the page (Behavior > Site Content > All Pages). The first topic in the ongoing series of articles about Google Analytics will be virtual pageview. I previously explained a similar process for Hotjar. Alternatively, event usage (especially in conjunction with Google Tag Manager) can also be considered.

Virtual Pageview

Page views (page views) is a metric that represents the number of times a specific page/screen is viewed on your website or app (see Single Page Applications). This metric is processed by default when setting up Google Analytics¹. Of course, there will be technical differences for gtag.js and analytics.js. The snippet for analytics.js was as follows:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXX-Y');
</script>

Usage of Google Analytics Virtual Pageview

Upon examining the website, pages typically correspond to an HTML document. However, in certain cases, we may need to dynamically manipulate content. For example, in scenarios such as modal, popover, slider, onepage checkout process, tab, js/ajax form submit, and during the Goal (Goal) creation stages, we can handle content. However, since there is no change in URL path, Google Analytics will not recognize these actions as page views². In this case, we leverage the virtual pageview feature for content that is dynamically rendered and normally does not exist. As seen in the setup code above, analytics.js processes the pageview action within the code. For gtag.js, no additional configuration is required³. In both cases, the JavaScript tag creates a tracker object and sends it to Google Analytics as a page view (hitType: 'pageview'). The data sent is processed through the browser; for the title field, document.title is used, and for the page path, document.location is used, which are the primary fields for the page. In the code snippets below, ga() refers to analytics.js, and gtag() refers to the global site tag setup⁴.

ga('send', 'pageview', [page], [fieldsObject]);
gtag('config', 'GA_MEASUREMENT_ID', {<pageview_parameters>});

For the virtual pageview, we re-examine the hitType definition and send the relevant event—such as form submission or modal display—to Google Analytics.

ga('send', 'pageview', location.pathname);
ga('send', {
  hitType: 'pageview',
  page: location.pathname,
  title: 'Page Title' // optional
});

gtag('config', 'UA-XXXXX-Y', // or G-XXXXXXXXXX
{
  'page_title': 'Page Title', // optional
  'page_location': 'http://foo.com/your-custom/'+location.pathname, // optional
  'page_path': location.pathname // optional
});

// GA4 Screen
gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

In SPA usage, when application content is dynamically loaded and the URL in the address bar is updated, the data stored in the viewer (tracker) must also be updated. To perform this update, we send the new page value (page value) using the set command^{5 6 7}.

// analytics.js
ga('set', 'page', '/new-page.html');

After defining the new page value, all subsequent hits will use this new value. Immediately after updating the viewer, a pageview hit must be sent to record a page view.

// analytics.js
ga('send', 'pageview');

In summary, the code to be executed in a virtual pageview scenario is as follows.

// analytics.js
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

This process can also be triggered by a link click.

<a href="[file-path].pdf" onClick="ga('send', 'pageview', '[file-path].pdf');">Download PDF File</a>

For gtag.js, this operation is handled under the app/screen measurement section.

// gtag.js Screen View
gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Further Reading

• Google Analytics: From analytics.js to gtag.js
• Tracking Single Page Applications With Google Analytics
• How To Fire A Virtual Pageview In Google Tag Manager

Footnotes

1. Add analytics.js to Your Site, analytics.js ↩
2. Page Views, analytics.js ↩
3. Single Page Application Measurement, analytics.js ↩
4. Migrate from analytics.js to gtag.js ↩
5. Measure pageviews, gtag.js ↩
6. App/Screen Measurement, gtag.js ↩
7. Developer Guide, Google Tag Manager ↩