Virtual Pageviews for Modals via Google Tag Manager

If you want to track views of lightboxes or modals as virtual pageviews in Google Analytics through Google Tag Manager, it can be quite a confusing process. Here is how I do it.

Why This Guide?

Whilst Google Tag Manager is undoubtedly a good tool, it sits at an intersection between developers, marketers and analytics guys. I’m in the latter two camps; Google Tag Manager speaks in the language of the former camp. Furthermore, most of the guides I saw focused on setting up events rather than virtual pageviews, or on pages that had single clickable elements on them.

This guide is for pages with multiple clickable elements (e.g. a product page that has ‘Add to Bag’ and ‘Reserve in Store’ buttons) of which only one is to be tracked. We want to track these as virtual pageviews, not events, because we can use virtual pageviews in a conversion funnel.

So How Do I Do It?

We’ll need to set up two different tags that work together. It is best to test this set up in UAT rather than on the live site, as it aids the debugging process (discussed later).

Tag 1. The click listener.

This is the straightforward bit. Set up a new tag of the tag type ‘click listener’. Set up the firing rule for ‘all pages’ (this will probably be the condition {{url}} matches RegEx .* ).

What this means: You’ve just set up a tag that listens for clicks on all pages.

Tag 2. The virtual pageview.

This is a bit more involved but still straightforward if you follow these steps.

  1. Set up a new tag of the classic (or Universal) Google Analytics type. Use whichever type relates to your GA set up (classic or Universal).
  2. Set this up with the Track Type ‘Page View’, and under ‘More Settings’ specify the virtual page path you want to be sent to Google Analytics.
  3. You need to now set up a rule that will see the virtual pageview sent whenever the conditions of the rule are met.

To do this you set up a single rule consisting of two conditions. Those conditions are:

  1. {{event}} contains gtm.click
  2. {{element classes}} contains (whatever the element class of your button is). You can find this out by highlighting the button the page, right-clicking and choosing ‘Inspect Element’. Elements are just a posh word for ‘things’ – don’t get too worried about the terminology.

What this means: the virtual pageview will be sent to Google Analytics whenever your click listener tag fires on an element that has the specified element class.

Debugging

Now preview and debug the site. Keep Google Analytics’ real-time reports open and track your progress – you want to check that GA is recording the virtual pageview at the right moment. If you’re doing this in UAT it will be easier to see the impact your specific behaviour is having because it won’t be confused with other site users.

You can also use the Google Tag Manager debug pane to check tags are being fired at the correct times. If you aren’t familiar with code it may take you some time to identify the specific element class of your button and you might find your virtual pageview tag is firing too readily, or not at all. Remember that the class has to be as specific as possible here – that of the button itself, not of the page, div or wrapper surrounding it.

Remember that with any amend you make to the Tag Manager set up you’ll need to re-preview and debug it.

Conclusion

Play around with it and you’ll get there. Let me know if you have any other questions, and if you’ve found this helpful, take a look at my other articles about ecommerce and digital marketing.

Thanks!

2 comments

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>