• Internet Marketing
    • Google Analytics
    • Google Tag Manager
    • SEO
    • Content
    • Marketing Automation
    • Social Media
    • PPC
  • Technology
    • Mobile
    • ISP
    • Hosting
    • Tools & Services
  • Resources
    • Useful And Unique Sites
    • Google Analytics Referral Spam Filters
    • Google Analytics URL Builder for Custom UTM Codes
  • Contact
www.gregcruce.com
  • Internet Marketing
    • Google Analytics
    • Google Tag Manager
    • SEO
    • Content
    • Marketing Automation
    • Social Media
    • PPC
  • Technology
    • Mobile
    • ISP
    • Hosting
    • Tools & Services
  • Resources
    • Useful And Unique Sites
    • Google Analytics Referral Spam Filters
    • Google Analytics URL Builder for Custom UTM Codes
  • Contact
Where To Place Google Tag Manager Code
12 April 2016

Where To Place Google Tag Manager Code

Written by Greg Cruce
Google Tag Manager, Internet Marketing 8 Comments
Share

I’ve seen a bit of confusion around Google Tag Manager placement in some blogs and websites. Some blogs and websites say that that the Google Tag Manager code placement should be above the closing </body> tag, while others say the Google Tag Manager code placement needs to be just after the opening <body> tag, and yet others say Google Tag Manager code works the same as Google Analytics in the <head></head>.

So, which of these GTM code placements is right?

Best Google Tag Manger Placement

Updated October 2016


Google updated their Google Tag Manager code mid-2016 and split up the duties, which means there are now two pieces of code to insert, and those two pieces of GTM code do in different locations. If you are worried about your GTM code being out of date – the old code still works, but the newer way is preferred for installations going forward.

1st portion – as high in the <head> as possible

This fetches a JS file early to set up Google Tag Manager. Be sure to replace the “XXX-XXXXX” in the code below with your GTM ID.

<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','XXX-XXXXX');</script>
<!-- End Google Tag Manager -->

2nd portion – immediately after the opening <body> tag

This code will fire only if JS isn’t detected or disabled by the user. Again, be sure to replace the “XXX-XXXXX” with your GTM ID.

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=XXX-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Together, these two scripts ensure fast loading of Google Tag Manager.

Does The Legacy Google Tag Manager Code And Placement Still Work?

Yep, in fact, many sites still run the legacy Google Tag Manager code. Of course, it’s best to use the new GTM code, but if you have hundreds of sites to update, there’s no sense of urgency and this allows you to update the GTM code as time allows.

Legacy Google Tag Manager Code And Best Placement

Legacy Google Tag Manager code placement works best when directly after the opening <body> tag. Google even says so in their setup documentation.

This can be confusing to someone familiar with traditional Google Analytics code, which works best in the <head></head> portion of the page.

Example Code

