Using the Facebook Pixel with OptinMonster

Want your OptinMonster conversions to trigger a Facebook Pixel on your website? It’s easy with OptinMonster’s Javascript Events API! Follow this guide to get started.

IMPORTANT NOTE: All JavaScript / jQuery needs to be wrapped in script tags, no matter where you’re placing your Scripts within OptinMonster.

<script>
/* Your JavaScript or jQuery code. */
</script>

Getting Started

Facebook advises you add the Base Code for the Facebook Pixel to all pages of your site in their Facebook Pixel documentation.

You'll want to add the Facebook Pixel Base Code to all pages of your website according to Facebook's documentation.
The Standard Event code is what we’ll cover in this guide’s 2 Options.

<script>
 /*The Facebook Pixel Standard Event you want to trigger*/
fbq('track','Lead');
</script>

Options

Native Integrations

If you are using a Native Integration, then the easiest way to achieve this is to go to your Success Menu Item.

Success-Menu-Item

On this panel, you will see an area that says Success Triggered Scripts.

Enter any scripts that should be fired when your campaign is successfully submitted into the Success Triggered Scripts field in the campaign Builder.

In this area, you can paste the following:

<script>
 /* The Facebook Pixel Standard Event you want to trigger */
fbq('track','Lead');
</script>

That’s it! For our native integrations that is all there is to do. Upon successful submissions, then that Facebook script will run.

Custom HTML

If you are using the Custom HTML integration, you will first need to tell OptinMonster what counts as a conversion.

You will need to add the om-trigger-conversion class to your submit button (or link if your “conversion” is clicking on an image, etc.). You can add the om-trigger-conversion by following our track conversions on Custom HTML guide.

After you’ve successfully added the class to your submit button, then you can continue to the Success Triggered Scripts area in the Success menu area.

In this area, you can paste the following:

<script>
 /* The Facebook Pixel Standard Event you want to trigger */
fbq('track','Lead');
</script>

That’s it! Upon successful conversions, that Facebook script will run.

Canvas Template

In the Canvas Template you do not have a Success Menu. In this case, if you want the Facebook Script to fire then you need 2 things.

Step 1 – Add the Conversion Code

Similar to the Custom HTML option above, in this case you will need to first make sure you have the om-trigger-conversion class added to your submit button (or a link) by following our guide for tracking conversions when using our Canvas Technology.

Don’t forget to hit Save on your campaign. Great, your work is done in the Builder area. Head to your website.

Step 2 – Add a Script to Your Website

This script will contain your Facebook code. Since this code will likely be in a similar spot where your OptinMonster embed code is, remember then that you need to specifically wrap the Facebook Pixel code in <script type="text/javascript"&gt</script>tags, then you should add this code to your website just before the closing </body> tag:

<script type="text/javascript">
jQuery(document).ready( function($){
    $(document).on('OptinMonsterTrackedConversion', function(){
 
      /* The Facebook Pixel Standard Event you want to trigger */
      fbq('track','Lead');
 
    });
});
</script>

Clear out any site caching that you have and now you should be good to go!

Alternative Trigger Events

OptinMonster provides many different Javascript API Events. These are particularly beneficial when your form is an iFrame and therefore you are unable to use the conversion method above.

Step 1 – Choose your Trigger Event

In this scenario, your OnClose event, which will fire only when the campaign is closed.

IMPORTANT: Replace YOUR_OPTIN_SLUG in the example below with the slug of your own specific campaign.
<script type="text/javascript">
jQuery(document).ready( function($){
    $(document).on('OptinMonsterOnClose', function(data){

        if( data.optin == 'YOUR_OPTIN_SLUG' ) {

            /* The Facebook Pixel Standard Event you want to trigger */
            fbq('track','Lead');

        }

    });
});
</script>

In addition, there may be times you will want the pixel to fire when the campaign first shows.

This is particularly useful when you want to track the opening of a MonsterLink campaign. The following example triggers the Facebook Pixel Standard Event only when a specific campaign is opened. Replace YOUR_OPTIN_SLUG in the example below with the slug of your own specific campaign being opened by MonsterLink.
<script type="text/javascript">
jQuery(document).ready( function($){
    $(document).on('OptinMonsterOnShow', function(data){

        if( data.optin == 'YOUR_OPTIN_SLUG' ) {

            /* The Facebook Pixel Standard Event you want to trigger */
            fbq('track','Lead');

        }

    });
});
</script>

Step 2 – Add a Script to your Website

This script will contain your Facebook code. Since this code will likely be in a similar spot where your OptinMonster embed code is, remember then that you need to specifically wrap the Facebook Pixel code in <script type="text/javascript"&gt</script>tags, then you should add this code to your website just before the closing </body> tag:

<script type="text/javascript">
jQuery(document).ready( function($){
    $(document).on('OptinMonsterTrackedConversion', function(){
 
      /* The Facebook Pixel Standard Event you want to trigger */
      fbq('track','Lead');
 
    });
});
</script>

Clear out any site caching that you have and now you should be good to go!

Looking for ways to extend the functionality of OptinMonster? Check out our JavaScript events API!


Frequently Asked Questions

Q: What if I want to trigger a different Facebook event?

A: You may need to customize the specific Standard Event to fit your needs, please refer to this list of Facebook Pixel Standard Events for what’s available.


Q: How can I add JavaScript to my WordPress site?

A: You can add JavaScript to your WordPress site by following our guide.