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.
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?
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.
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
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.
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
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.
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.
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.