Some Handy Google Tag Manager Tips

I use Google Analytics and Google Tag Manager on a daily basis, from basic pageviews to more advanced implementations. A boardgame once coined the term a minute to learn, a lifetime to master, this is equally true for Analytics and the Tag Manager. Sometimes I use tags that add a lot of valuable data to your Analytics, which I’ll share with you below. But first: let’s set up basic Analytics in the Tag Manager in the most generic way possible:

Tag Manager basics

For now, I’ll assume that you have your container code and dataLayer in place and are getting your basic pageviews up and running. (Quicktip: add your UA code to a Macro so you don’t have to keep typing it.) Now you have your pageview tag set to fire on all pages, but remember how in regular Analytics scripts the pageview code could be appended with a variable for the path? We’ll use that to make virtual pageviews in the Tag Manager:

  1. Create a Macro called vPageview, filled by a dataLayer variable called vPageview.
  2. Next create a Rule called fireOn_vPageview with the content {{event}} equals vPage.
  3. In your basic pageview-tag, go to more settings, basic configuration and add the {{vPageview}} Macro to the Document Path field. Also add the rule you created in step 2 to this tag, which will now fire on every page but also again if the vPage event is detected. All you need to do now is send the event in your javascript:
dataLayer.push({'vPageView': '/whatever/you/want'});
dataLayer.push({'event': 'vPage'});

Using this system, passing data to the dataLayer is how events can be fired too:

  1. create Macro’s for eventAction, eventCategory, eventLabel and eventValue, all filled by dataLayer variables by the same name.
  2. Create a Rule called fireOn_Event with the content {{event}} equals eventChange.
  3. Create an Analytics Event Tracking Tag and fill the variables with their respective Macro’s. Don’t forget to add the rule you just made.

That’s it, the only event Tag you’ll have to make. Calling the event in javascript works in the same way as before; adding the variables to the dataLayer and firing an event that the Tag Manager acts upon:

    'eventCategory' : 'MyEvents',
    'eventAction' : 'Click',
    'eventLabel': $(this).attr('href'),
    'event' : 'eventChange'

You can set up Custom Dimensions the exact same way. Lets start measuring some more advanced stuff that will benefit you in the future:

 Viewport measuring

One thing that always bothered me in Google Analytics was that the only resolution reported was the screen resolution. That’s fine, but when I want to make a landingpage I need to know where the fold is; the vertical point on the page that all the visitors (in the target audience for the website) can see. The screen resolution is pretty useless for that, because the resolution says absolutely nothing about what a user sees. To clarify:


So if I want to put certain content in a position every visitor can see and check resolutions in Analytics, it’ll tell me that everything above the 1050 pixels line will be fine. The actual line however, is at 822 pixels, because we need the viewport size, not the screen size. We need that data!

Luckily, this is fairly easy, just create a new Tag with some custom HTML in it and fire it on all pages:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  'eventCategory' : 'ViewportResolution',
  'eventAction' : 'Viewport',
  'eventLabel': w+'x'+h,
  'event' : 'eventChange'

This is the most basic example of viewport measuring. For production use you might want to restrict firing this tag to a visit instead of a pageview, and also you might want to group resolutions to prevent your data from getting really huge really fast. (I recommend grouping them by 50 pixels at a time.)

That’s it for the tips for now. I will be adding new tips to measure valuable data that Google Analytics misses in the future. How’s that for a teaser?

image credit

Header image: Ignacio Duarte on Flickr