Integrating with the Facebook Pixel in the Classic Builder

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.

Note: Working in Smart Builder? You can download the Facebook Pixel app and track your pages with the click of a button! See our documentation to learn more: Installing the Facebook Pixel in Smart Builder.

This article explains how to set up a Facebook Pixel in the Classic Builder. 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 on Your Unbounce landing page

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

Step 4: Testing Your Facebook Pixel Base Code & Events


Step 1: Create Your Facebook Pixel

As Facebook's interface is ever-changing, 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 Classic 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 Classic 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 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. 

The table below breaks down which code snippet to install & where to install it: 

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. In the Classic Builder, navigate to the Form Confirmation Dialog tab at the top of the page.
  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 confirmation/thank-you landing page instead of the form confirmation dialog, these steps will also work! Simply open the page with the Classic Builder, and navigate to the Javascripts 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 what 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

As Facebook's interface is ever-changing, please review Facebook’s documentation to access the most up-to-date steps on 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