Facebook Pixel Implementation Guide

In this article, we'll explain how to create a Facebook pixel, add its base code to your website, add its event code to your website and define conversions. If you're looking to transition to the Facebook pixel from an older version of the pixel, check out our guides for transitioning from a conversion tracking.

Written By Matthew Martin

October 12, 2016

[vc_row][vc_column][vc_column_text]

In this article, we’ll explain how to create a Facebook pixel, add its base code to your website, add its event code to your website and define conversions.
If you’re looking to transition to the Facebook pixel from an older version of the pixel, check out our guides for transitioning from a conversion tracking pixel and upgrading from a Custom Audience pixel. Learn more about what’s happening to the conversion tracking pixel here.

To do:

Creating a Facebook Pixel

To create your Facebook pixel:

  1. Go to your Facebook Pixel tab in Ads Manager.
  2. Click Create a Pixel.
  3. Enter a name for your pixel. You can have only one pixel per ad account, so choose a name that represents your business.Note: You can change the name of the pixel later from the Facebook Pixel tab.
  4. Check the box to accept the terms.
  5. Click Create Pixel.
Important: If you’ve created a Custom Audience pixel in the past, you have an older version of the Facebook pixel and won’t see an option to create another. However, we strongly recommend that you update to the Facebook pixel base code and add its event codes to access all the products that can help your business.

About the Facebook pixel code

The Facebook pixel code is made up of two main elements:

  • Pixel base code
  • Event code

The pixel base code tracks activity on your website, providing a baseline for measuring specific events. The base code should be installed on every page of your website.

To install the pixel base code:

  1. Go to the Pixels page in Ads Manager
  2. Click Actions > View Code
  3. Copy the base code and paste it between the <head> tags on each web page, or in your website template to install it on your entire website

Events are actions that happen on your website, either as a result of Facebook ads (paid) or organic reach (unpaid). The event code lets you track those actions and leverage them in advertising.

There are two types of events you can send:

  • Standard events. 9 events we’re able to track and optimize your ads for without any additional actions. See below for an example of what your website code will look like with standard events installed.

    The Facebook pixel code with a standard event.

    1. Your website’s original code: Paste the Facebook pixel code between the <head> and </head> tags of your web page. You may already have other existing code between the head tags, so just place the pixel code underneath that, but above </head>.

    2. Your Facebook pixel base code: Your Facebook pixel code will look like the diagram above, except your pixel ID will be different from 1234567890.

    3. Your standard event code: Within your Facebook pixel code, above the </script> tag, paste the Standard Event code that’s relevant to your page (ex: Complete Registration, Add To Cart). You’ll need to do this for every page you want to track.

    The key here is that every page of your website should have everything that’s enclosed in section 2 (the base code), but different pages will have different snippets of code for section 3 (standard event code). See below for another example.
    What the code looks like on an add-to-cart page.
  • Custom events. Actions that are important to your business, but that you can’t use for tracking and optimization without additional action. Learn how to use custom events.

Adding the Facebook pixel base code to your website’s pages

To add the pixel code to your website:

    1. Go to your Facebook Pixel tab in Ads Manager
    2. Click Actions > View Pixel Code
    3. Click the code to highlight it

 

  1. Right-click and select Copy or use Ctrl+C/Cmd+C
  2. Click Done
  3. Go to your website’s HTML and paste the code

Tip: We recommend that you put the code in the header tags of the website HTML to ensure that it’s able to track across your entire site.

Adding the event code to your website’s pages

Event code indicates specific actions that are important to your business objective. To add the event code to your website:

  1. Go to your Facebook Pixel tab in Ads Manager.
  2. Click Create Conversion > Track Conversions with Standard Events.
  3. Copy the Event Code of the events that matter to you.
  4. Go to your website’s code and place the event code on the relevant pages. We recommend doing this by adding the event code between script tags separately. We recommend not modifying the pixel base code.

Tips: Add a full funnel of events (ex: ViewContent, AddToCart and Purchase) to capture all relevant purchase actions.

On the special pages of your website that you want to track and optimize your ads for, add one of these 9 standard events. For example, someone selling toys on their website would place standard event codes for their add-to-cart page and purchase page. Just copy and paste everything in the standard event code column and paste it under fbq(‘track’,’PageView’); like in the diagram above. If you’d prefer to use URL rules instead of standard events, you can use custom conversionsinstead.

