Integrating with the Facebook Pixel

Follow

A Facebook Pixel is a small snippet of JavaScript code that you can copy and paste into pages along your conversion funnel to track both page views and conversions.

Adding a Facebook pixel to your landing page requires 4 steps: 

Step 1: Create your Facebook Pixel

Step 2: Install your Facebook Pixel base code to your Unbounce landing page

Step 3: Track Conversion Events with FB Pixel (optional)

Step 4: Test your Facebook Pixel Base Code & Events


Step 1: Create your Facebook Pixel

  1. Log into your Facebook Business Manager.
  2. Click the menu icon on the left-hand side & navigate to the Events Manager.
    • The Data Sources page will appear.
  3. Within the left-hand side menu bar, click the green plus button titled Connect Data Sources.
  4. In the dialog box that appears, select the Web option. Click Connect to continue.
  5. In the next step, select Facebook Pixel:“creating-your-facebook-pixel”
  6. Click Connect to continue, then add the details required for your FB pixel setups, such as your pixel name, and your landing page URL (optional).
  7. Click the Continue button to finalize these changes.

You’re all set! You’ve now created your Facebook pixel. Next, we can copy the code & embed this pixel onto your landing page(s). 

Do note that Facebook’s display settings may change with regards to steps on creating your pixel. Please review Facebook’s documentation to access the most up-to-date steps: Create & Install a Facebook pixel

Step 2: Install your Facebook Pixel code on your Unbounce landing page.

  1. From the Facebook Data Sources page, choose the option to Manually add pixel code to a website.
  2. From the Install Base Code page, click the Copy Code button from the dialog box:copy-pixel-base-code-from-facebook
  3. Back in the Unbounce Builder, navigate to the page where you'd like to install the Facebook Pixel.
  4. Click the Javascripts jsbutton.png button at the bottom of the Unbounce Builder. A new dialog box will appear.
  5. Paste in the pixel base code copied from Facebook's Ad Manager: 
    facebook-pixel-base-code
  6. Name the pixel script, and select the Head option in the Placement drop-down menu. 
  7. Once you've completed all these steps, click the Done button in the bottom right corner of the dialog script box in Unbounce.
  8. Be sure to Save & Republish/Publish your page. 

Step 3: Track Conversion Events with FB Pixel (Optional)

Once you’ve set up your pixel base code, you can manually install and add event tracking scripts to the same pixel code to track custom events. You can set up conversion tracking for both or either standard events & custom events

Or, you can utilize Facebook’s nifty point-and-click Event Setup Tool that lets you add event tracking automatically within the Business Manager. 

What you’ll need: 

  • Your base code must be embedded onto your home page/main landing page (Step 2), i.e., on every page where you want to track a conversion back to Facebook.

Option 1: Manually Adding a Facebook Pixel tracking event in Unbounce

Be sure to install the event tracking snippet only on the final page your users land on once they complete the conversion action. In some cases, this will either be the form confirmation dialogue, or a separate thank-you/ confirmation page. 

To relay this back to Unbounce, here’s a table to break what to install & where: 

Main Landing Pages

Confirmation Page (thank-you page or Unbounce’s form confirmation dialogue)

Facebook pixel base code only

Facebook pixel base code + conversion tracking snippet

Follow these steps to install the conversion tracking snippet on your form confirmation dialogue.

  1. Within the builder, navigate to your landing page, and select the Form Confirmation Dialog tab at the top left corner. 
  2. Click the Javascripts jsbutton.png button at the bottom of the Unbounce Builder. A new dialog box will appear: 
    locating-form-confirmation-dialogue-javascript-button
If you’re using a thank-you page instead of the form confirmation page, these steps will also work! Within the builder of your thank-you page, navigate to the JavaScript button.
  1. Paste in your Facebook pixel base code again within a new dialog box.
  2. Name your script, & this time set the placement to After Body Tag.
  3. Within the base code, be sure to remove the 12th line of code (or whichever line includes fbq('track', Pageview);, as shown in this screenshot: 
    remove-page-view-tracking

Now, we’ll edit the script to include the conversion tracking code.

  1. You can choose from the list of custom events provided by Facebook’s list of standard events.
    • As an example, let’s manually set up event tracking to track a lead. The snippet of code looks like this: fbq('track', 'Lead');
  2. Add the conversion tracking snippet to the base code:
    add-conversion-tracking-snippet-to-base-code

    Here’s how the implementation of installing the base code & event snippet looks like: 

    conversion-tracking-setup
  3. Once you've completed all these steps, click the Done button in the bottom right corner of the dialog box.
  4. Be sure to Save & Republish/Publish your page.

Option 2: Tracking Conversion Events using  Facebook’s Event Setup Tool 

  1. Back in Facebook’s Business Manager, navigate to the Data Sources page (to view your list of all current events).
  2. Click the Add Events dropdown button.
  3. From the drop-down menu, select From the Pixel:
    facebook-event-setup-tool
  4. When prompted, enter the URL for your landing page, then click Open Website.
  5. Your landing page will launch in a new window, along with a pop-up of the Facebook Event Setup Tool.
  6. Choose the option to either
    1. Track New Button, or
    2. Track a URL
      choose-custom-events-using-event-setup
  7. Follow through all the Facebook prompts to select the type of standard or custom event you’d like to track.
  8. Repeat this process for every button or URL for which you’d like to set up triggers or events.
  9. When you’ve finished, click Finish Setup and save your changes.

For more detailed steps, take a read of Facebook’s documentation explaining how to use the Event Setup Tool.

If you run into trouble using this tool, we recommend reaching out to Facebook's support team, as the Event Setup Tool is outside the scope of Unbounce's support. 

Note:

You can use Unbounce’s Script Manager to apply the pixel code across all pages linked to a particular domain. However, variant-level scripts (as demonstrated in this article), load before domain-level scripts. Be sure to install the scripts in either Script Manager OR the page-level, not scattered between both: meaning, all scripts either in Script Manager, or all scripts at the variant-level.

Step 4: Testing your Facebook Pixel Base Code & Events

Download the Facebook Pixel Helper plugin to test if your pixel is firing correctly or what information is firing back to Facebook. You can also submit test lead submissions on your page(s) and check the plugin for details on the conversion event.

Ad-blocking Tools

Ad-blocking tools can sometimes prevent the Facebook pixel code from firing when your landing page loads. To remedy this, remove/disable the ad-blocking script from your page, and test the page again using the plugin. Or, you can submit a test conversion and check your stats in Facebook’s Ad Manager.

Helpful Resources

About Facebook Pixel 

Use the Facebook Event Setup Tool for Web 

About Facebook Pixel Standard and Custom Events

Troubleshoot Facebook Pixel Error and Warning Messages

Unbounce made it easy for me to find the information I need.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply