This time, I will talk about the Facebook Pixel, which is important in implementing Facebook ads. Actually, I would like to talk about how to install this Facebook Pixel on the site, but the method announced on Facebook’s official help page is wrong.
While it’s wrong, there are limited situations where it doesn’t work right, and in most cases it works. However, I will explain the contents because the wrong announcement is made in the HTML specification.
How to install a pixel with Facebook’s help
First, let’s check how to install Facebook Pixel announced on Facebook’s official help. The management screen of Facebook Business Manager is still being improved every day, and the screen composition will change every day.
At the time of writing this article on May 21st, you can access the Facebook Pixel from the “Event Manager” menu. You can also check the official help page from Creating and installing a Facebook pixel .
The Facebook pixel looks like this and is instructed to paste this tag above the </head> tag at the bottom of the header section of your website. In addition to installing the Facebook pixel directly on your website, it explains how to install it with Google Tag Manager, Tealium, and various other CMS.
Facebook pixel example
<!-- 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',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->where is the difference
What is wrong in the help explanation is the explanation when installing directly on the website. The error this time is
- Put the tag inside the head tag
- A noscript tag exists in the tags to be installed
occur in combination. And if you do this kind of implementation, problems will occur in the operation under the environment where JavaScript cannot be executed.
First, I would like to explain what the noscript tag is. The noscript tag is a tag for preparing alternative content that operates when the JavaScript prepared by the script tag cannot be executed. For example, when displaying animation using JavaScript, it is used to display a still image with similar content when JavaScript does not work, or to display text such as “Please enable JavaScript to view”. increase. In the field of web marketing, tags that require JavaScript are sometimes used to display tiny 1×1 pixels and send minimal data to tools when JavaScript is disabled.
Such a noscript tag has some restrictions. In HTML4, noscript tag cannot be placed inside the head tag. Also, in HTML5, noscript tags can now be used within the head tag, but the tags that can be placed inside are limited to three types: link tags, style tags, and meta tags. cannot be loaded.
In other words, on the official Facebook help page,
- Facebook Pixel is announced to be included in the head tag
- Facebook Pixel also includes noscript tags
- Inside the noscript tag I am trying to load the image
Because of the description, the image tag that I originally wanted to read cannot be read in an environment where JavaScript is not executed.
In fact, I reported about this issue in January 2017 in the private group ” Facebook Developer Community ” on Facebook. To summarize the reply at that time, “The procedure written on the web page is recommended and not required, and it is up to the developer to decide where to install it in the end.” It was a vague answer that recommended a procedure that does not work properly, and I wrote this article because it is still the same situation even after more than 3 years have passed since then.
so what is the right thing to do
As already explained, there is a limitation of noscript tags, “When a noscript tag is placed within the head tag, only three types of tags can be placed within it: the link tag, the style tag, and the meta tag.” cause of error.
Therefore, there is a method of installing the original Facebook Pixel tag in the body tag instead of the head tag. If it is in the body tag, it will work correctly even if you write the img tag in the noscript tag.
Alternatively, it is also possible to divide the Facebook Pixel into script and noscript tags, and place the script tag in the head tag and the noscript tag in the body tag to make it work correctly. An example of this split is below.
Tags to be placed in the head tag
<!-- 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',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->Tags to be placed inside the body tag
<!-- Facebook Pixel Code -->
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->Also, when installing Facebook Pixel in Google Tag Manager, the general method of installing using custom HTML tags assumes the operation of JavaScript, so noscript tags are not used. There is nothing wrong with omitting it from custom HTML and installing it.
summary
Currently, many people use tag management tools such as Google Tag Manager to install tags, and I think the number of people who install tags directly on websites is decreasing. When placing tags using a tag management tool, most people don’t care where they should be placed in the HTML.
Furthermore, no one cares about how the noscript tag works. Also, browsers with JavaScript disabled are rare these days, so it can be said that this error has little impact. However, even so, as long as the noscript tag is provided to the vendor of the advertising platform that deploys the tag, I would like you to properly verify that it works properly and announce the correct installation method.
