Blog

There has been a lot of talk about Google Tag Manager (GTM) lately, Google even said that Google Tag Manager is serving twice the amount of traffic since April 2013, so I think it’s safe to say that GTM isn’t going anywhere.

If you don’t know what Google Tag Manager is, I’ll let Google explain what it does: “Google Tag Manager lets you add or update your website tags and mobile applications, easily and for free, whenever you want, without bugging the IT folks.” Yes, that’s right, without bugging the IT folks.

There are plenty of excellent resources for describing the functionality and features of Google Tag Manager, so I’ll link to those if this is relatively new to you. However, what I want to touch on is how you can “Future Proof” your current Google Analytics implementation by dual-tagging your website with both the Google Analytics Classic Analytics (CA) and Google Analytics Universal Analytics (UA) using Google Tag Manager. Woah, that’s a lot of Google.

Your Current Setup

Let’s say that your current setup has Google Analytics Classic Analytics tracking on every page of your website, along with some event tracking and custom variables. If you need a refresher on what the Classic Analytics tracking looks like, it should look something like this:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12345678-90']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Universal Analytics

You have that wonderful, little snippet of code on all the pages of your website, your tracking how many button clicks your contact form submit receives, and maybe, just maybe, you’re even segmenting your visitors based on whether or not they are logged-in to the site. But hold on a minute, didn’t you hear that Google announced Universal Analytics? It’s like the future of analytics, man. Google essentially rewrote the ga.js from the ground-up, meaning that there now is a new syntax related to how event tracking and custom variables are fired. But before you start to implement Universal Analytics, it’s important to note that it’s only in beta. So… you don’t want to necessarily jump head first into Universal Analytics; however, you don’t want to be the last kid in the race to get UA implemented on your site. So what do you do? Ahhhh, the solution: dual-tag your site with both Classic Analytics and Universal Analytics using GTM.

Dual-tagging

Wait, dual-tag? Won’t that send duplicate data to my existing Classic Analytics account? Nope. In order to setup an instance of Universal Analytics, you must create a new Web Property i.e. a new UA-ID. Thus you will have two Web Properties: Google Analytics Classic Analytics and Google Analytics Universal Analytics.

So, you now have an additional tag that needs to be applied to every page of your website, you have to add an additional track event tag that form submit button AND you need to add an additional set custom var to your logged in users. Most likely, you probably have more event tracking and custom variable implemented on your sight, so you can see what a pain in the butt this could be to manually dual-tag your website. Now you (or more accurately, your IT/developer guy) could go to every page on your website and apply the duplicate tracking codes where necessary. Easy enough, right? However, what happens when Google announces that Universal Analytics is out of beta? Now you have to go back to IT guy and ask him to remove the old legacy code. Not fun for IT guy.

Using Google Tag Manager to Dual-tag your site

So let’s go back to the point where you now have to two tags that need to be applied to every page of your website. Instead of saying, “Hey, IT guy, can you add this fancy new Universal Analytics tracking on every page and then later in the year, go back and remove the old Classic Analytics tag on every page?”; you could say, “Hey, IT guy, we’d like to make your job a lot easier and bug you a lot less, is there a way you could remove our Classic Analytics code currently on the site, and drop in this Google Tag Manager container code and add a Data Layer?” Trust IT Guy, you want to be saying the latter. 

So, IT guy gets back to you to say that he’s created a dev site and removed the Classic Analytics code, and has added the new Google Tag Manager container code and Data Layer to every page. Noticed I said “he’s created a dev site”. A dev site or staging environment is highly recommended when deploying Google Tag Manager. It will allow for a clean migration from Google Analytics (hosted on your site) to Google Analytics (hosted through GTM). He’s also wondering if he needs to tag the form submit button and apply the custom variable to Logged In users. You say, “No, we can handle this through a custom HTML tag and data layer variables within Google Tag Manager”. This is WHY you should double tag using Google Tag Manager. By not having to add event tracking code to onclick of anchor tags, you can add it using jQuery selectors within a custom HTML tag for both Classic Analytics and Universal Analytics. Yes, the same code within this custom HTML tag can fire tags to both Classic Analytics and Universal Analytics.

Setting up your Google Analytics staging environment

There are a few ways you can prevent data coming in from the staging environment to your production site:

1) Create a filter on your production site to exclude traffic from dev hostname, and create another profile to include only traffic from that dev hostname. (recommended)

2) Create two properties (Classic Analytics and Universal Analytics) for dev and when the changes go to the production site, swap out the dev ID’s for the production ID’s.

Adding Classic Analytics and Universal Analytics to Google Tag Manager

The container code and data layer has been added to the dev site. Now, we can configure both the Google Analytics and Universal Analytics in Google Tag Manager.

To start, we’re going to create two new Tags: one for Google Analytics and one for Universal Analytics. Next, we name both the Tags and assign their Web Property ID from Google Analytics. You can get this by going to to your Accounts Overview section of Google Analytics.

Once you’ve named and added their respective Web Property ID’s, it’s now time to Add a Rule to Fire Tag. Because we want both of these tags to fire on all pages of the website, we choose the “All Pages” rule, which is included by default, when GTM is activated.

To setup event tracking, your simply going to create a new Custom HTML tag and insert some jQuery to select the elements you want to apply click event on – MOZ wrote an awesome article covering how to do exactly this.

To setup custom variable tracking using data layer variables, you’ll need to reference the macro when you add the custom variable under More Settings > Custom Variables.*Note: when you will need to define the data layer variable in the data layer object beforeyou give it to IT guy. If data layer variables are new to you, check out the Google Tag Manager documentation.

Once you’ve confirmed that the tags are firing, you publish. That’s it.

As with any implementation, it’s a good idea to go into both of the Properties and view that data is coming in correctly. Once you’ve seen the data some data coming in for a few days, it’s time to roll out of the dev site and into your production site.

As you can see, Google Tag Manager is a very powerful and flexible tool for helping you (and your IT guy) in the deployment and management of tags. Dual-tagging a site allows for a seamless integration once Google releases Universal Analytics.