As blogger and Google Analytics enthusiast, immediately after migrating to Google Tag Manager I started facing the problem on how to specifically track page views with the typical setup a blogger actually needs. There’s plenty of tutorial about Google Tag Manager on the web. However, a clever set of best practices from the blogger’s perspective and specifically written to optimize performance of blog posts is still missing in the wild.
This tutorial is aimed to help the newcomers to configure a set of useful tags for standard page views tracking in GTM container and customize it for greatest performance when used in a blog.
What do you need to follow this tutorial?
- A Blog, obviously. We’re going to refer to WordPress, here, but tags can be easily adapted for other blogging platforms with no pain;
- A Google Analytics property, used to track page views, among other things. I assume you have some experiences with GA and the words Views, Tracking Code and analytics.js are not Kabbalah, for you;
- A brand-new, empty, Google Tag Manager container. We’re going to fill it with some juicy tags here.
Although not strictly mandatory, a very basic knowledge on how GTM works and its “Tags ‘n Triggers” model is really recommended. This is not really friendly for the newcomer, so don’t be shy and let the GTM Getting Started Guide be your best friend.
Add a Google Analytics tag and start to track page views
The first step to do is to add a Google Analytics variable holding the value of your UA Google Analytics property.
- Go to the Variables panel and add a new variable
- Select Constant as the variable type
- Fill with the UA string as you may read on the Google Analytics Admin section. Do not add quotes.
Although not strictly mandatory, this will allow you to easily add Google Analytics tag multiple time in your container, saving lot of time.
Now, add the Google Analytics page view tag.
- Go to the Tags panel and create a new tag
- Choose Google Analytics as product and Universal Analytics as type
- Select from the dropdown menu the variable you defined above as the Tracking ID
- Select Page View as Track Type
- Since we want to track pageviews for the entire website, select All Pages as Fire On condition.
Save the Tag, then Preview the container and eventually Publish it. Congrats! You’re performing a very basic pageviews tracking. It’s bare-vanilla, indeed, and it works already. But we can do better
Force Google Tag Manager to not collect pageviews from preview pages while authoring
Previewing a page is obviously one of the most common task a blogger do while writing and formatting a post. As a matter of facts, almost all blogging platform offers a preview feature, which allows authors to get a view on how the post will look like with the destination theme and layout. Unfortunately, this causes to track pageviews even during the authoring stage, sending polluting to Google Analytics.
There’re plenty of solutions on how to filter out these data from Google Analytics using filters, and it’s often a pain in the neck. Google Tag Manager gives you a more elegant way to manage that at an earlier stage, blocking the pageview tag before it’s actually fired.
The key is to map the URL fragment of a post that identifies a preview page and to use it to conditionally fire or not the GTM tag. As an example, consider this post. The preview URL is https://gabrielebaldassarre.com/2015/09/17/track-pageviews-google-tag-manager/&preview=true.
This is typical in a standard WordPress installation, but other platforms have theirs and you just need to spot them. Now let’s go back to Google Tag Manager and do the needed changes.
- Go to Variables summary
- Check all the Built-In Variables under Pages (Page URL, Page Hostname, Page Path and Referrer). We will use them later.
- Finally, add a new variable.
Now, we’re going to setup a variable from the URL of the current page.
- Call the variable with something meaningful (ie. Preview Flag)
- Select URL as variable type
- Select Query as Component Type. This tells GTM to look at the query string section of the URL of the page when the variable is accessed.
- Finally, select preview as query key to retain only the element we really need and discard the others. If you’re using a platform different from WordPress, you’ll put the name of your identifying fragment here.
Basically, we declared a variable called Preview Flag with the content of preview URL fragment as value (ie ‘true’, when present). This variable is available everywhere inside GTM (click the image to enlarge).
- Go to the Triggers section and add a new Trigger. Call it Preview Page.
- On Choose Event, select Page View.
- In Configure Trigger, choose Page View.
- On Fire On, select the just-defined variable Preview Flag from the drop down list and set it to be equals to true. Thanks to the variable definition, this condition is evaluated true, enabling the trigger to fire, on every preview page. This is actually the opposite of what we need, but we’re going to fix it in the Tags section, not here. So, save the Trigger, we’ve finished here.
Ok, one final step. Go back to our main page views tracking tag (the one we defined in the first step) and do the magic. Go to the Fire On section and click on Create Exception, then add the Preview Page trigger. You should end up with something really similar to the image below.
This will ensure the page views to be collected on every page but preview, exactly as expected. Save the tag and publish the container and the job is finally done. Hasta luego!