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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 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.).
|
1 2 3 |
<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.
|
1 |
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:
|
1 2 3 |
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.
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.