Google Tag Manager: What You Should Know

Google Tag Manager: What You Should Know

Posted by on Mon, Oct 1, 2012
Filed Under | Analytics, Online Marketing


Google Tag Manager [logo]Google announced Google Tag Manager today at eMetrics in Boston.  This is Google’s entry into the Tag Management Solution arena.  What is this product? How can you leverage it?  How does it compare to other solutions?  Read on to learn the answers to these questions and get valuable tips and tricks.

As a Google Analytics Certified Partner, Blast Advanced Media has been selected as one of the first Google Tag Manager specialists.  We have been vetted by Google to provide support on this tag management system. This is an exciting new product announcement by Google because it brings tag management to the masses and it can benefit so many companies.

There are plenty of paid TMSs (Tag Management Solutions) to compare it to when you are selecting a TMS, but Google Tag Manager is a free tool which provides a quick entry point to start leveraging and understanding how a TMS can benefit your company.  If Google Tag Manager doesn’t meet your needs or doesn’t scale in features with your needs, there are plenty of other tag management systems to consider that we can help you compare and make the best choice.

What is It?

Google Tag Manager is a free tool that consolidates your website tags with a single snippet of code and lets you manage everything from a web interface.  You can add and update your own tags, with just a few clicks, whenever you want, without bugging the IT folks or rewriting site code.  It gives marketers greater flexibility, and lets webmasters focus on other important tasks.

Use Case

Let’s say that you receive a request to add an AdWords conversion pixel on the thank you page of a form.

Normal Process: Forward the request to IT and have them add the conversion pixel code to the thank you page. You may have to wait for the next release cycle to get it in place and you are spending extra man hours to get the code in place.

Google Tag Manager Process: Login to Google Tag Manager, and use the AdWords tag template with a rule to fire when matching the thank you page URL.

Google Tag Manager: Add New Tag

The clear benefit of the Google Tag Manager workflow is that the process takes a few minutes. Create the tag, verify/test, and publish.

How Does it Work?

Google Tag Manager is an asynchronous javascript snippet that is placed across your entire site after the opening tag. This tag snippet looks something like the following:

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
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-XXXX');</script>
<!-- End Google Tag Manager -->

Once this tag (i.e. script) is in place, the gtm.js file asynchronously loads from Google’s worldwide CDN (content delivery network), containing all of the tags that can fire as well as rules and macro information.  This tag is cached after the first pageview.  When the page loads, gtm.js parses rules to determine if a tag should fire.  If it should fire, then it adds the appropriate tag to the page.

Terminology

Tags: There are several tag templates and then you can also use a custom HTML (paste in the script) or custom image pixel tag.  The following tag templates / tag types currently exist:

  • AdWords Conversion Tracking
  • DoubleClick Floodlight Counter
  • DoubleClick Floodlight Sales
  • Google Analytics
  • GDN Remarketing (Google Display Network)
  • Custom Image Tags (for all other image pixels)
  • Custom HTML Tags (for all other tags)

Rules: Define when a tag should fire or should not fire. All tags must have a rule.

Macros: There are various macro types that you can define that leverage constant strings, javascript variables, DOM text, and more and you can then use these in your tags or in your rules.  For example, grabbing a dynamic value from the page to pass in the dollar value of a conversion for an AdWords conversion pixel.

This entire process is asynchronous, which means that your page is not going to stop loading if there is a tag (or even the main gtm.js) that fails to load.  WARNING: Due to this architecture, you will not want to put A/B testing tags or other tags that modify the look of your page (as it would cause a visible flicker when executing).

What to Use Google Tag Manager for?

  • Use the installation process as an opportunity to evaluate your tagging strategy for both improvements and corrections.  You may not need to fire a pixel that you setup 5 years ago.
  • Manage your tags outside of your development and code release cycles.
  • Quickly implement new tags or proof-of-concepts.  Let’s say you want to test out CrazyEgg.  It is a snippet of code to add to your site and if you added it via Google Tag Manager, you’d be up and running in a few minutes.
  • Decrease page load time by only firing tags that are needed for specific URLs or events/interactions and converting tags to be asynchronous.
  • Expand the possibilities of the analytics data that you can collect by leveraging Google Tag Manager to set custom variables and other values in your analytics tool.
  • Increase the accuracy and consistency of tags.
  • Increase the visibility of what tags exist across your site.  You’ll be able to easily determine what tags are firing and where, with the ability to turn off tags that are no longer needed.
  • Use the permission hierarchy of Google Tag Manager to allow some users to only view, others to view and edit, and then others to view, edit, and publish.

