I ran into a weird issue a few weeks ago when I noticed that some of our client’s Google Analytics accounts weren’t reporting proper conversion data. To figure out what was going on, I looked at implementation of the Universal Analytics tag – nothing. Looked at account linking setup – nothing. Then, when I wanted to compare the Analytics tag itself to what was implemented on those sites, I found myself asking – “what in the gtag is this?”. Yes, implementing the new tag solved all issues related to those GA accounts.
Just like my experience described above, there could be many reasons for why you might have tried to update your Google Analytics tag for your website lately; which, probably, lead you to notice that there is a brand new tag available, which looks like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-XX');
</script>
What is gtag, or, Global Site Tag, and what is it for?
Gtag is a brand new tracking code that has to be installed on your website the same way as the Universal Google Analytics tag, but now it has grown much more powerful as far as its capabilities go. The goal of the new gtag, basically, is to create a way to centralize all Google’s products’ tags – by which I mean, this tag can be modified to run more than just Analytics for your website.
What happened to the universal analytics tag? Why is there a new one in place?
Well, the answer is quite simple. As always, Google is trying to make everyone’s life easier. (Probably too easy, if you ask data scientists. Google likes to numb down about all of their press releases, and details of their analytics related products). Meanwhile, the purpose of this tag is to get rid of the need of having X amount of different codes to run Google’s products – which is both – convenient and can increase the overall page-speed.
What a deal, right?
Well, yes and no. We kind of already have a centralized tag management software made by Google (Google Tag Manager); which, by the idea, runs on the same type of tag as the new gtag.
SIDE NOTE: The product is not fully finished. It still is yet to become more advanced, and give analytics experts more control on being able to track more data than just than the basic user behavior.
So where’s the catch, you may ask? Well, join the club – there are many data analysts that ask the same question.
Either way – let’s get to the good stuff now.
Google Analytics gtag implementation:
This will be the simplest part of the whole guide. All you have to do is copy/paste the code from Google Analytics and implement it in the part of your site as high as possible.
Meanwhile, there are items that have changed quite a bit. Here are the main things that you should pay attention to:
– EVENT TRACKING
The new snippet to track events look like this:
gtag('event', 'XXX',{'event_category': 'XXXX','event_label': 'XXXX'});
>> Where XXX stands for custom labels you’d like to select.
– ADDING MULTIPLE GOOGLE ANALYTICS TAGS TO GTAG
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-XX');
gtag('config', 'UA-YYYYYYYY-YY');
</script>
>> XXX referring to your initial GA tag, while YYY being the second Google Analytics ID you want to push the data to.
– OTHER, MORE ADVANCED CONTROL ELEMENTS
I could keep going with this list until Christmas of 2018, so I will simply share Google’s definite guides for:
a) Google Analytics tracking parameters – https://goo.gl/bfoJX8
b) Google Analytics Enhanced ecommerce tracking – https://goo.gl/rdSnDc
Google AdWords universal tag implementation:
If you do any kinds of Google AdWords advertising and would like to use tags from the new interface, you’re in for a slight surprise. The new AdWords interface has completely different conversion tags. Now, you not only have to implement a specific AdWords global tag throughout your whole website, but you also have to add an additional snippet to the gtag on the specific pages you want to track. How convenient!
To track the main AdWords tag, you don’t have to implement the whole thing – simply add an AdWords snippet to the existing gtag. Which will look something like this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script> window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-XX');
gtag('config', 'AW-XXXXXXXXX');
</script>
And then, for the page you want to track, your tag will have to be updated like this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-XX');
gtag('config', 'AW-XXXXXXXXX');
gtag('event', 'conversion', {'send_to': 'AW-XXXXXXXXX/{Conversion_ID}'});
</script>
>> Where AW-XXXXXX is your assigned AdWords ID & {Conversion_ID} is replaced with your specific AdWords conversion goal ID
Google Optimize gtag implementation:
Even though Google Optimize has been such a popular tool lately, it seems like there isn’t that much content on how to implement it. To say the least, it’s not complicated, but a helpful guide never killed anybody.
So, we will be updating the same gtag, but instead of ‘config’, we will extend our existing analytics part to:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id= UA-XXXXXXXX-XX "></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ' UA-XXXXXXXX-XX', { 'optimize_id': 'GTM-XXXXXXX'});
</script>
And if you’d like to reduce the visual flickering when conducting Optimize tests, add this little snippet above the gtag itself:
<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXXX':true});
</script>
>> UA being your Analytics code, and GTM being the given ID from the Optimize interface
What do I think of gtag?
Other than that, there’s a question sitting in the back of everyone’s mind – will this ultimately replace GTM, or, is this just another failed tracking implementation attempt by Google?
Google is great, but they do need to work on understanding the scopes of their own projects – and if they’d ever take my advice, they’d have about half the tools they have, but they’d all be gravy, baby!
If you have any questions or concerns about on how to implement gtag, feel free to drop a comment below!