Adding Facebook Tracking Pixel to your website (not only WordPress blog)

Are you looking for a way to add Facebook Tracking Pixel to your website. If you are using Facebook ads for your website or you are going to use it in the future. There’s a very powerful tool to report conversions, analysis audiences behavior and get fresh insights about how people are using your website. In this article i will help you add it for optimizing your ads campaigns.

What is the Facebook Pixel?

The Facebook Pixel is an analytics tool that likes Google Analytics for Facebook ads (it is code that you place on your website). It lets you better target, track conversions,  optimize ads based on collected data from your Facebook ads. And it also helps you make sure your ads are being shown to the right people, building effective plan ads for audiences to qualified leads.

When you have already set up Facebook Pixel into your website then you can track your audiences. You know what they are doing on your website (like clicking links, viewing pages or completing a purchase…). The Facebook pixel will be triggered and reports these actions. Because you know when your visitors takes an action (after seeing your Facebook ad). This helps you reach those visitors again (right people) through future Facebook ads by using a custom audience (conversion optimization to drive more sales).

What we need to integrate a Facebook Pixel ?

What you need:

• A Facebook Business Manager account (if you don’t have please create one for yourself).
• A website for your business to add Facebook Tracking Pixel code (full access that’s great or Admin Panel access at least)

When you have already a Business Manager account then you go to Pixels tab in Events Manager section.

Then click Set Up Pixel button (if you don’t have this because it’s first time you access it, you need to click Create a Pixel button at first). Next, you click on Manually Install the Code Yourself.

On this step, you can copy your Facebook Pixel Tracking Code for later use (you need it in the next step).

Note: there are options for you customize your Facebook Pixel when copying Facebook Pixel Tracking Code by using Use Advanced Matching option and Add the events you’d like to track section on the next page when clicking on Continue button (see screenshot above).

How to add Facebook Pixel Tracking to your website

Firstly, let’s assume you are on a newbie website builder. And you are managing your website with Admin Panel or Cpanel with File Manager access… To put the Facebook Pixel to work gathering information on your website. Then, you need to install Facebook Tracking Pixel Code (you copied it before) on your webpages. We’ll use the copy/paste method to do this. The main thing that’s looking for is a place to paste/inject Facebook Tracking Pixel code before the closing head tag of template in your website (this should show up into every pages).

With theme settings, you need to log in to Admin Panel/Dashboard. There are millions of different themes for website types or platforms (WordPress, Magento, Drupal, Blogspot…). So i can’t say exactly in this case for all themes. Basically, it is often in your theme settings (ie: Header setting, Header scripts, Head HTML or Miscellaneous Scripts….). You need to navigate to them and put your Pixel Tracking code there then click on Save button. For example: you can see the screenshot attached for this in a Magento website:

With Cpanel (using File Manager…) or FTP access (using Filezilla…), you need to find the header file of your template/website (ie: with WordPress it’s header.php file into /wp-content/themes/your-theme/). Then put your Facebook Tracking Code before the closing head tag. Then click save and re-upload that file again.

Adding Facebook Tracking Pixel to your WordPress blog

1. Using WordPress plugin

The easiest way to add Facebook Pixel to your WordPress blog that’s installing a WordPress plugin. I highly recommend you install PixelYourSite – Facebook Pixel by PixelYourSite (you need only to enter your Facebook Pixel ID and it works properly). This plugin has many features (insert the Facebook Pixel with just one click, optimise your site for Facebook Custom Audiences, Search/Delay Event, Facebook Dynamic Ads…) help you better when using Facebook Pixel. And they have Pro version if you are serious about your Facebook ads then you can upgrade it.

2. Adding Facebook Tracking Pixel Code via theme’s functions.php file

You will need to open functions.php file of your theme (by using File Manager on Cpanel or via FTP). This file is locate in : /wp-content/themes/your-theme/. Then you put this snippet into it and re-upload file (replace FBPX-xxxxxxxxxxxxxxx with your Facebook Pixel ID code):

<?php
/***** Adding Facebook Pixel *****/
add_action('wp_head', 'oiw_add_fbpixel');
function oiw_add_fbpixel() {
?>
<!-- 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', 'FBPX-xxxxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FBPX-xxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<?php
}
?>

P/s: if you want to check Facebook Pixel are installed correctly then you can use the Pixel Helper (this is an extension for Google Chrome).

All done. That’s all you need to do to add Facebook Pixel to your website.