A Meta Pixel (previously referred to as the 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 Meta Pixel in Smart Builder.
This article explains how to set up a Meta Pixel in the Classic Builder. Adding a Meta Pixel to your landing page requires 4 steps:
Step 1: Create Your Meta Pixel
Step 2: Install Your Meta Pixel Code on Your Unbounce Landing Page
Step 3: Track Conversion Events with the Pixel (Optional)
- Option 1: Manually Adding a Meta Pixel Tracking Event in Unbounce
- Option 2: Tracking Conversion Events Using Meta's Event Setup Tool
Step 4: Testing Your Meta Pixel Base Code & Events
Step 1: Create Your Meta Pixel
As Meta's interface is ever-changing, please review their documentation to access the most up-to-date steps: Create & Install the Meta Pixel.
Step 2: Install Your Meta Pixel Code on Your Unbounce Landing Page
- From the Data Sources page, choose the option to Manually add pixel code to a website.
- From the Install Base Code page, click the Copy Code button from the dialog box:
- Back in the Classic Builder, navigate to the page where you'd like to install the Meta Pixel.
- Click the Javascripts
button at the bottom of the Classic Builder. A new dialog box will appear.
- Paste in the pixel base code copied from the Meta Ad Manager:
- Name the pixel script, and select the Head option in the Placement drop-down menu.
- Once you've completed all these steps, click the Done button in the bottom right corner of the dialog script box in Unbounce.
- 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 Meta'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 Meta.
Option 1: Manually Adding a Meta 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) |
Meta pixel base code only |
Meta pixel base code + conversion tracking snippet |
Follow these steps to install the conversion tracking snippet on your form confirmation dialogue.
- In the Classic Builder, navigate to the Form Confirmation Dialog tab at the top of the page.
- Click the Javascripts
button at the bottom of the Unbounce Builder. A new dialog box will appear:
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.
- Paste in your Meta pixel base code again within a new dialog box.
- Name your script, & this time set the placement to After Body Tag.
- 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:
Now, we’ll edit the script to include the conversion tracking code.
- You can choose from the list of custom events provided by Meta'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');
- Add the conversion tracking snippet to the base code:
Here’s what the implementation of installing the base code & event snippet looks like:
- Once you've completed all these steps, click the Done button in the bottom right corner of the dialog box.
- Be sure to Save & Republish/Publish your page.
Option 2: Tracking Conversion Events Using Meta's Event Setup Tool
As Meta's interface is ever-changing, please review Meta'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 Meta's support team or support center, 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 Meta Pixel Base Code & Events
Download the Facebook Pixel Helper plugin to test if your pixel is firing correctly.
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 Meta pixel 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 Meta's Ad Manager.
Helpful Resources
Use the Event Setup Tool for Web