Tracking Virtual Pageviews in Google Tag Manager

Why Do We Need Virtual Pageviews?

“Real” pageviews are easy to understand. When someone visits a page on your site, that’s a pageview. The tracking javascript loads on the page and clocks a single view in Google Analytics.

However, not all website interactions are as straightforward as this. There are tons of things we want to track users doing on webpages that don’t cause the page to reload.

What is a Virtual Pageview?

A virtual pageview isn’t really a pageview at all, it’s a complete lie. But virtual pageviews are user actions that feel like real pageviews so they are tracked in the same way. This is usually to make website reporting easier by allowing pageviews, and actions that feel like pageviews to be categorised together.

The most popular example of a virtual pageview is downloading a PDF document. It can also be used for an overlay / lightbox impression on a website that requests a user’s details.

Users often hover over website elements to display flyout menus and click to expand to show more content. Neither of these actions could be classed as a virtual pageview, as they are minor or partial page interactions.

Similarly, actions like downloading a PDF doesn’t lend itself so well to being tracked as an event. A user is visiting a document on a website, so logging that as a URL visit means you can report on traffic, advanced segments, sources etc in the same way you do your HTML pages.

It makes things a bit simpler to use different tracking methods in different scenarios, but there are no fixed rules.

Google Tag Manager V2 (released October 2014)

GTM v1 vs. v2

The changes were a bit of a slap in the face to early adopters of GTM, who were required to migrate their v1 tracking to v2. But they were rewarded with greater GTM functionality, and a more logical, powerful UI.

Tutorial – Tracking Virtual Pageviews in Google Tag Manager v2

For this worked example, we’re tracking impressions of a simple overlay on our website. You’ve probably seen it already if you’ve read this far:

The important thing to note is that this overlay is triggered by a timer on the website, currently set to 5500ms after the page load. If you’re tracking virtual pageviews based on user-fired events such as clicks or form submissions then Google Tag Manager already gives you the functionality that you need in its built in triggers.

Why not just use a GTM timer trigger?

We could use a GTM timer trigger, that fires an event after 5500ms to log that the overlay will have appeared. This is a really brittle and inflexible way of tracking. If the timer on the overlay was changed, then the tracking would be out of sync with what the user is actually seeing. Also if the overlay was disabled, then the GTM timer trigger would continue to fire. Again this misrepresents what the user is seeing. Where possible, your tracking should change automatically as you change features on the website.

Step 1: Get Set Up With Google Tag Manager

You’re probably already set up with GTM if you’re looking at virtual pageviews. Still, if you aren’t set up then go to tagmanager.google.com and follow the steps. There are a ton of online resources for getting the basics set up.

When you log into your GTM account, you’ll see the a list of containers:

Selecting a container will give you the dashboard where the magic happens:

Step 2: Start With The Data

I’d always recommend starting on the lowest possible level when implementing tracking. If you understand the data and code then everything else will play out from there. It’s just as possible to start at a high level on the tracking side.

As the overlay pops up after a timer on the website, we need to plug this event manually into the GTM Data Layer. By this we mean that when the overlay appears, we want to run some javascript that kicks some data over to Google Tag Manager that gets logged in Google Analytics. Simple right?

A pageview (virtual or real) is composed of a Page URL and a Page Title. You don’t have to include Page Title if you don’t want, but it’s an available slot for you to record data in so see it as an opportunity! You can see URL and Title as the two primary dimensions for pages in Google Analytics:

Javascript

This javascript needs to run when the overlay appears. Depending on your implementation, this could be a topic for another blog post. On this site we used popup-maker and MailChimp for the forms and email subscription process:

Step 5: Set Up GTM Virtual Pageview Tag

So now we have our website passing page data (step 1) to GTM variables (Step 2) and a trigger in place for GTM to do something with the data when it hears that a virtual pageview has happened (step 3).

Now we need to configure a GTM tag, which is the link between GTM and Google Analytics so that the data can actually be logged. GTM plugs into a range of different tracking platforms, so you have to specify at this point that you want it to go to your GA account.

“The fields to set” are the variables from the Javascript. These bind the data from the webpage to the reserved fields in Google Analytics for what a Pageview really is. You can see a full list of these reserved fields here.

In v1 of Google Tag Manager, these were set differently in the UI to how it’s now done in v2.

Step 6: Debug and Publish

The debugging features in GTM are pretty awesome. Debugging tracking issues historically is really complex, especially if you’ve inherited a badly-managed system.

Go to Publish -> Preview and Debug -> Preview

Now when you visit the page which triggers the overlay in the same browser, you’ll get the debug panel which will show you what’s happening behind the scenes.

You should see the Trigger we set up earlier firing under the “tags” tab:

You’ll also see the values of the javascript variables we set up for the title and the url being passed into GTM:

And for a summary of the whole snippet that’s being passed to the Data Layer:

If you’re not seeing the data in the above images, check your spelling of the javascript and GTM variables. Typos will cause them to not link up correctly – look for case-sensitive issues.

Step 7: Publish and Check Google Analytics

Go to the realtime dashboard in Google Analytics and you’ll be able to see “visits” to the virtual page appearing showing the URL and title:

And after a few hours, you’ll be able to see them in your GA page reports. Note how entrances will always be zero, as a user will have to make a real pageview before they will get this virtual pageview:

Step 8: Let us know your thoughts!

I hope this post was of use in explaining how to configure virtual pageviews in GTM v2. Once you’ve set up website tracking, it might be time to audit your website’s technical SEO, or take your pick from one of these SEO audit tools that we reviewed.

If you need a hand with your company’s website tracking and Google Analytics please post a question in the comments below or contact us.

And here are some great resources for learning more about Google Analytics:

47 Comments

