Using the Facebook Pixel with OptinMonster

You can easily use OptinMonster’s Javascript Events API to trigger a Facebook Pixel on your site. Follow this guide to get started.

In this guide, we provide different options and examples for how you can use a Facebook Pixel with OptinMonster.

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>

Option 1: Native Integrations and Custom HTML

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 optin is successfully submitted into the Success Triggered Scripts field in the optin 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

The Custom HTML integration requires an extra step for you to be able to trigger the Facebook Script upon success.

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! For our native integrations that is all there is to do. Upon successful submissions, then that Facebook script will run.

Option 2: Canvas and Other Trigger Events

Now, if you are running Canvas Template, or if you are wanting the Facebook event to run on another Trigger Event (onClose perhaps?) then this is the section for you.

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.

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 optin. Great, your work is done in the Builder area. Head to your website.

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"></script>tags, then you should add this code to your website just before the closing body tag: </body>.

The following is what you would paste 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.

1) Choose your Trigger Event
In this scenario, you OnClose event, which will fire only when the Optin is closed. Remember: Replace YOUR_OPTIN_SLUG in the example below with the slug of your own specific optin.

<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 Optin first shows.

This is particularly useful when you want to track the opening of a MonsterLink optin. The following example triggers the Facebook Pixel Standard Event only when a specific optin is opened. Replace YOUR_OPTIN_SLUG in the example below with the slug of your own specific optin 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>

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"></script>tags, then you should add this code to your website just before the closing body tag: </body>.


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.