Every retargeting campaign needs a trigger - a way to know which people to target based on an action they have taken. With most retargeting platforms, this is done by adding a tracking pixel to your website. Facebook is no exception - they have created the aptly-name "Facebook Pixel". This newer pixel replaces the old ones that you might have used in the past.
This article will walk you through how to get the Facebook Pixel code, how to add conversion tracking events, and where to add it to your website.
Getting the Facebook Pixel Code
Go to the Facebook Ad Manager and choose Pixels from the Tools Menu:
The Pixels view in the Facebook Ad Manager
Creating a New Facebook Pixel
If you have never created any of Facebook's previous pixels (Conversion, Custom Audience, etc.), then you will be asked to "Create a Pixel". Click the button and give the Pixel a name. Since there is only one per account, I recommend just adding your business name in front of it, so it would read "Thought Labs Facebook Pixel". You can always rename it later.
Once the pixel is created, you will have the option to "Install Pixel Now" or "Email Pixel Code." We will review both options shortly.
The dialog shown after creating a new Facebook Pixel
Converting An Old Facebook Pixel
If you had an old pixel instead, Facebook will automatically have created a new Facebook Pixel for you. The new Facebook Pixel code and syntax is a bit different than before, so it may make sense to replace any existing usage of it on your website with the newer code rather than trying to retrofit the new functionality into the old pixel code. (Facebook provides a guide on how to retrofit it, if that is what you need to do.)
Viewing the Facebook Pixel Code
Now that you have a Facebook Pixel, let's take a look at it. You can do this by clicking the "Install Pixel Now" button if you just created it, or by choosing "View Pixel Code" from the Pixels menu. In either case, a dialog comes up with your customized code:
The base code snippet for the Facebook Pixel
This block of code needs to be added to all the pages of your site. The highlighted line is the critical part - it lets Facebook know that someone has visited a specific page. You will use this for creating smart Custom Audiences later on. But, this is just one of many actions you can track.
The Standard Facebook Pixel Events
Facebook provides several standard events, listed in the table below:
The standard events that can be fired from the Facebook Pixel
These standard events are added after the PageView event to signal that the visitor has taken some important action. Which events you use is up to you and how you define your own workflows, but the simplest event to use is Lead. Add it to your Thank You pages - the one that visitors see after they fill out an offer form on your website. Here is what the code would look like for adding the tracking to those Thank You pages:
The base Facebook Pixel code snippet with the Lead standard event added
Note that the Lead event should be added in the same place as the PageView event whenever possible. However, some website CMS software doesn't make this easy to change on a page by page basis. In this case, add the code with just the PageView event in it to every page on your website, and then add another bit of code on the pages you want to track leads on like this:
The Facebook Pixel code snippet with only the Lead standard event
This way, you can be sure that the Facebook Pixel is setup correctly before the Lead event is sent.
Custom Conversion Tracking with the Facebook Pixel
Facebook also provides a way to create custom conversion tracking without the extra standard events, using URL matching. To be honest, I prefer the idea of Custom Conversions, because it means that you don't have to do anything to your website beyond adding the regular PageView Pixel code. All the specifics are done in the Facebook Ad Manager, just like just about every other retargeting platform.
However, there are two big issues with Custom Conversions:
- You can only have 20 of them
- They can never be changed or deleted
Those are pretty significant! So, choose wisely and use them when the types of standard events don't meet your needs or if it would be too hard to use them to capture the conversion. You are also allowed to use both, so you don't need to worry about overlap.
Here is what the Custom Conversion dialog looks like:
The dialog for creating a Custom Conversion for the Facebook Pixel
Adding The Facebook Pixel to Your Website
The Facebook Pixel code just needs to be added in the <head> section of each page. You likely already have some tracking code added for Google Analytics, so you can just add this code after that. You can also click the Email Pixel Code button and send it to your web team to add. Be sure to tell them where you want the standard events to be used.
Or, you can use the Google Tag Manager to quickly and easily add it. Facebook provides a great guide for this. The most important thing to remember is that you need to set each standard event tag to fire after the PageView code tag using Tag Sequencing.
Testing the Facebook Pixel
Once you have your Facebook Pixel code installed on your website, you should test it. There are three ways to do this, each explained below.
Using the Facebook Ads Manager
After users visit pages on your website where the Facebook Pixel is loaded, Facebook will begin to show life in the Ads Manager. Go back to the Tools -> Pixels option the menu, and you should see something like this on the right side. The Green circle with Active means that the pixel is firing somewhere.
Showing the status of the Facebook Pixel
Now, look at the chart and tables on the left. Look at Events to see if your Page View and other standard events are firing. Then look at URLs to see where they are firing. If you don't see the event or URL that you are expecting, either nobody has gone to those pages or the Pixel isn't installed correctly.
Using the Browser Developer Tools
You can bring up the Developer Tools functionality of your browser and look at the Network tab to see whether your pixels are firing.
The Network tab of Chrome Developer Tools showing the Facebook Pixel events
Sort by name and look for events that start with ?id=<your pixel id>. You can see which event is being fired in the URL. You will likely see two events - one for the fbq() call and one for the <img> after it. This is normal, and Facebook will only count this as one event.
Using the Facebook Pixel Helper
Facebook also provides a handy Chrome extension that shows what Facebook Pixel events are being fired and how many. It also can help troubleshoot common issues, such as multiple pixels, or failing to load.
When you have the extension enabled and visit a page on your website with the Facebook Pixel, it will show a count in the icon of how many pixels were loaded. Clicking on the icon will pop up a dialog with details of which events fired:
The Facebook Pixel Helper Chrome extension shows which pixels are loaded and which events were fired
This can be incredibly useful for seeing if your conversion tracking standard events are firing when you expect them to. You should see one event for each that fires, but Facebook nicely consolidates the fbq() call and the <img> tag into one event.
This extension can be pretty helpful for figuring out what is going on. At one point on our website, the extension was showing 2 pixels found, and one had a different id than I expected. A little investigation uncovered that a tracking pixel from AdRoll was adding its own Facebook tracking pixel behind the scenes.
After following the steps above, you should now have a working Facebook Pixel installed! This is a really important milestone, because it means that Facebook has also started collecting information about who is visiting your website and which pages they are viewing. We will be using this information in the next post to set up Custom and Lookalike Audiences, which will be the basis for our retargeting campaigns.