Thank you for posting this! The world needs it. I need it. I am new to GTM and partly to the more advanced parts of GA. Your article makes some things clear, and I have got just one question: Must I add javascript to the code (and do the dataLayer.push) if I want to set this up? I want to get virtual pageviews from a page with a self-referring form. I thought that I could somehow give GTM the ID of the form or button and that it could be set up without adding code on the website.

What I was referring to is the URL displayed in the browser still tracked as a pageview when your virtual pageview code is fired. Or will the code that fires the virtual pageview cancel that browser URL pageview tracking with GA. Just wondering if we have to deal with the same page being tracked as 1 or 2 views in GA.

Good job in having this instructions for setting up a Google Tag Manager for us to track the virtual pageviews. I have a question though, I have a website that caters 20+ different modes of payment like quick transfers, paypal, etc., which I setup a virtual pageview for me to track conversions on GA, is this also possible between Google Tag Manager and virtual Pageviews providing more I have more than 20 target goal conversion that I can setup for tracking?

Personally I wouldn’t use virtual pageviews for this. I would use E-Commerce tracking as this is what it’s designed for. You don’t need to use an E-Commerce platform to do it, but you will need to write some Javascript to wire it up (in the same way you’d have to for virtual pageviews).

It looks like to collect a virtual page view, the URL has to change? What if the URL does not change, e.g., a modal pops up over the current home page. I would like to tag the modal as a virtual page view, but there is no URL or page title change. How would I: 1) tag and track the modal; 2) name the modal – would it be a manual input under page URL, e.g., homepage/modal (but there is no URL change, it is still http://www.homepage).

In theory you should just be able to wire up a click event via GTM for the button id “btn_signup_brochure”.

If you’re not using GTM, it doesn’t work or aren’t familiar with it, you could just add inline JS to fire the GA Event when someone clicks the button onclick. You then wire this event up to a Goal in GA if you want to track it as a conversion.

I am doing it via GTM but when I’m in preview and debug and I click the DOWNLOAD BROCHURE button while in the lightbox, there is no gtm.click event showing up on the left hand side of the GTM preview and debug console under “Summary”. However, the odd thing is that when I click the x to close the lightbox it does send a gtm.click event with click class = ‘mfp-close’

Fantastic article – thanks so much. I’m not a dev but have the task of setting up GA & GTM for our single page application so this is probably a fairly basic q – where exactly would the datalayer.push code go on the page? Before the GTM code or after? None of our devs are front-end or javascript proficient so I need to give them very specific instructions!

The best way to debug this is to look at the javascript calls to GA in the “network” panel in developer tools in the browser. You should see an Event call to GA with the Event Category, Action etc set if it’s working.

I need to track more than 3 types of virtual page views for product1, product2, product3 all are dynamic URL’s. So, I am using regular expression in analytics. My question here is, should I have the different custom event name for each product or using the same custom event name I can capture all the virtual page views?

You can use the same custom data layer event name, and vary the virtual page url passed in the other variable. Then in GTM, when your virtual pageview tag fires (based on the event name) the correct url is then passed to GA via the variable.

Equally it would work with a different event / tag for each page view and you can hardcode the URL in GTM. It’s whatever you find easiest to manage.

The VPV set up as a Pageview in GTM needs a trigger of some sort. In the case of the article there’s no OnClick as the overlay appears after a period of time and isn’t triggered by the user. The event push to the DataLayer happens as the JS is rendered inside the overlay. You could just as easily use an onclick for VPVs that are fired by a user interaction. e.g. a user doing a postcode lookup in E-Commerce checkout. If the funnelling you’re referring to is in GA Goals, then yes you have to use pageviews (or VPVs) as GA doesn’t support funnels for events. GA doesn’t care how the VPVs are triggered in GTM though, so long as it receives a pageview.

I’d like to use GTM to do page view track when a modal window pops up in our single page application(angular application).
Must I add the datalayer.push code on my webpage manually?
I don’t want to modify sources of our webpages except installing Google Tag Manager.
Is it possible?

Yes it’s possible without using the data layer, but definitely not as good. The main issue you have is that you need a trigger to fire the Virtual PageView tag. Usually triggers are fired by users by clicking / scrolling etc. For a Modal/Lightbox window, the trigger is usually decided by the website (e.g. after 10 seconds, or at a certain scroll position).

Assuming the modal is triggered by a timer, you could just create a GTM Timer trigger to fire the VPV. If it’s triggered by scrolling down the page you could use a GTM Scroll Trigger. You would hardcode the Page URL and (optionally) Title in the PageView Tag.

The main reason why this isn’t as good is if your Modal trigger is edited (e.g. to 20 seconds), then you have to update the GTM trigger as well. Also, if you have lots of different Modals then managing how these are logged in GA becomes a bit more complicated as you need to detect which modal has fired.

To track keystrokes specifically you will definitely need to use some custom Javascript. It shouldn’t be that difficult. If pressing “ENTER” causes some kind of action to happen on the site (e.g. Form Submission) then you can track that action more easily than trying to hook into the keystroke.

I have another question about data layer. Could I use GTM to add that data layer snippet to my webpage? That is, I’m not allowed to modify the source of that webpage.
So I’m wondering if GTM can manage all data layer snippets via GTM user interface, instead of hard coding on my webpages manually with the help of frontend developers.

Yes you can do this using a script snippet inside a custom HTML tag (fired on the pages you need it on). I would think carefully beforehand though as to whether it’s really necessary. You still have the same challenge wiring up the trigger and extracting the data that’s relevant to your tracking.

YoungNovember 6, 2017 at 11:12 am

Thank you for your advice.
You’re the most patient writer I’ve encountered.
Thank you veeeeeeeeeeeeeeery much.