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!

6 comments

  1. Eric

    Great tips, thanks for this. I have one question, though, about your second step in ‘setting the virtual pageview ‘ above:
    “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.”

    I have used the ‘Document path’ field to set this – is that correct?
    (I am doing something slightly different, but similar)

    • Between The Fold

      Hey Eric – sorry for the late reply. Typically most of the comments left are spam so I miss the few good ones! I will try better!

      How did you get on? Do you still need a hand? The field for me is called ‘Virtual Page Path’, and its under More Settings –> Basic Configuration. As GTM has changed the terminology on some features has changed, but I’ve just checked and it is currently as I’ve described it in this comment.

      Let me know if that helps!
      Ian

  2. chris

    Very few post about VPV, So you for sure hit a niche nice article.

    It would be great to see an article about taking auto eventing tracking meets VPV.
    Lets say you have a form that has 15 fields, and you want to track it as a funnel. Event tracking can’t do that so no point using that, but VPV is the only way you can. Now you don’t want to track each form field with it’s own event, macro and tag so surely there is a way out there that you can run a script that will track all the form fields.

    I’m actually rather disappointed with Google and GTM for not having something so simple built. Tracking a form submit button is rather easy, lets talk about VPV.

    ps few screen shots would make this article helpful for people just getting into GTM.

    • Between The Fold

      Hi Chris,

      Yeah, I pretty much agree. You used to be able to do that form field tracking you describe as VPVs in ga.js installations. I did it on a site a few years back for the exact same reason of setting up funnels.

      Could you replicate this through GTM by:

      - Set up click listener etc as above
      - Set up a rule that fires when part of an element class that appears in each field (e.g. if all fields begin ‘checkoutField’, match against that) is matched. If there is no common element in the classes of each element, set up a regEx condition.
      - Set the virtual pageview to {{element classes}}

      ?

      That would then send whatever {{element classes}} are picked up by the data layer to GA as virtual pageviews when they are clicked on. It gives you a little less control over the virtual pageview URLs, but would certainly make the process (and your GTM container) more streamlined. Otherwise, you probably are into individual tags and rules for each field and that can be quite onerous. Especially when scalable stuff like that was quite quick via ga.js.

      BTW – screen shots a great idea. I’ll add some in tomorrow!

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>