It seems that everybody has an itch to jump on the Google Tag Manager bandwagon lately, which means learning yet another way to implement Google Analytic. We’ve been doing lots of Google Tag Manager analytics implementations, and although they are fun (yes I’m sick) and challenging, GTM is still relatively new, and documentation is sparse. So in an effort to increase the available resources for developers and implementors, I’ve put together a quick post on implementing Google Analytics Virtual Pageviews through Google Tag Manager. It’s a piece of cake.

If you’re absolutely new to Google Tag Manager, I recommend watching the Google Tag Manager video or checking out any of these other excellent blog posts that outline GTM:

Google Tag Manager: A Step-By-Step Guide

Getting Started Guide to Google Tag Manager for Google Analytics

What is a Virtual Pageview?

So before we implement a virtual pageview, it’s a good idea to understand what is a Virtual Pageview is… a virtual pageview is a method to ‘spoof’ the URL in order to track clicks that do not actual change the URL i.e. Modal, Dynamic content, etc.

The Scenario

We have a Big Blue Button, when clicked, launches a modal/lightbox window with, say, some Terms and Conditions within it. Now, you’re saying “Dude, use event tracking button clicks”, but I stop you and say, “What happens when you want to put that event into a Goal Funnel?”. It’s not possible, and thats why we use virtual pageviews.

Step 1: Create a Custom HTML Tag

There are two parts to a Custom HTML Tag:

  • HTML (the tag you are going to pass)
  • Firing Rule

HTML

This code will go in the HTML textbox:

<script>
$(".btn-large").on("click", function(){
dataLayer.push({
'event':'sendVirtualPageview',
'vpv':'/blah/CUSTOM THING WITH SPACES/blah'
});
});
</script>

Line-by-Line breakdown of what were implementing:

<script> : In order for this Custom HTML Tag to work, it requires that you wrap the HTML/Javascript that you drop into the textbox in the <script> tags. This is the opening <script> tag.

$(".btn-large").on("click", function(){ : this is a bit of jQuery. Essentially we are telling jQuery to look for the class .btn-large and attach the “click” event handler whenever this .btn-large is clicked.

dataLayer.push({ : is a method to update the data layer with new or updated key/value pairs (see google reference).

'event':'sendVirtualPageView', : is a data layer variable i.e. key/value pair. The key = ‘event’ is special macro called Custom Event. *This macro comes standard with any GTM implementation. The value = ‘sendPageView’ is what we’re setting so we can differentiate between different events. For example, we could create another value for Google Analytics event tracking called something like trackEvent.

'vpv':'/whatEverYouWant’ : is another data layer variable i.e. key/value pair. This key = ‘vpv’ is also a special macro called a Data Layer Variable. Here we are setting the Data Layer Variable Name (Key) = ‘vpv’. So whenever we want to include a virtual pageview, we will start with vpv. We are setting the value to ‘/whatEverYouWant’. This is the ‘page’ that will get sent to Google Analytics.

Google Tag Manager - Virtual Pageview Macro

});  }); </script> : the first set of brackets closes out the dataLayer.push method; the second set of brackets closes out the function; the </script> closes the opening <script> tag.

Firing Rules

There is one Firing Rule for this Custom HTML Tag: All Pages. The All Pages rule is based on a {{url}} macro matching a RegEx .* (i.e. URL matching anything). I touch on creating rules on my previous blog post on dual-tagging.

Step 2: Create another Google Analytics Tag

Note: This tag is in addition to the Google Analytics tag you’ve already setup to track pageviews.

There are four parts to this Google Analytics Tag:

  • Web Property ID
  • Track Type
  • Virtual Page Path
  • Firing Rule

Web Property ID

This is pretty straight forward. Simply just drop in the same UA Id you used for the previous Google Analytics Tag (the one for basic pageview tracking). Typically, I’ll create a macro for the UA-Id value, so we can reuse.

Track Type

Because we are tracking a pageview, we’ll want to keep this set to Page View.

Virtual Page Path

This field is supplied by the Google Analytics Tag where you’ll pass the data layer variable {{vpv}} we created in the first step. Here is an example of what it would look like:

Google Tag Manager - Virtual Page Path Setup

Firing Rule

Like the Custom HTML tag, there is only one firing rule for this Google Analytics tag: Send Virtual Pageview.

Google Tag Manager - Firing Rule

This Rule says, when {{event}} is equal to sendVirtualPageview, fire this tag. When we look back at the Custom HTML tag we created in the previous step, we set the event value of the name/value pair equal to sendVirtualPageview. So when a visitor clicks the Big Blue Button, it triggers this event which in turn triggers this virtual pageview to fire.

Step 3: Create Version, Preview & Debug

This is pretty self-explanatory, but essentially you’ll create a version, and once that version is created, hit the Preview & Debug option. From that, it will launch a window where you’ll select the website you’d like to preview the change on. Tip: you can add your site under Users & Settings > Domains.

Google Tag Manager - Preview and Debug

Conclusion

Virtual pageviews are a great way to track clicks from users that do not lead to actual website pages on your site. I hope I’ve given you an easy way to implement virtual pageview using Google Tag Manager.

Feel free to leave comments or suggestions below.