How Does it Compare?

Cost: It is completely free. Google Tag Manager is a free product and it has no usage limits (no limits on the number of pageviews).  Other paid Tag Management Solutions (TMSs) charge based on volume or based on the number of installed sites.  As a free product, it does not have an SLA associate with it, while other paid tag management system vendors will offer SLAs.

Tag Delivery: Google Tag Manager uses Google’s Content Delivery Network (CDN), so it is fast.  You are leveraging Google’s world-wide content delivery network, which makes your tags load quickly across servers around the globe (based on the visitor’s location).  Other tag management systems use CDNs as well or in some cases allow you to host your own files.

Tag Loading: Google Tag Manager tags are loaded asynchronously.  This is great for loading measurement and marketing tags, but not so great for A/B testing tags.  Google has stated that this product does not support such tags and that support for these tags is on the roadmap.  Many other TMSs will accommodate A/B testing tags by loading some of tags synchronously.  Additionally, in Google Tag Manager, you cannot specify load order of tags.

Tag Templates: Google Tag Manager has a very limited number of tag templates.  The template for Google Analytics is limiting as it lacks support for cross-domain tracking and other configuration options (forcing users to use the custom HTML tag template instead).  As you would expect, you won’t find non-Google product tag templates in here, but you do have the flexibility of leveraging the custom templates for these tags.  Other tag management solutions have far more templates with many more options within the template.  Google Tag Manager tags are limited to 10,240 characters; I suspect most other TMSs don’t have this same limit (you can work around this in a variety of ways though).

Ease of Use: The interface is straight forward, but the concept of macros will be a bit confusing to brand new users.  If you are not using a Google tag (AdWords, DoubleClick, etc), there will not be a template to help less technical users.

Permissions: Google Tag Manager supports three user access levels (view only, view/edit, and view/edit/publish).  This hierarchy is simple to grasp and is effective for most needs.  In some cases, other tag management solutions will offer more robust and customized permission levels.

Deployment: Google Tag Manager offers a preview and debug mode that can be leveraged prior to a full publish.  The preview and debug mode is nice for less technical users to validate that a tag is firing.  It also supports versioning for each publish that is made, with the ability to roll back to a previously published version.  The tag management versioning is not as robust as other TMSs but you can certainly function just fine within Google’s versioning framework.  A recommendation for Google on the versioning would be to record which user published the changes.

Other Features: Google Tag Manager is just a tag manager.  It does not have other features that are popping up with other TMSs, such as built-in privacy management, application tagging support, and attribution management.  Google Tag Manager also lacks an API.

Google Tag Manager Tips & Tricks

  • Realize that the tags you add are asynchronous, meaning that if you have inline html that expects the tag to already be loaded, it can fail or cause javascript errors.
    • For Google Analytics users, we recommend defining the _gaq object above the GTM script. An example would be:
    <script type="text/javascript">var _gaq = _gaq || [];</script>
    <!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
    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-XXXX');</script>
    <!-- End Google Tag Manager -->
    
  • Google Tag Manager compresses your script using a logic similar to the closure compiler.  As such, it will rewrite function names and parameters to optimize. This can fail though if you were to use eval() to reference a dynamic variable (though you likely should not be using eval() in most cases anyways).
  • From our testing, the custom html tag has a limit of 10,240 characters.  If your script exceeds this, you can use the Closure Compiler service mentioned above to compress the script.  If it still doesn’t fit, you’ll need to split your script into multiple tags or place it in a .js file on your server and just load it from that file.

Google Tag Manager Resources

There are several Google Tag Manager resources:

We would love to help you assess, guide, and implement your tagging strategy on whichever tag management solution best fits your needs.  Contact us to learn more about how Blast Advanced Media will help you.

Also stay tuned for a followup post from us that will explain effective ways to leverage macros in Google Tag Manager.

Enjoy this post?

Join the discussion below, subscribe to our RSS feed or share it on the web.

