DataActs

How Facebook Pixel Code Works

how fb pixel code works

In this post I am going to talk about how facebook pixel code works and what’s inside it. When you open your Facebook ads manager account and try to install facebook pixel code, you always get three options to install the code. I will be exploring the manual installation method in this post since it shows all the tracking codes we need to install on our website.

manual install fb pixel

When you choose manual installation, you get the fb base pixel code with instructions to install it. In your code you get a pixel id which is unique for your fb ads account. Rest of the code is almost the same for every facebook ads account. 

fb pixel id

Pixel id will be a number for e.g 123456789. I have blurred the pixel id in image above for security purposes as it’s the pixel code that I grabbed from my personal fb ads account. 

There are two types of tags in Facebook pixel code – Script and Noscript.

fb pixel script and noscript tags

Script Tag: The script tag is for web browsers which have Javascript enabled.

Noscript Tag: The noscript tag is for web browsers which have Javascript disabled.

Almost 99% of the browsers are JavaScript enabled these days, so you can also leave noscript tag during installation and only pick the script tag. This means that you’ll be able to track 99% of the traffic with script tag. But if you want to go with 100% accurate tracking on your website then also install the noscript tag. 

 

How Facebook Pixel Script Tag Works

The most important is the facebook pixel script tag and it should load on all pages of your website. When script tag runs, it first loads a library and after that it sends requests (commands) to that library to track certain events. 

facebook script tag

The most important is the facebook pixel script tag and it should load on all pages of your website. When script tag runs, it first loads a library and after that it sends requests (commands) to that library to track certain events.
 
In the above image and I am using the terms like “init code” and “track code” to describe various portions of the code. Actually they are javascript function calls with init and track passed as arguments to them. So to make this post easy to understand for non-programmers I am using such terms.
 
Init Code: The init code is for initialization of your tracking code so that it knows to which account tracking information should be sent. As we have our fb pixel id mentioned here it sends the tracking data to our ads account.
 
Track Code: Track code tells that which event you want to track. You’ll always get “Page View” track code by default in the facebook pixel as it’s necessary to run on all pages.
 
We can load the library once on every page of our website and then add various track codes after that which specifies which events we want to track for that page. It means that the library only needs to be loaded once on a page and we don’t need to load it again and again for every track code. 
 
The script tag with library should load on every page of your website as this is necessary. You can see that the page view track code comes added in the facebook base pixel code by default. This means that facebook wants us to track at least page view event on all pages if we are not tracking any other event on it. This helps facebook to create custom audiences for retargeting and custom conversions for specific page views (for e.g Thank You page that comes after form submission).
 

 

How Facebook Pixel Event Code Works

When you are on the facebook pixel manual installation screen, you’ll see event setup option at the top. 

fb event code setup

 

When you go to this option and select manual installation of event code, you’ll get a list of all standard events that facebook supports. These event codes need to be placed under facebook base pixel code for certain pages where you want to track these events.

For e.g if you have a “Thank You” page which comes after form submission on your website and you want to track Lead event on that page, then you can place following lead event code below your Facebook base pixel code.

 

<script>
  fbq('track', 'Lead');
</script>

 

This means that first we install facebook base pixel code on all pages of our website and after that we add some extra event codes to few specific pages where we want to track extra events other than just page views. The below mentioned image can illustrate this better.

 

One other important thing to keep in mind here is that Facebook base pixel code should always be put above any event track code in the HTML. This is important because facebook base pixel code loads the library first and initializes our code with our ads account information. If we will run the event code before fb base pixel code then it will not work. So always keep in mind to place the event codes below fb base pixel code in the html. 

 

Conclusion: This post was to make you understand how facebook pixel code works and what are the various elements of it. If you have any questions, I will be happy to hear from you in the comments. 

 

By Ranjan Kashyap

I am an Analytics Engineer and CRO expert with a strong background in Data Science & Analytics and Marketing Measurement. I specialize in turning complex datasets into actionable insights, helping businesses enhance efficiency and achieve scalable growth through data-driven strategies.

Leave a comment