Virtual Pageview Tracking

It is recommended to use virtual pageviews in order to track non-page-loading activity that mimic navigation (e.g. modal windows or other pop-up overlays).

It is good practice to include a virtual directory (e.g. /vpv/) before your virtual page name to help to identify these URLs as Virtual Pageviews. The configuration file available for download in this article hard-codes this value into the page field in the tag.

Deployment via GTM

When using GTM, virtual pageview data is sent to Google Analytics via a pageview tag that forces a specific page path. This tag must reference a page path, which can be hard-coded into the tag, or else passed in as a data layer variable.

A GTM configuration file is available to facilitate virtual page tracking deployment. Follow the instructions below to download and import the recommended GTM configurations for virtual pageviews.

Download

Download the configuration file for virtual pageviews.

 

Import container configuration file

Import the container file into your Tag Manager container. If your Tag Manager container already has existing configurations, you can opt to merge the import into your existing container -- if so, you should remove any duplicate Analytics tags from your existing container.

Adjust Tag Manager container variables

The following variables have been provided in the Tag Manager configuration file and require personalized adjustment. You will find them in your container with names preceded by 0_, 1_, or 2_. It is recommended that you rename them without this prefix once you have edited them.

Analytics settings

Ensure that the settings variable used in the configuration file is compatible with any settings used by your existing container.

Analytics property

It is required to place your Google Analytics property id into the 0_GA property constant variable with the Tag Manager container.

On-page code modifications

The tags provided in this configuration file are triggered based either on custom events being manually pushed into the data layer, or else by GTM auto-events. Both methods require validation in the on-page code.

Custom event trigger

In order for the provided configurations to function, modify the on-page code in the event handler that initiates the content/context change to include the push of a custom GTM event and a virtual path to be sent to GA as the page path.

<a href="#" onclick="
  dataLayer.push({
    'event': 'analyticsVPV',
    'page': virtualPagePath
  });
">Link Text</a>

GTM auto-event trigger

In order to trigger the virtual pageview tags from this configuration file, elements must include the class analyticsVPV, as shown below.

<a href="#" class="analyticsVPV">Link Text</a>

It is prudent to also send a Virtual Pageview upon close/return activities (such as the closing of a modal, or a return from a virtual navigation). Doing so will reset the page name variable with the parent page's URI. For these activities, replace the page value with the string: undefined.

Deployment via on-page code

Virtual Pageviews can be triggered by referencing the page tracking method in the onclick event handler that initiates the content/context change.

This function is populated with the relevant virtual pageview name and will send the virtual pageview data to Google Analytics.

<a href="#" onclick="ga('send', 'pageview', '/vpv/linkClickPage');">Link Text</a>

Including a virtual directory (e.g. /vpv/) before your virtual page name will help to identify these URLs as Virtual Pageviews.

To track the closing of a modal, or some other form or return from the virtual page, send another pageview with the base URL (i.e. Document Path + Document Search). This will trigger a new pageview and resets the page name variable with the parent page's URI.

<a href="#" onclick="ga('send', 'pageview', undefined);">Close Click</a>