How to use Facebook Pixel with Convertful

Tracking Convertful Events #

With Convertful you may use custom JavaScript code to track events performed with your widget. There are three main event types you can track:

• Widget Display -- a moment when widget appears on the screen.
• Optins -- when a visitor press subscription button. 
• Button Clicks -- when a visitor interacts with the redirect button, or other button types.

Tracking Widgets Displays #

To add a JavaScript code to track widget display go to your widget's Display Rules tab:

Scroll it down and activate the Tracking Pixel Code switch: 

The code you enter in this canvas will run with the widget display.

Tracking Optins #

When editing widget, click the submit button to open its settings and choose On Submit Actions after: 

Add action called Execute JavaScript:

Being added to the submit button, this action will run the JavaScript you specify when a visitor successfully subscribed to the widget. Note that this action only starts with the successful submit. For example, if a visitor hasn't yet filled in the required input fields, this action won't trigger on click.

Tracking Buttons Clicks #

When editing widget, click your Links, Close, or Custom button to open its settings and choose On Click Actions after: 

Add action called Execute JavaScript:

This action will run the JavaScript you specify when a visitor clicks this button.

Facebook Pixel #

To create a Facebook Pixel go to https://www.facebook.com/events_manager and press the Set Up Pixel button.

And pick the option Manually Install the Code Yourself:

Installing Facebook Pixel #

To install Facebook Pixel on your site with Convertful widget, go to your widget's Display Rules tab, scroll it down and activate the Tracking Pixel Code switch:  

In this canvas, paste the part of pixel code, starting with ' !function... ' string, ending with the ' fbq('init' ... ); '. For example:

Tracking Widgets’ Displays #

To track the widget display with Facebook Pixel, open your widget's Display Rules tab, scroll it down and activate the Tracking Pixel Code switch:

Paste the part of your Facebook Pixel code starting with ' !function(...) ' and ending with ' fbq('track', ...); ' 

If you want to use one Facebook Pixel to track displays of different widgets, you may replace the last string: 

fbq('track', 'PageView');

with the code, identifying this exact event and widget: 

fbq('track', 'ViewContent', {content_name: 'My widget'});

Tracking Optins #

Go to your widget's Display Rules tab, scroll it down and activate the Tracking Pixel Code switch:  

In this canvas, paste the part of pixel code, starting with ' !function... ' string, ending with the ' fbq('init' ... ); '. For example:

Next, go to your Facebook Pixel Add your event step:

Activate the Subscribe switch and choose Track Event on Inline Action tab. Here you'll need a string of code between the <script> tags: 

Now return to your widget's Design tab, click the subscription button to open its settings and click On submit actions:

Add the Execute JavaScript action and paste click tracking code from Facebook Pixel: 

Tracking Buttons Clicks #

Go to your widget's Display Rules tab, scroll it down and activate the Tracking Pixel Code switch:  

In this canvas, paste the part of pixel code, starting with ' !function... ' string, ending with the ' fbq('init' ... ); '. For example:

Next, go to your Facebook Pixel Add your event step:

Activate the Subscribe switch and choose Track Event on Inline Action tab. Here you'll need a string of code between the <script> tags: 

Now return to your widget's Design tab, click the subscription button to open its settings and click On submit actions:

Add the Execute JavaScript action and paste click tracking code from Facebook Pixel: 

Verifying That Pixel Works #

To test your pixel working correctly you can use a specific Google Chrome browser extension called Facebook Pixel Helper.

Once you install and activate it, every time tracking code is loaded or used, you'll see a notification icon about it.