Website action Standard event code
View content fbq(‘track’, ‘ViewContent’);
Search fbq(‘track’, ‘Search’);
Add to cart fbq(‘track’, ‘AddToCart’);
Add to wishlist fbq(‘track’, ‘AddToWishlist’);
Initiate checkout fbq(‘track’, ‘InitiateCheckout’);
Add payment info fbq(‘track’, ‘AddPaymentInfo’);
Make purchase fbq(‘track’, ‘Purchase’, {value: ‘0.00’, currency: ‘USD’});
Lead fbq(‘track’, ‘Lead’);
Complete registration fbq(‘track’, ‘CompleteRegistration’);

Note: You can also add different parameters for each standard event code, such as Content ID, value and currency. The conversion standard event requires value and currency parameters to work. Parameters are optional for all other standard events. Learn more about parameters.

Other options

I want to install just the image tag of the Facebook pixel
I can’t place standard events between the </head> tags

 

Confirm your pixel is implemented correctly

Defining conversions

In order to track and optimize for events on your website that matter to you, you need to define them as conversions. Standard events are already conversions, so if you’re using standard events, there are no extra steps needed. They’ll be available for you to track or optimize on.

If you’re using custom events, plan to use URL-based rules, or want to define a conversion as a specific subset of standard events, you’ll need to take the steps detailed below.

Using custom events as conversions

To use custom events as conversions:

  1. Implement custom events in your page code
  2. Go to your Facebook Pixel tab in Ads Manager
  3. Click Create Conversion > Track Custom Conversions
  4. In the “Rule” section, click the dropdown and change URL Contains toEvents

    Note: It may take a moment for Events to appear

  5. In the field underneath the dropdown, select the custom event you want to define as a conversion
  6. In the “Category” section, click the Choose a Category dropdown and select the most appropriate choice
  7. Name the custom conversion
You can also add a default conversion value, which we’ll use if values aren’t being sent dynamically as a parameter within the custom event. When a value isn’t set or sent, we’ll set it to 0 by default.

View your custom conversions.

Using a subset of standard events as conversions

To use a subset of standard events as conversions:

  1. Go to your Facebook Pixel tab in Ads Manager.
  2. Click Create Conversion > Track Custom Conversions
  3. In the “Rule” section, click the dropdown and change URL Contains toEvents.

    Note: It may take a moment for Events to appear.

  4. In the field underneath the dropdown, select the standard event.
  5. If the event has sent parameters with it, you’ll be able to select the key pair value. If you do not see it but expect it, make sure the event is set up to send data in parameters.
  6. In the “Category” section click the Choose a Category dropdown and select the most appropriate choice
  7. Name the custom conversion.
You may also add a default conversion value. We’ll value the given conversion at the amount you specify if values aren’t being sent dynamically as a parameter within the custom event. When a value isn’t set or sent, we’ll set it to 0 by default.

View your custom conversions.

Running your campaign

To create a campaign using your pixel:

  1. Go to ad creation
  2. Select the Increase conversions on your website objective
  3. Click Continue
  4. Choose a conversion event
  5. Finish creating your campaign, making sure you:
    • Select Conversions as your “Optimization for Ad Delivery” choice at the ad set level
    • Enter the URL of the page you want to track conversions on in the “Destination URL” field at the ad level
  6. Click Place Order when you’re done

Keep in mind you can use the Facebook pixel in the same way when creating your ads in Power Editor. Your ad will automatically track all available conversion events so you don’t need to manually select a pixel for tracking. You’ll be able to see all this data in your ads reports.

[/vc_column_text][/vc_column][/vc_row]

You May Also Like

How To Choose The Best Web Designer

How To Choose The Best Web Designer

In this article, I’m going to discuss some of the different types of “web designers” and agencies and explain the pros and cons of each. There are several options, and if you’ve received on of my videos or already had a chat with me, then you’ve probably heard me say “that these days, you can throw $100 in the air at a Starbucks and find someone who can make you a pretty website.” Seriously, almost anyone coming out of college these days can use a “website builder” and make something pretty for you. I’ll talk about this possible solution and the others, like a part-timer, full-timer, and the differences between an old school web design group and a new school digital marketing agency.

The Differences Between Website Service & Project Based Web Design

The Differences Between Website Service & Project Based Web Design

In today’s digital world, your website is usually the first interaction consumers have with your business. If it isn’t your website directly, it’s probably your digital presence in some form or fashion. That said, I’m not here to educate you on why you need a website or website redesign, I want to help you choice the right path. First define the two different paths you can take.

Graphic Design Projects

Managed Websites

Social Media Clients

Resources and Guides, Web Design Ebooks

Improve Your Marketing

Get fresh tips, how-tos, and expert advice to make marketing that really freaking works.

(12,500 marketers are already doing it.)

You have Successfully Subscribed!