June 2, 2017
How to Install Google Tag Manager on your Website Properly
Even though this topic (How to install Google Tag Manager) might sound way too basic for some of you, remember that there are nuances you should keep in mind. In this blog post, I’ll describe several ways how to install Google Tag Manager on a website, highlighting pros and cons of each option.
Where’s the problem?
Google once recommended placing the container code immediately after the opening <body> tag, but in late 2016 the recommended Google Tag Manager code placement became a little different.
Instead of placing it in the body section, Google Tag Manager has split the container, with one going in the head and the other in the body.
But first, let’s find our GTM snippet.
Where can I find Google Tag Manager code?
Google Tag Manager provides you with the exact code and instructions where to add it to your website. There are two places where you can find it:
- By clicking container ID link (located next to Publish and Preview buttons)
- Or by going to Admin > Account > Container > Install Google Tag Manager
Any of these options will open instructions how to install Google Tag Manager code on your website.
Follow the instruction and place the first code (which is surrounded by <script> tags) somewhere between <head> tags of your website (in case you don’t know, website’s code consists of head and body). This is the key part. It tells your page to load your GTM container asynchronously, which means that the rest of the page can continue loading while Google is doing its magic.
The second Google Tag Manager code (<noscript>) should be placed right after the opening <body> tag. This works as a backup, allowing you to track users without Javascript. The <noscript> tag tells the browser if the user does not have JavaScript enabled, then render an iframe version of the GTM Container to the page.
Important: While you can place both these codes in <body> only, you must not add them both in <head>. As it was mentioned before, <noscript> part renders an iframe, which is not allowed in <head>, otherwise you’re website’s HTML will be invalid.
Why should I place Google Tag Manager code in <head>?
While this is not 100% required, it is highly recommended that you place <script> part of GTM code into <head> of your website.
Why? It’s better for tracking. The higher up in the page the snippet is, the faster it is loaded. In the older version of Google Tag Manager, it was recommended to place the snippet in the body tag, but this would potentially miss users who left your page before the body tag loaded (due to slow page speed).
If your website is pretty heavy, it might take more than few seconds for GTM to start loading in <body>, but in <head> it would be initiated much faster, thus you could catch more visitors and see how they behave.
This could empower you to identify the percentage of traffic which bounces before even the page completely loads.
Remember, the lower your tracking codes are placed in website’s code, the later they will be launched.
Publish the Container
When the code is placed on your website, head over to Google Tag Manager account and publish the container. Especially if it’s empty.
Why? Because unpublished GTM container will cause an error (visible in browser’s console).
|
1 |
404 not found for GET: GET http://www.googletagmanager.com/gtm.js?id=GTM-XXXXX |
Your browser is requesting data from Google’s servers, although that container is still not published, thus no data will be returned.
This isn’t a big problem, but if your developers are tracking Javascript errors with particular tools (e.g. TrackJS), they’ll see those 404 errors in reports. This will create an unwanted noise for them (yes, I know they can use filters, but simply publishing an empty container won’t hurt anybody).
Don’t forget the Data Layer
When Google Tag Manager code is placed on your website, it automatically creates a Data Layer.
It’s like a virtual layer of your website which contains various data points (Get it? That’s why it’s call data layer.). With its help GTM is able to read, push and transfer data between your website and other tracking tools.
If you want to push some data to dataLayer when the page loads, you need to place that data above Google Tag Manager code. Like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'customerType': 'vip', 'registrationCountry': 'United States' }); </script> <script> <!-- Google Tag Manager --> ... <!-- End Google Tag Manager --> </script> </head> |
You may be tempted to add your dataLayer after your container code. This is problematic and will cause issues when you try to push data into the dataLayer.
If you place the dataLayer after the container code it will end up overwriting the dataLayer that the Google Tag Manager creates for you, and you may miss out on having important information available when your first Tags (e.g. Google Analytics Pageview Tag) try to fire.
Frequently Asked Questions
So I’ve described what the perfect and recommended scenario looks like:
- <script> part of Google Tag Manager code goes to <head> (usually before the closing </head> tag).
- <noscript> part goes after the opening <body> tag.
But real-life situations are far from perfect and sometimes we have to deal with very limited circumstances. In this chapter, we’ll discuss other not-so-perfect options and what the possible outcome might be.
#1. Can I place <noscript> part somewhere else rather than right after <body> tag?
Yes, you can.
This usually happens while working with limited content management systems (CMS), which prohibit you from accessing the website’s source directly and only allows to paste tracking codes into a dedicated field. All content of that field is then placed at the very end of website’s HTML.
While it is not recommended, it is possible to put the Google Tag Manager <script> and <noscript> tags in the body section, as shown below. If you are planning on, or already using GTM to run A/B testing, then you definitely should place the top snippet in the head to make sure your experiments run smoothly.
But if you’re planning just to utilize some basic Google Analytics tracking (or something like it), then you should be fine.
But keep in mind, the lower your tracking codes are in website’s code, the later your tracking tags will fire.
#2. Can I remove <noscript> part and use only <script>
Yes.
If you don’t care about people who disable JavaScript completely, you can forgo the <noscript> part completely. Remember: putting it in the HEAD will create non-compliant HTML since an iframe shouldn’t be there.
You should either put noscript part in the <body> or don’t use it at all.
#3. I Installed GTM few years ago; Both <script> and <noscript> parts are in body. Is it bad?
It’s fine.
As it was mentioned before, prior to late 2016, Google’s recommendation was to place the entire Google Tag Manager code to <body>. This is still working till this day.
But remember that you might be losing some tracking data, because GTM (placed in <body>) starts loading a bit later compared to GTM code placed in <head>.
So if you have time and resources, I definitely recommend moving <script> part to <head>.
How To Install Google Tag Manager: Conclusion
The advice here is simple: just follow Google’s instructions.
The most recommended way how to install Google Tag Manager code is to place <script> part to <head> of your website, and <noscript> part should be place somewhere in <body> (preferably right after <body> tag).
This ensures that your marketing tags in GTM will be fired as soon as possible without much of data loss.
The lower Google Tag Manager code placement is, the later your tags will fire. As a result, you might lose a portion of your data.
27 COMMENTS
Thanks, JULIUS!
U do a great job in good manner!
Nice article. How do we setup the GTM for multi-tenant application. for example with url www.xyz.com/abc . Container doesn't allow this url.
Just enter the "www.xyz.com". Actually, it does not matter what you enter as a Container name. (or maybe I did not understand your question?)
Hi Julius, why push datas on tag, in this case is not a simple dataLayer declaration like as dataLayer ({ }) or you force dataLayer to push datas ?
I cannot understand when add simple dL declaration and when push datas.
Thanks for your help! Marcus
Hey Marcus,
Always push data with window.dataLayer.push regardless of what Google's documentation is saying. Multiple GTM experts (e.g. Simo Ahava) recommend pushing data to the data layer (instead of DL declaration).
This way you'll be sure that Data Layer won't be overwritten (because sometimes sh*t happens :) ).
Cheers
Hi Julius!
I'm working with Epages and I cannot add code to the body area. What should I do? I there any alternative? I m really frustrated with this ecommerce solution. Any advice is really appreciated. thanks
Hey, I am not familiar with Epages, if they do not allow to add any JavaScript code to the website, then I have some bad news for you :(
Hi, thanks for writing this post. Closest answer to my questions I found so far.
I can easily add the script to my head tags globally. Unfortunately I'd have to add the no script body code to each page one at a time (my only option due to WCMS provider).
As long as I have the head script in there, will I be ok?...I mean what percentage of users actually have JavaScript turned off in the real world? Would I really be missing out just leaving out the no-script body code?
thanks for the article by the way.
Thanks, JULIUS
You have done a great job.
This is very helpful for me.
I have completed installation on my angular 5 project by adding js snippet to my root index.html page. It is working but it is not taking path it shows only "/" in path sections on reports. what should i do to solve this problem?
Hey, read this https://www.lunametrics.com/blog/2016/05/04/integrating-angularjs-google-tag-manager/
Hi Julius,
Is it possible to install a container inside an existing container?
Thanks.
No. If you're using Google Tag Manager 360 (premium) you could use zones https://www.simoahava.com/analytics/guide-zones-google-tag-manager-360/
Im using 3d Cart, it has a [very] limited CMS as you mentioned. I understand it's possible to install the GTM script code in the footer and abandon the noscript and compensate for the little visitors that disable JS nowadays. However, our website is old and is still in the development process of being revamped, so load times are a bit slow thus making me worry about installing GTM in the footer. Should I just go to each page and install the GTM code myself?
Hey, depends on the number of pages and whether new pages are added often.
If there are many pages and new pages are constantly added, I'd go with the footer.
Otherwise the implementation would be prone to errors.
Thank you. I've figured out that I have access to the frame.html. Would it be a problem if I added it as high in the head as possible?
Should not be a problem. But it will also work right before the closing tag.
Hi Julius,
Thanks a lot for this wonderful tutorial on Google Tag Manager
I wonder if you're familiar with Symfony and if so grateful
if you can tell if I can add the GTM code snippet to the body part as I cannot really do so in the section.
Thanks again.
Symfony is a PHP framework, meaning that you can add it anywhere you want. If you face some limitations, this means that your Content Management system is probably causing them, not Symfony itself.
To answer your questions, yes, you can add both code snippets to the body.
wow, as a beginner this is amazing (I need to know *why* to understand things and to know what things I can tweak). Via my Genesis theme, I can access Header (before ) and footer (similar). My understanding is now that these places will work. thank you!
Prem Kumar K Apr 30 2019Reply
Sorry Julius Missing Tag information,
We have similar requirement, where customer wants to capture GTM data layer variables on some of the button clicks. As per the instruction i have copied the part right at the top of "head" tag. But in my tool we have restrictions on tag as it is generated dynamically. That means i cannot copy the at the top, rather i can override in the "body" tag (Some where in the middle). Also if javaScript is not enabled our tool will not work.
Following the instructions, we have tested the scenario and was unsuccessful in pushing the variables to GTM.
Appreciate your help.
Hello Julius,
Our Issue is Resolved.
Thank You
:)
Hi Julius, thanks for great contributions. One of our clients have installed the first GTM snipet in the section, but I can't see it properly from within developer tools and/or "View Page Source". I can only see FB/analytics script tags being fired somewhere in the but can't really identify where exactly they have added the GTM snippet. Is it possible to see exactly on which line it was added?
the reply box truncated the gtml element I mentioned (head section), it is meant to read GTM is installed in the head section
Hey, but do you see the GTM container when you enable the GA Tag Assistant Chrome extension? Because if that plugin does not display GTM (present on a page), then it means that nobody has actually added the snippet.
When you have enabled the Preview and Debug mode, do you see the Preview mode on that page/website?
Sorry, I could have added that context in my first comment. Yes, it shows in Google tag assistant, and yes the preview and debug mode works too. I am just used to being able to check where in the code the GTM snippet has been added by checking "View Page Source" as the developer tools section does not (it shows the scripts that have fired and changed the DOM). But for this client I cannot see it anywhere. Perhaps a weird edge case, but you might have come across it?
Sometimes JavaScript code is stored in a separate website file that is loaded on a page. GTM code might be placed there. If you share a link to that page, I can take a look.