January 1, 2022
What is Google Tag Manager Noscript?
Updated: January 1st, 2022. After you create a new Google Tag Manager container, the interface asks to place two codes on your website, one in the <head> and the after right after the opening <body> tag. But have you ever wondered why are there two codes instead of one?
Usually tracking tools, like Google Analytics, Mixpanel, or others require placing one code on all pages, so how come GTM is different?
In this blog post, I’ll explain what Google Tag Manager Noscript is and why you might need it (or not, after all).
This view looks familiar, doesn’t it?
The top one ( a.k.a. the <script> part) is the essence of the Google Tag Manager. The higher you place it in the code, the sooner it will load, therefore your marketing and tracking tags will capture the data sooner. As a result, your data will be more accurate.
This code responsible for all the tracking magic that’s happening on a website. It creates the Data Layer, initiates triggers to fire, dispatches tags, etc.
The <script> part a heavy lifter which does A LOT. Without it, your GTM implementation would be simply worthless.
Now, there is a totally different story behind the 2nd code, <noscript>. What if I told you it’s unnecessary? After looking at countless numbers of Google Tag Manager containers, I can say that 95% of regular everyday marketers (#madeUpStatistics) just don’t need it (maybe even more). But they still use it (because Google’s instructions say so).
Spoiler alert: a lot of things will not work at all. And I’m not talking only about fancy animations. I’m talking about actual functionality, like cookies, etc. There are some serious limitations on the web without JS, therefore not many should be choosing this option.
How Google Tag Manager Noscript works?
When JS is off and the page is loaded, the <noscript> initiates an iFrame. An iFrame is an inline frame used inside a webpage to load another HTML document inside it (for example, a webpage within a webpage).
They are used for lots of things, like web analytics, ad targeting, and embedded 3rd party content. Adsense banners? iFrame. Embedded generation form? Probably iFrame. There are many things online that utilize iFrames.
However, there’s one BUT. Only one tag type is supported when JS is off, a Custom Image Tag. I’ve written an extensive guide about it but here’s a quick recap.
Custom Image Tag in a Nushell
The custom image tag requests an image from a particular URL. The interesting part is that by making the request you’re actually transmitting information to a server.
For example, if you request an image via URL https://www.example.com/something?parameter1=good¶meter2=123, the receiving server processes parameter1 and parameter2 and acts accordingly (e.g. registers those parameters as an event).
In other words, when the page loads, a Custom Image tag fires that contains particular parameters (for example, Page URL). Those parameters are your data points that are transferred to the receiving server, like Google Analytics.
However, not everything is that simple. There are many limitations.
Forget all triggers, like Form Submission, Youtube Tracking, Scroll, Tracking, etc. Only Pageview triggers (Pageview, DOM Ready, and Window Loaded) work when JS is off and there’s nothing we can do about it.
|Built-in Variables||Works without JS?||Comment|
|Event||Partially||Returns values of pageview-related events only|
|New History Fragment||No|
|New History State||No|
|Old History Fragment||No|
|Old History State||No|
|Scroll Depth Threshold||No|
|Scroll Depth Units||No|
|Video Current Time||No|
|1st Party Cookie||No|
|Data Layer Variable||Partially||They need to be added as query parameters. Read more.|
|Custom Event||Partially||Returns values of pageview-related events only|
|Google Analytics Settings||No|
|Lookup Table||Partially||Works only with those variables which do not depend on JS|
|Container Version Number||Yes|
So, when exactly do I need to use Google Tag Manager noscript?
You need to place <noscript> code on a website, if:
- Or you wish to verify the ownership of the website in the Google Search Console by choosing the “Verify with Google Tag Manager” option.
- Or you don’t plan do to the aforementioned activities right now, but maybe it will become a priority in the future.
In all other cases (as far as I know), Google Tag Manager noscript is unnecessary so feel free to ignore it. If you think that I’m wrong, I’ll be more than happy to hear your opinion and learn something new.
This is not my first blog post related to Google Tag Manager noscript, so if you want to learn more on how to use it, here are a couple of guides:
Google Tag Manager Noscript: FAQ + conclusion
This section is for those who are in a hurry and want to learn everything quickly. I’ve put a list of most common questions related to Google Tag Manager noscript with a hope that you’ll find the needed answer. This also works as a conclusion of this post:
#1. Is <noscript> part of the GTM snippet required to be placed on a page. No, it’s not. Feel free to leave it out if you’re not interested in:
- website verification in Google Search Console via Google Tag Manager.
#2. Should I place <noscript> only in the <body> part of the website? Yes. <noscript> should be either placed in the <body> or not be placed on a website at all. Since <noscript> initiates an iFrame and iFrame is not supported in the <head>, your website’s code will become invalid.
#5. So no Data Layer variables in the Custom Image Tag? If you just simply pasted the <noscript> part to the website, Data Layer variables will not work. However, if you know how to code or have access to a developer, you can ask him/her to decorate the iframe link inside the <noscript> with query parameters. GTM will then fetch those query parameters if your container contains data layer variables. Read more about it there.
#8. Which triggers work when JS is disabled and <noscript> is active? Only Pageview-based triggers like Page view, DOM Ready, and Window Loaded. All other triggers CANNOT properly function.
For Search Console verification to work it is crucial to have the noscript part placed RIGHT AFTER the opening <body> tag of your website.
Is there a reason why they say put the noscript snippet immediately after the body tag, other than that is the earliest it can load? A while back when V2 code required both snippets to be placed after the opening body tag, it seemed that there would be issues if the code was a child of another element, e.g. a div element. Would there still be an issue if the noscript code was not a direct child of the body tag? I know this is quite an esoteric question, but curious to know if the same still applies.
The main reason why GTM asks you to add the noscript part immediately after the opening body tag is Search Console property verification. If you don't plan to use it, then you can add the noscript anywhere you want in the body.
What if I just have the noscript on the website, no script part. What will be the difference?
Your regular tags will not work if the script part is missing. The script part is a must-have.
If you pass PII via custom image tag, then yes, you need a consent for that.
GDPR is not only about cookies, it's about PII.
Julius, I am not a digital marketer or a data analyst though I've been tasked to understand and evaluate the efficiency of our current GA implementation. It's a bit of a mess I'll tell ya but I'm really learning a lot from your site, thank you!
So I don't think we need the part on our site, however, is there any benefit in removing it? Can I justify by any means that removing it will have some sort of efficiency improvement, vs, removing it for the sake of removing it. I see some pushback on this immediately if I can't justify removing it, nor can I really justify having it, but it's already there now so it will be harder to justify its removal.
If there is an improvement in performance (after removing the noscript), most likely, it will be very minimal.
I have a web property that, due to extenuating circumstances, we haven't the ability to insert anything into the body tag. As a result, preview mode doesn't work on that site at all. The window loads blank, and then it just keeps trying and trying to load. I can't say for sure if this happens to everyone, so I'd love to hear if others are experiencing something different.
It is caused either by Content Security Policy on your site (you'd need to talk with your developers) or some of your code on the site is conflicting with the Preview mode. In that case, you'd need to log in to your GTM interface and in the top right corner click "Send feedback" and provide all the details about the issue.
But isn't it correct that display:none makes some browsers ignore the image and never load it? So then noscript tracking wouldn't work!?
What "some browsers"? display:none hides the element from the viewport (but the element is still loaded)
I work for County government and would like to add my GTM code to my section of my website. The problem is, the only place I can update the site is through the WYSIWYG editor. Which is fine with me, I don't really use it, I open it and then go straight through the source code in the editor and update there. When I hit save though, it filters out the JS. The latest upgrade to the editor filters out any JS when it used to work, so now GTM doesn't work. I tried using just the iframe without the noscript, but it still doesn't work. Is there any way I can trick the WYSIWYG editor in allowing me to update my site with the GTM code?