Google Tag Manager

01 Jul

Google Analytics has been outdated and to take advantage of many new tracking features, and upgrade to Universal Analytics is required. If you have a lot of Google script tags installed on the site, the best approach to take is to create a Google Tag Manager account. Through there you’ll be able to add all your tags in and only use 1 Google Tag Manager on your site.

https://www.youtube.com/watch?v=KRvbFpeZ11Y

The code snippet that I’ve used, inserted right after the body tag per best practice (replace the * with your Analytics code and replace the # with your Google Tag Manager Code):

<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-******-**', 'auto');</script>

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-######" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-######');</script><!-- End Google Tag Manager -->

As you can see Google Analytics is first and a GA tracker is created. Not sure if this is necessary but it seems to work.

In addition, Google Tag Manager allows marketers to track any kind of page elements for mouse clicks to create ‘event’ triggers on their own without the need of a developer. There is version control and previewing, by clicking on preview, and at least in Chrome, open up a website that has GTM installed and an inspection window will appear like below.