Facebook Pixel tutorial: How to install Facebook’s Pixel code on your website

If you read our blog post about the benefits of using a Facebook Pixel and the wonders it can do for your advertising campaign conversions, then the next logical step is setting up a Facebook pixel for your existing campaign. That is why we created this easy-to-follow tutorial.

Feel free to get in touch with us for assistance if you get stuck with any of these steps.

Step 1: Activate your Facebook Pixel

First, you need to log into your account and go to the Facebook Ads Manager. Then, click on the upper-left corner on ‘Facebook Adverts’.



Then, expand the drop-down menu by selecting the ‘All tools’.



Under the ‘Assets’ column, you will have the option to select ‘Pixels’ – click on it.



Voila! Click to create your Facebook Pixel. There can be only one Pixel code per account.



Step 2: Insert the Facebook Pixel code

There are two ways to you can insert your code, and in this tutorial, we will cover the ‘copy and paste; method – which means manually inserting pixel code into your website. So, select the second option.



You must install two types of code in order for the Facebook Pixel to work. The first is the base code.

Simply click ‘Copy code to clipboard’ to copy your code.



Since the base code needs to be present on every page of your website, you need to paste this code into your header. If you have a WordPress website (or other content management systems), just search for a header template. Learn where to find this template or code in different web management systems. Facebook even offers help on how to find this template or code in different web management systems.



Since business owners mostly use WordPress as their CMS platform, in this tutorial we will cover how to paste the code into WordPress, but the main idea is similar to every platform. You need to access your code, find this </head> tag, and simply paste the Facebook pixel code above it.

If you are an average to advanced WordPress CMS user then use this method:

In your WordPress dashboard, you can reach that code by selecting Appearance > Editor. Find the header template (header.php) through the search function, click on that template and then find the </head> tag.



Now just paste the Facebook Pixel code.

The easier way to do this, is to install a plugin. Go to Plugins on your dashboard, and click Add New.



Then, search for the ‘tracking code manager’ plugin. Install one of your choice from the list, and paste the code where you are told. Save the change and now you have a Facebook Pixel code installed on your website.

In this tutorial, we are using the plugin Tracking Code Manager v1.

Step 3: Install the Facebook Pixel event code

Base code must be placed throughout the entire website, and that’s why we installed it on a template that is found on every page – the header. But, event code needs to be placed only on pages where we want to track the specific conversion. This allows us to track different conversions on different pages.



Facebook lets us track 9 different types of conversions/events.

 1. Search

Facebook Pixel tracks this action when people use the search function on your website, and you need to type in a query you are interested in. You need to define that exact query in the code.



Instead of leather sandals shown in the Facebook’s example above, type in the query you are interested in.

2. View content

If you want to track people who clicked on product detail pages, landing pages, or any content, this is the option you should choose.

3. Add to basket

This is a great option everybody with an online shop should use. This event lets you track people who have added an item to the shopping cart. If you read our previous blog post, you learned that 3 out of 4 people abandon the shopping cart and don’t complete the purchase. Retargeting them could help you increase sales, and with this option, you can.

4. Add to wishlist

Quite similar to the add to basket event, add to wishlist lets you track people who have added a product to their wishlist. You can use this information to serve a Facebook ad, notifying the people about the discount for that exact item.

5. Initiate Checkout

Whenever someone clicks on the checkout, this event will be triggered. Also useful for retargeting and retargeting shopping cart abandonment.

6. Add payment info

This one is self-explanatory.

7. Purchase

Place this event on your order confirmation page so you can retarget your loyal customers.

8. Lead

A lead is a potential customer who has expressed an interest in your company. A person who has signed-up for your newsletter can be considered a lead, or completes a form, signs up for a trial, etc. This option allows you to market to your leads.

9. Complete registration

Whenever a person completes a registration for a product or a service, this event is triggered. Add this event to a registration confirmation page.

10. Custom event

Facebook lets you define the conversions you are interested in, but this does require a bit more advanced knowledge in order to set the right parameters.

Step 4: Installing the Facebook Pixel event code

You can place the event code when a user is taken to a new page, or when an action happens on the page. These two actions have different codes so you have to pay attention to which one you will use.

For example, if a person clicks the button for checkout and is taken to another page, then you would place the event code using option A.



Go to the installed plugin and click on the tracking code manager, then create a new tracking code. Name it however you prefer, and then paste the code from Facebook. Then, copy the code for the event you want to track on that page. Go back to Facebook. You can find event codes on your Facebook Ads Manager / Pixels / Create Conversion. Copy the code you want (the one that you want to track every time a specific page is opened). Go to the WordPress again.

The code you first pasted should look like this:



Click the exact place where the red arrow is pointing, and press Enter.

Now you need to paste the smaller event code you copied from Facebook Ads Manager. These codes look like this:



And now, paste it right above the </script> tag like this:



Unlike the base code placed in the header, these codes only make sense when they are used on the page they are supposed to, so make sure to select the correct page name from the drop-down menu below.

Whenever setting up codes in this manager, always choose the option: Standard code tracking in your WordPress. This opens up the menu where you get to choose on which pages you want to use this code. The base code is meant to be used throughout the whole website, and these event codes should be used only on specific pages.



Save the changes and voila! That is how you insert event codes into your website and can track them through Facebook Pixel.

Step 5: Check to see if Facebook Pixel is working

The only thing left to do is to confirm that the tracking is indeed working. Simply download the Facebook Pixel Helper Chrome browser extension (you can find it here), reload your website and click the icon in the upper-right hand corner. This is also a troubleshooting tool that shows all Pixel events, and a complete overview.