By - Neal Cole

How To Create Virtual Page Views in Google Tag Manager

GTM showing a virtual page view tag fire

A Step-By-Step Guide to Virtual Page Views in Google Tag Manager:

 

Virtual page views allow Google Tag Manager to track important user journeys when new new content is served even though no page actually exists. They are an essential tool which enables the analyst to create detailed reports for conversion funnels and user journeys in single page applications and forms where the URL remains constant.

 

Virtual page views are sometimes required because the page view tag in GTM only fires when the URL shown in the browser changes when a new web page is loaded. However, the URL does not change with single page applications, one page websites, embedded applications, and  single page checkouts. This means that we have to use another method to trigger a page view rather than rely on a URL change.

 

There are a number of methods available to track changes in content when the URL remains constant and each have their pros and cons. You can use element visibility triggers which listen out for CSS selectors or IDs to appear on the screen. However, I’ve found these are not always reliable in some applications. Often they required a developer to add unique IDs to the element and so you might as well ask them to add the virtual page view script instead.

 

I also recommend virtual page views rather than events because Google Analytics Goals don’t allow events for creating funnels. This means you couldn’t use the Funnel Visualisation report in GA if you set up events.   You would also miss out on the ability to measure page load speed by using events.

1. Implement GTM Code:

 

If the content you want to track does not already have GTM implemented you will need to add this first. This is fairly common with embedded application and an iFrames where the content is hosted on another site. If the content is held on another domain you will also need to investigate cross-domain tracking which I explain here.

 

Test that your GTM script is working correctly before trying to implement virtual page views. If you are testing an embedded application the page view tag should still fire when the page which launches the application loads. Even click tags should fire, but they will all be shown as being on the same URL .

 

GTM Script and Implementation Instructions

GTM script for implementation

 

If you have Google Analytics base script on the site I recommend migrating to GTM because this is a much more dynamic way of implementing Google Analytics. With embedded applications I found that Google Analytics script conflicted with the virtual page views implementation and so we had to remove the GA code completely from the application.

2. Add Virtual Page Views Data Layer Script:

 

Virtual page views use the data layer to push information to GTM and so this means adding some script to each page in the journey. GTM automatically creates a data layer when you implement it and so it is not necessary to create a new data layer. However, it’s important to give your developer clear instructions so that they don’t have to work out how implement virtual page views.

 

Here we use a spreadsheet  to brief our developer. This includes an image of the page, the existing page path, the additional virtual page path and the data layer script which needs to be added to the code of each virtual page. This minimises the chance of pages being given the wrong code and name. If these are new page designs you may also want to include the name of each page used by the UX designer if they are not identical to the agreed virtual page URL.

 

virtual pageviews for embedded application

 

Here is the script used in the example.

datalayer.push ({

‘event’:’virtualPageView’

‘virtualPageURL’:’/glossary-of-conversion/adaptive-design/’

‘virtualPageTitle’:’Adaptive_Design’

});

 

3. Create New Data Layer Variables:

 

Once you have finalised the spec for the developer you should get on with configuring GTM so that you can test the implementation as soon as it goes into a test environment.

 

We now need to create data layer variables in GTM to capture the information from the website. Go to the ‘Variables’ tab and call your new variable ‘virtualPageTitle’. Select ‘Data Layer Variable’ and use the exact same text as you’ve used in your data layer script for the variable name.

virtual page title variable

 

Now repeat the process for the ‘virtualPageURL’ and create a data layer variable with the same name as shown in the code.

Virtual page view URL

 

4. Add Virtual Page Views to GA Settings Variable:

 

Next go to your Standard GA Settings variable and go to ‘More Settings’ and ‘Field to Set’. Here add field names for ‘page’ and ‘title’ and use the variables you have just created for the value fields. If you are tracking an embedded application this will prevent a page view firing for the host page path when the embedded application is loading.

 

5. Create a Trigger:

 

As the script pushes an ‘event’ into the data layer we need to create a new ‘Custom Event’ trigger that fires when the data layer detects a ‘virtualPageView’ event. We also only want the trigger to fire when it is on the page path where our  application or form is located.

 

Virtual pageview trigger

 

6. Create a Virtual Pageview Tag:

 

We now need to create a tag that sends the virtual pageviews to Google Analytics.  Go to ‘Tag’s and select ‘New’ and use the following settings:

Tag Type: Google Analytics – Universal Analytics

Track Type: Pageview

Google Analytics settings: Select your Standard GA Settings variable

Enable overriding settings in this tag: Select

 

Now select ‘More Settings’ and ‘Field to Set’ to enter the details of your pageviews. To populate the acquisition fields in Google Analytics for your virtual pageview you should set the campaign medium and campaign source to appropriate categories. Set the campaign medium to user activity as it’s resulted from user decisions and campaign source to something related to the nature of the application.

 

Virtual pageview tag

 

7. Test The Implementation:

 

You can now test by enabling the ‘Preview’ mode in GTM. Go to your GTM container and click ‘Preview’ and GTM will refresh. Remember to also refresh the page on the website you are trying to  track. In the preview window at the bottom of the screen you should see an event fire using the virtual page view tag.  You should also use the ‘Realtime’ tab in GA for the environment you are testing it to check the data is being sent to GA.

Realtime Data in Google Analytics

Testing virtual page view in Google Analytics

 

8. Publish Workspace:

 

Once you are confident everything is working as expected, you can publish your GTM workspace and begin collecting data in Google Analytics. This will give you the opportunity to begin automating complex funnels in Data Studio and setting goals in Google Analytics.

Summary:

 

Virtual page views help you track real user journeys that would otherwise not be measured if you relied on the page URL changing. In today’s web environment of single page applications, one page sites, dynamic forms and embedded applications this is crucial in accurately tracking many user journeys.

 

is possible to create tags that rely on the element visibility trigger, but this is not always a  reliable method for some applications. The most reliable method is to implement virtual page view script on each page. Ensure you provide a clear spec to your developer, including an image of each page, to avoid any mistakes.

 

One you have created the appropriate data layer variables, triggers and tags you will be set to test that the implementation works as expected. Use the GTM ‘Preview’ mode and GA ‘Realtime’ console to thoroughly test it. If all systems are go you can then go ahead and publish it. This will then give you the ability to create funnel reports and other automated reports in Data Studio.

 

  • About the author:  Neal provides web analytics and CRO consultancy services. He has worked in many sectors including financial services, online gaming and e-commerce retail. He has helped brands including Hastings Direct, Manchester Airport Group Online, and Assurant Ltd to improve their digital marketing measurement and performance.

Leave a Reply

Your e-mail address will not be published.
*
*

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close