August 2, 2017
Facebook Pixel Noscript is Useless in Your GTM. Here’s How You Fix It.
This blog post will be a shorter one. In the past, I’ve described the friendship of Google Tag Manager and Facebook Pixel multiple times. As of August 2017, GTM still does not support Facebook Pixel by default thus you and I still need to use the Custom HTML tag. Have you ever taken a closer look at the Pixel code?
It consists of two parts: <script> and <noscript>. The latter is designed to track visitors who have JavaScript disabled in their browsers. And that’s where the confusion begins. I’ve seen multiple times when GTM users think that if they paste the entire Pixel code to Custom HTML tag, they will track ALL visitors (with or without JavaScript enabled).
Unfortunately, this is far from the truth. Facebook Pixel Noscript part does not work in Custom HTML tag. In this blog post, I’ll explain the issue and how to fix it.
What is Noscript?
In a nutshell, noscript means that if JavaScript is disabled in the browser, an image pixel will be loaded directly via iframe (which is created by GTM’s <noscript>).
That’s exactly why Google Tag Manager container snippet consists of two parts:
- <script> (recommended placement between <head> tags).
- and <noscript> (recommended placement is right after the opening <body> tag).
Facebook Pixel also contains both parts:
Where’s the problem?
Noscript just won’t work within a Custom HTML tag. Why?
If JavaScript is disabled in the browser, the Google Tag Manager container snippet (gtm.js) won’t be loaded. As a result, GTM won’t fire ANY Custom HTML tags, Universal Analytics tags, etc.
The only tag type which continues working (with JavaScript disabled) is Custom Image.
In conclusion, if you paste the entire Facebook Pixel code to the Custom HTML tag, it will not work for users with disabled JavaScript in their browsers.
What Are the Possible Solutions?
You have three options here:
- To ignore the fact that some users might have JavaScript disabled and continue living your life. Paste the full Pixel code snippet to Custom HTML and keep ignoring a small group of visitors. According to Blockmetry, 0.2% of page views from worldwide traffic across all devices in the fourth quarter 2016 had javascript disabled. The percentage varies in different regions/continents.
- To remove the Facebook Pixel noscript part from the Custom HTML tag. Just live without it. This solution is pretty similar to the option #1 but more pedantic.
- To actually fix the issue and start tracking more. The next chapter is dedicated to this option.
Let’s make The Facebook Pixel Noscript work
Custom Image Tag
If you really want to fire the Facebook Pixel in a browser with disabled JS, you’ll need to fire it via custom image tag. First, let’s open Facebook Pixel JavaScript snippet:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');
// Insert Your Facebook Pixel ID below.
fbq('init', '11111222223333334444');
fbq('track', 'PageView');
</script>
<!-- Insert Your Facebook Pixel ID below. -->
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Cut the noscript part and paste it somewhere else (e.g. Notepad, etc.).
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1" /></noscript>
In Google Tag Manager Custom HTML tag, keep everything between <script> (including <script> and </script>) and save it.
Now, let’s go back to the noscript code. What we’re interested in is the URL. This is the URL of the custom image pixel which is loaded within an iframe when JavaScript is disabled. Keep in mind that id in that URL is fake.
https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1
In Google Tag Manager, you’ll need to create a new Custom Image tag. Go to Tags > New Tag > Custom Image. Paste the aforementioned URL, don’t change any other settings, and save the tag without any trigger. Just for now. We’ll come back to it later.
Let’s quickly review what is Custom Image tag and its settings.
As I have mentioned before, Custom Image tag is fired thanks to GTM container’s <noscript> part. It is loaded via iframe and does not depend on JavaScript. Query parameters (in the Image URL), e.g. enable Facebook to track visitors.
Usually, browsers cache such image URLs. This means that if a visitor loads another page, the browser will try to load the image URL from its internal storage rather than try to reach Facebook’s servers for the 2nd time.
As a result, the 2nd page view will not be tracked.
In order to avoid browser cache, Google Tag Manager offers a Cache Buster. gtmcb (Google Tag Manager Cache Buster) is a function which returns a string of numbers after every page load and adds it as a query parameter to Image URL.
This means that whenever a page is loaded a new Image URL is generated, every page view will be tracked. Let me illustrate it.
This is what happens without the Cache Buster:
- 1st page load. Image URL is https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1. URL is unique and is loaded from Facebook servers, a page view is tracked.
- 2nd page load. Image URL is https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1. URL is the same, thus it is loaded from browser’s internal storage. The 2nd page view is not tracked.
This is what happens with Cache Buster enabled:
- 1st page load. Image URL is https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1>mcb=1501700001. URL is unique and is loaded from Facebook servers, thus a page view is tracked.
- 2nd page load. Image URL is https://www.facebook.com/tr?id=11111222223333334444&ev=PageView&noscript=1>mcb=1501744444. URL is unique and is loaded from Facebook servers again. The 2nd page view is tracked.
Note: you do not need to edit or replace gtmcb. Leave it as it is and the rest will happen by magic.
Trigger
The next step is the condition when to fire the Custom Image Tag. Obviously, we do not need to fire it on all pages because Facebook Pixel <script> is already doing that. The ideal moment to fire is when JavaScript is disabled. Luckily, there’s a Custom JavaScript Variable for that:
function() {
return true;
}
It does not return true when JS is disabled. Let’s use it in a new trigger:
Assign this trigger to the Custom Image Tag.
Done! You’ve just fixed the Facebook Pixel noscript. From now on you’ll be tracking few more visitors.
Conclusion
Facebook Pixel code consists of two parts: <script> and <noscript>. The latter is designed to track the visitors when JavaScript disabled in their browsers. If you paste the entire Facebook Pixel code to Custom HTML tag in Google Tag Manager, the <noscript> part just won’t work.
If you still care about a tiny fraction of additional visitors and want to track them, you’ll need to create a separate tag for that. That’s where the Custom Image tag comes in handy.
In this blog post, I’ve explained how you can easily solve this issue.
If you’re not interested in such users/visitors, feel free to ignore the problem. It won’t do much damage.
11 COMMENTS
Very nice case. Where did the idea come from? Is this case also possible for AdWords or other Conv. Tags? Also maybe noscript GA Snipped?
Hey, I had this idea for a while and recently decided to publish it. This case should work with GA as well. I am not sure about Adwords, though, never tried it.
I have bookmarked your suggestion for my future experiments which might turn into a blog post, one day.
Hello, I have a Wifi Splash Page where javascripts are not allowed. Do you think that I can install Facebook Pixel and override this limitation using some of the information that you provided in this article?
Thank you in advance.
Hi, The best way to find out is to try :)
Hi Julius,
Thanks a lot for this article. I've been meaning to look into the no script Facebook pixel but with this article, I'm all set.
However, with the GDPR in practice, we are relying on Javascript to let visitors choose their consent level on their first website visit and store this consent level in a cookie. If someone has JS disabled, will GTM then be able to retrieve the consent level from a cookie and fire the custom image tag based on the value in this variable? We're only allowing the FB pixel to fire if users have chosen the highest consent level.
Thanks!
Mick
If JS is disabled, then, most likely, your Cookie Consent Mechanism will not work at all. Cookies are based on JS, so without JS nobody can read cookies. However, I'm not sure how noscript acts in the light of GDPR. I think it does not collect any PII when JS is off, but I'm not 100% sure.
So don't take my word for granted here :)
Hi Julius! Great post.
Any instructions on using the noscript to pass other conversion events like purchase along with the required parameters like value value and currency?
That would be really helpful!
thanks
FB has some instructions in the link below, where you can see the example code snippets within their screenshots. However they are just loading it all into a Custom HTML tag, so I guess you'd need to pull out the noscript into a Custom Image tag like Julius recommends.
https://www.facebook.com/business/help/1021909254506499
This is very useful. It actually makes a huge difference for your pixel data. I have a question though. How would you begin to track purchase events etc... using this tool? Would you have to create a separate custom function and trigger it on pages using sequences? Or would you have to set the url?
Any help on this would be useful.
Thanks.
Cookies are *not* based on JS.
JS can read cookies, sure, if the flag was not set for http only, but cookies work fine independently of JS, by design.
Hi,
If we use custom image tag and Java script tag separately, then pageview will happen two times.
that's why you recommended to use java script Disable variable does not equal true for custom image tag?
Regards,
Ankit