If you’re installing Google Tag Manager on your website for the first time, you may be wondering whether the GTM container code should go in the header or footer of the HTML markup.
This is a good question—and an important one to ask. After all, the way you implement JavaScript code on your website has important implications for page load time and user experience.
The long answer short is that the code snippets for Google Tag Manager are supposed to go at the beginning of the <head> and <body> tags, and not in the footer.
To install a Google Tag Manager container on your website, you need to place two code snippets in the HTML markup: a <script> tag as high as possible in the <head> section and a <noscript> tag immediately after the opening of the <body> section.
The <script> tag that goes as high as possible in the <head> section looks like this:
<!-- 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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->And the <noscript> tag that goes immediately after the opening of the <body> section looks like this:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Note that, in your real-world implementation, GTM-XXXXXXX in the code snippets above needs to be replaced with the ID for your Google Tag Manager container.
Optionally, and only if you have business needs that require it, you can consider instantiating a data layer array object for more robust measurement.
Can You Implement GTM in the Footer?
You can implement the Google Tag Manager code snippet in the footer of your website, but this is far from ideal.
The principle is this: The higher up in your HTML markup the Google Tag Manager code snippet is, the sooner it will load and start firing tags for your ad retargeting and web analytics.
If the code snippet for GTM is in the footer of your website’s HTML markup, there’s a good chance that Google Ads and Google Analytics won’t capture all visitors because some will bounce before the browser gets to load the footer tags.
Should the GTM Code Snippets Be Present on Every Page?
What about the implementation pattern for Google Tag Manager? Is it supposed to be implemented on every page, or only on some pages?
As a rule of thumb, the Google Tag Manager code snippets should be implemented on every single page of your website. (Unless there’s a business requirement to specifically not load GTM on a particular page or URL path.)
By implementing Google Tag Manager on every page, you allow the tag management professionals on your team to deploy code snippets, called tags, based on business rules, called triggers, as needed in support of analytics tracking and ad retargeting.
(For example, they can configure Google Tag Manager to trigger the Google Analytics tag on all pages and a Facebook ad retargeting pixel only on the landing page it applies to.)
Is Google Tag Manager Asynchronous?
The code snippet for Google Tag Manager is asynchronous, which means that, generally, it doesn’t block the rendering of other elements on the page.
All tags deployed via Google Tag Manager are also loaded asynchronously, which means your analytics tags, ad pixels, and other third-party tags are downloaded in parallel with the parsing of the page.
However, as Catchpoint Systems describes on its blog, the loading of certain tags via Google Tag Manager can still affect the timing of the onload event on the front end. And if you have UX elements whose rendering depends on the onload event, that can delay the loading of your website.
