Facebook Tracking Pixel: Setup Process & 30+ Pixel Event Codes.

Setting up a Facebook tracking pixel on your website might be an easy task…

But are YOU sure that the pixel tracking has been set up correctly, no double counting, no errors, every page is firing the tag correctly as expected?

If you’re…

1. Trying to set up events pixels.
2. Trying to setup pixels on a SPA (Single page application) websites.
3. Using Multiple Pixels on your website.
4. & so on…

then MOST PROBABLY you’ve done it WRONG or willing to do it.

In this article, we’ll be focusing on the CORRECT ways to set up the facebook tracking pixel & also some of the advanced pixel configurations.

Let’s start with a little bit of context on the workings of the facebook pixel… Feel free to jump to any section.

1.) What is Facebook Pixel & How Does It Work?

1. Code Structure
2. Advanced Matching In Pixel.

2.) How To Install Facebook Pixel The Proper Way.

1. Using Manual Code Placement
2. Using GTM Tags.

3.) Installing Multiple Facebook Pixel On Website.

4.) List Of The Facebook Pixel Code Examples.

Facebook Pixel is a javascript code which sends the data to the FB servers, whenever the user performs a specific action on your website.

So, how does facebook transfers the data…? It’s simple…

It sends the GET request to the URL https://www.facebook.com/tr/ with query parameters. (As most of the web tracking tools do)

By installing the pixel & tracking the user data, you can now:

• Re-market the user with relevant ads
• Increase your sales 
• Analyze the results of your ads & optimize your ads.

Now, let’s understand the Facebook pixel code structure. It mainly consists of

1. Base Pixel – It will fetch the fbevents.js file.
2. Initialize ‘fbq’ – It will fetch Initialize ‘fbq’ parameter.
3. Advance Matching Pixel – Used for advanced matching.
4. Fire The Event – Sends user data to Facebook servers.  

CODE STRUCTURE:

Base Pixel:

!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');

It is the common code which needs to be placed before fbq(‘init’) & fbq(‘track’) functions else simply your code will NOT WORK.

This base code will simply fetch the fbevents.js file by sending GET request to https://connect.facebook.net/en_US/fbevents.js.

Initializing Pixel ID:

fbq('init', '1467838850099621');

This code will simply configure your code to the track events for the mentioned pixel ID. It will do so by sending GET request to https://connect.facebook.net/signals/config/1467838850099621?v=2.8.47&r=stable.

Fire An Event:

fbq('track', 'PageView');

This code fires an event & sends data to the FB servers via query parameters. It will send GET request to https://www.facebook.com/tr/

Some of the query parameters are:

id: 1467838850099621                          (Pixel ID)
ev: PageView                                         (Event Name)
dl: https://www.digishuffle.com/     (Page URL)
rl:
if: false
ts: 1556212685854
sw: 1366
sh: 768
v: 2.8.47
r: stable
ec: 0
o: 28
it: 1556212675382
coo: false
rqm: GET
dt: epl1dox76bowbfy9fosvka8hs8pr5l7u

You can see the entire process in your console which can also help you to debug the code if any issues.

NOSCRIPT Code

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1467838850099630&ev=PageView&noscript=1"
/></noscript>

Lastly, the code in the <noscript> tag will fire only if the browser has disabled the JS.

Advanced Matching Code (Optional But Recommended)

While it is optional to implement advanced matching facebook pixel but highly recommended by facebook to use it.

Some of the benefits of implementing Advanced matching in facebook pixel are:

1. Improve the performance of your ads by increasing your custom audience size.
2. Attributing more conversions
3. Better optimization
4. Higher reach for your re-marketing campaigns.

There are 2 ways to implement it:

1. Manual Advanced Matching Method
2. Automatic Advanced Matching Method

1.) Manual Advanced Matching Method:

You’ll need to edit the “Initialize Pixel ID” code & add the customer data. Here’s how you can do it:

Change

fbq('init', '1467838850099621');

To

fbq('init', '1467838850099621', {
em: '{{_email_}}',
ph: '{{_phone_number_}}',
fn: '{{_first_name_}}'
....
}));

2.) Automatic Advanced Matching Method:

Facebook has come up with the Automatic Advanced Matching Technology that enables businesses to use their current pixel set up (no additional code required) to associate website text fields, such as email addresses, with corresponding events.

The process is much simpler here…

1. You can go to the Events Manager > Pixel.

2. Select the pixel

3. Go To Settings > Enable Automatic advanced matching

4. Select the specific parameters that you want to send from your website.
   (NOTE: As per Facebook, Select Email Addresses & Phone Numbers for the BEST results.)

Now that you know the basic workings of the facebook tracking pixel, let’s move onto the setup part. 

There are many ways to install the facebook tracking pixel on your website but here we’ll be looking at

• Manual Implementation Method &
• GTM Method

Firstly, you’ll need to create the Facebook pixel (if you haven’t done so.). You can go to facebook event manager & click on create pixel.

Manual Implementation Method:

Once you copy the code, you’ll need to paste it BEFORE  CLOSING OF THE HEAD TAG.  If you’re using 3rd party CMS such as

1. Shopify
2. WooCommerce
3. Magento
4. Opencart
5. Leadpages
6. & so on…

You can use their respective UI to paste the code in the head tag Or select ‘Connect a Partner platform’ during the Facebook pixel setup.

GTM Method:

Facebook has now made it very easy for the user’s using 3rd party CMS or tag management. So, if you use Google Tag Manager then you can simply follow the steps mentioned by facebook.

While creating a pixel, simply select the option names “connect a partner platform“. Then you can select Google Tag Manager from the list.

1. Authorize your Google Tag Manager account.
2. Select the account & container.
3. Click on Finish Setup

& That’s it.

Now once you log into GTM, you can see the facebook pixel published tag.

There might be a situation where a company hires 2 different agencies to handle facebook campaign with different goals (Branding & Direct Sales)

In that case, a need will arise to place multiple pixels for different accounts on the same website & the normal event tracking code might send the event data to the wrong accounts.

Here’s what you can do…

Facebook has introduced 2 functions (features) which can help you avoid the conflict.

1. trackSingle – You can use it to fire standard events
2. trackSingleCustom – You can use it to fire custom events.

Here’s an example…

BASE PIXEL

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fires PageView for both initialized pixels

// Fires the standard event - Purchase for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
value: 4,
currency: 'GBP',
});

// Fires the custom event - ButtonClick for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'ButtonClick',{
"name": "Subscribe"
});

If you are setting it up via GTM, you can utilize the same code in the facebook event tags.

Here is the giant list of Facebook events which you can use it on your or client’s website.

Standard Events

1. ViewContent
2. AddToCart
3. AddToWishlist
4. InitiateCheckout
5. AddPaymentInfo
6. Purchase
7. Lead
8. CompleteRegistration
9. Search
10. Contact
11. CustomiseProduct
12. Donate
13. FindLocation
14. Schedule
15. StartTrial
16. SubmitApplication
17. Subscribe

Custom Events:

1. Outbound Link
2. Internal Links
3. File Download Links (PDF/CSV/MP3, etc)
4. Button Clicks
5. Image Clicks
6. Image Hovers
7. Form Submits
8. Scroll Tracking
9. Time On Page
10. Pages / Visits
11. User Lifetime Value
12. Pageviews / User
13. Element Visibility
14. Source, Medium & Campaign – UTMs – First Attribution
15. Source, Medium & Campaign – UTMs – Last Attribution
16. Video Tracking

Make sure to use Facebook pixel helper for debugging purposes.  You can even use the browser console to see if the event requests are getting sent successfully.

And… do check out the events lists & let me know if any issues.