</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>// <![CDATA[
(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-A1B2C3');
// ]]></script>
<!-- End Google Tag Manager -->

The Reasoning

So why the difference between Google Analytics code placement versus legacy Google Tag Manager and the new Tag Manager code? I think it’s partly because there are differences between HTML and XHTML for <noscript>. HTML says it’s fine to have <noscript> in the head, why XHTML says you cannot. That could create a large support nightmare and easily be overlooked, so it’s likely why Google opted to update the code beyond the legacy version.

Join other digital marketers who have a head start

Free online marketing tips and resources delivered to your inbox

No charge. Unsubscribe anytime

Greg Cruce

Greg has over 20 years of combined experience in the disciplines of web development, computer programming, IT, and Internet marketing and strategy. This unique skillset allows for powerful insights from consulting, strategy, execution and analysis.

8 Comments

  1. THomas Bosilevac Reply to THomas to THomas Bosilevac" aria-label=' Reply to THomas to THomas Bosilevac'> Reply to THomas
    November 18, 2016 at 8:09 pm

    I am not sure placing the code at the very top of the page, directly after the opening “HEAD” tag is the best directions. It does not seem to work in a few cases recently. Furthermore, when you implement the PageLoad dataLayer (vs s dataLayer push) it needs to be above GTM anyway, which may cause confusion.

    It seems the more optimal place would be after all the “META” tags.

    Any comments?

    • Greg Cruce Reply to Greg to Greg Cruce" aria-label=' Reply to Greg to Greg Cruce'> Reply to Greg
      November 19, 2016 at 4:38 pm

      Hi Thomas! Google’s documentation advises to place it as close to the top of the head as possible (https://developers.google.com/tag-manager/quickstart). I’d have to presume that’s so Tag Manager can process the page, load time, and other things before any other head dependencies slow down the page. If you have some examples and instances of this running contrary, I’d love to dig in and diagnose what could be affecting this.

  2. Jeremy Miller Reply to Jeremy to Jeremy Miller" aria-label=' Reply to Jeremy to Jeremy Miller'> Reply to Jeremy
    October 30, 2016 at 2:26 pm

    Hi Greg,

    I was implementing the snippet after the opening body tag but then recently began noticing issues in my GA reporting. Looking for answers, I noticed that the tag manager documentation recommended placing the js snippet in the and the no-script snippet after the opening . Checking to make sure it was implemented right, I used Tag Assistant and it gave me an error saying I need to place the snippet after the opening tag: https://support.google.com/tagassistant/answer/3207128?ref_topic=2947092#body_tag

    I am totally confused. Is Google’s documentation off? Did I misinterpret what they were suggesting?

    Any help is appreciated!

    Jeremy

    • Greg Cruce Reply to Greg to Greg Cruce" aria-label=' Reply to Greg to Greg Cruce'> Reply to Greg
      November 4, 2016 at 9:41 pm

      Hi Jeremy,

      It appears that Google has updated their Google Tag Manager code to use two parts of the code – you may wish to try the new code and see if it works better. I’ve updated the article and I think it will help you now.

  3. James Farthing Reply to James to James Farthing" aria-label=' Reply to James to James Farthing'> Reply to James
    October 18, 2016 at 8:34 pm

    The confusing part for me seems to come from Google changing their documentation on where to place it. Last time I checked it was placed at the beginning of the . Now it is split. From the link you provided:

    “The JavaScript snippet will be placed in the of your web page’s HTML output, and the section should appear immediately after the opening element. For best results, the JavaScript portion of the snippet should be placed as close to the opening element as possible…”

    An easier read here: https://developers.google.com/tag-manager/quickstart

    • Greg Cruce Reply to Greg to Greg Cruce" aria-label=' Reply to Greg to Greg Cruce'> Reply to Greg
      November 4, 2016 at 9:24 pm

      Hi James,

      Yep, you are totally correct – Google updated the code up into two pieces now. First is a JS that should ideally go up at the top of the head, and another is a noscript iframe in case the user blocks JS. I’ll need to update this documentation now.

  4. Nik Reply to Nik to Nik" aria-label=' Reply to Nik to Nik'> Reply to Nik
    August 31, 2016 at 2:20 pm

    Hi Greg,

    Will it create problem in firing of other third party tags including GA tag, if GTM tag is placed just before the end of body tag. How does other tags work in sync with GTM. I mean should GTM tag fire before other tags? I’m facing issue with FB & Yahoo pixel, it’s not getting fired as GTM code is placed in the footer.

    Thanks.

    • Greg Cruce Reply to Greg to Greg Cruce" aria-label=' Reply to Greg to Greg Cruce'> Reply to Greg
      September 3, 2016 at 7:47 am

      GTM should be near the top. This is because the scripts fire in a top-down design, so having GTM at the top gives you the best chance to fire first and accurately. Putting GTM at the bottom of the body would allow other things such as scripts and movies to load first, and stall GTM from loading properly.

Leave a Reply

Cancel reply

www.gregcruce.com

The professional blog by Greg Cruce, an Internet and Digital Marketing professional.

  • About Me
  • Subscribe to RSS
  • Connect via LinkedIn
  • Connect via Twitter

Posts

  • Exclude Internal Traffic With A Dynamic IP Address In Google Analytics
    Exclude Internal Traffic With A Dynamic IP Address In Google Analytics
  • Why Did My Bounce Rate Drop In Google Analytics?
    Why Did My Bounce Rate Drop In Google Analytics?
  • 8 Call To Action Examples (And 3 Rules For Effective CTAs)

Services

  • Google Analytics Consulting
copyright www.gregcruce.com