This post was written by:

has written 29 posts on the Web Analytics Blog.

Joe is the Analytics Director and a Partner at Blast Analytics & Marketing. He understands Google Analytics like nobody else and is a master of many programming languages.

Add Joe to your circles on Google+


Tags: , ,
  • geek

    Great post! do you know if anybody has a template for sitecatalyst code or test and target?

  • http://www.blastam.com Joe Christopher

    @d7d3c6bf6ba6a7544a1e05560bafebf7:disqus You’ll need to use a custom HTML tag. Note that GTM has a 10k character limit per tag, so you can’t put your entire s_code.js in there; you must reference the path to it. You’d want the tag to contain both the s_code.js and the s.t() function all within the same tag. You can also use the dynamic variables feature (macros) within GTM to set props and eVars, etc.

  • http://palimadra.tumblr.com/ Pali Madra

    This seems exciting.

    So I can use the tag manager to add meta tags for certain pages using the ‘custom HTML tag’ option?

  • http://www.blastam.com Joe Christopher

    @palimadra:disqus There are a few things to be aware of. You can add html to a page, but it is added asynchronously. When you add html to a page, it is echo’d out directly above the closing tag. You could target the DOM and insert html elsewhere of course via javascript.

    If you are looking to add meta tags for SEO purposes, it wouldn’t exist in the page for the crawler, just for your visitors that execute javascript (and of course after a small delay due to the asynchronous nature of this tag).

    If you are adding a meta tag for other purposes, you could do so, but you can’t rely on that meta tag to exist until the GTM tag has fired – again it is asynchronous.

    Thanks,
    Joe

  • http://www.facebook.com/sripanik Sripani Kodhamagundla

    Joe- if i don’t use meta tags for each page and just add the tag manager code in all the pages, how does it help me in optimization

  • sanjay just on track

    hi Joe, Thanks for sharing GTM that’s was awesome, but i have query in my mind if we replace the google analytics with GTM then we can access the google analytics account ,means we can see statics of site like traffic , visitors and so on…

  • http://twitter.com/ronkinkade Ron Kinkade

    supposedly GTM doesn’t play nice with the document.write function of the SiteCatalyst onpage code – are you saying that this is a non-issue?

  • http://thietbivesinhvn.com.vn/ Hoangmaicorp

    After installing my Google Tag Manager, can i :
    - Remove the code tag in my website hosting ?
    - Put the new code tag in the Tag Manager without the web ?

    For example: I have installed the Twitter button (Tweet) website, after you install Google tagmanager, I can delete all of the code of Twitter on my website, just save this code in my Tag Manager account ??
    Please help me problems !
    Thank you very much….

  • http://thietbivesinhvn.com.vn/ Hoangmaicorp

    After installing my Google Tag Manager can:
    - Remove the code tag in my website hosting?
    - Put the new code tag in the Tag Manager without the web?

    For example: I have installed the Twitter button (Tweet) website, after you install Google tagmanager, I can delete all of the code of Twitter on my website, just save this code in my Tag Manager account??
    Please help me problems!
    Thank you very much.

  • http://www.blastam.com Joe Christopher

    Yes that is correct. You can move *most* tags into GTM. The only tags you can’t really move are a/b testing tags, tags that use document.write(), and tags that need to show something on the page immediately as the page loads without flicker.

  • KimK1703

    Hi Joe,

    I know it’s an old article, but can you please elaborate a bit on why you recommend defining the _gaq object above the GTM script? Thanks :)

  • http://www.blastam.com Joe Christopher

    @KimK1703:disqus Good question. It depends on your implementation. My suggestion to define it above the GTM script was so that if you did have any inline _gaq.push’s it wouldn’t cause a js error. This is more of a recommendation when you are transitioning and leaving _gaq.push’s inline in your code (specifically those that could fire before gtm finishes loading).

  • http://www.blastam.com/ Olaf Calderon

    @KimK1703:disqus thanks for pointing that out, I did go back and revise the post to make sure the code shows up correctly -

  • KimK1703

    Hi Olaf,

    Thanks and thank you guys for producing and sharing fantastic content! :)



Goal Driven Online Marketing & Analytics
Copyright © 1999-2013 Blast Analytics & Marketing