How To: Use Facebook Pixels on Dynamic Sites

Tracking offsite conversions is an important part of any marketing campaign that’s measuring performance or ROI. Facebook gives us Offsite Conversion pixels to measure everything from a key page view, all the way to an e-commerce sale. But as the web gets more dynamic, it can be difficult to trigger pixels when there’s no static page on which a conversion occurs.

Talking with Facebook Marketing author Brian Carter, it became clear to me that this is a challenge facing many advertisers. But with a little Javascript, any website can track offsite conversions, no matter how dynamic their site.

At its simplest, the Facebook Offsite Conversion Pixel is a piece of HTML that loads in a website visitor’s browser. When this happens, the user’s browser sends Facebook’s servers a message, and Facebook knows the transaction occurred. To make this happen when your website hasn’t reloaded the page, we have to tell the user’s browser to dynamically send that message to Facebook’s servers.

The normal pixel, without all the wrapping Javascript around it, looks something like this:

<img height=”1″ width=”1″ alt=”” style=”display:none” src=”https://www.facebook.com/offsite_event.php?id=6000000000000&value=0.00″ />

Yours will have a different “id” value, and you’ll want to customize the “value” value if your event has a dollar amount associated with it.

To load this pixel dynamically, place a function like this on your page:

<script>

function facebookPixel(pixel_id, value) {

            document.write(‘<img height=”1″ width=”1″ alt=”” style=”display:none” src=”https://www.facebook.com/offsite_event.php?id=’ + pixel_id + ‘&value=’ + parseFloat(value) + ‘” />’);

}

</script>

This code adds the Offsite Conversion pixel to your page every time it’s called. To call the function, you just pass in the correct pixel_id (taken from your pixel code on Facebook) and a value.

facebookPixel(6000000000, 10.50);

You could call this function from an HTML anchor tag like this:

<a onclick=”facebookPixel(6000000000, 10.50);”>Click Here</a>

Or within another Javascript function:

function statusCheck(status) {

            if (status == ‘valid’) {

                        facebookPixel(6000000000, 10.50);

            }

}

If you’re concerned about pixels firing multiple times, you can use more Javascript to ensure that each user only fires each pixel a single time.

Here’s a very simple version that suppresses duplicate triggers on a single page:

<script>

var triggered = 0;

function facebookPixel(pixel_id, value) {

            if (triggered == 0) {

                        triggered = 1;

                        document.write(‘<img height=”1″ width=”1″ alt=”” style=”display:none” src=”https://www.facebook.com/offsite_event.php?id=’ + pixel_id + ‘&value=’ + parseFloat(value) + ‘” />’);

            }

}

</script>

For more sophisticated deduping, you’ll want to track whether users have triggered pixels using cookies. This can be done using Javascript libraries like jQuery with plugins.

The more events we can track, and tie back to our ad spend, the better we’re able to effectively budget and bid on our campaigns. Facebook’s Offsite Conversion pixels are the best way to manage this on Facebook. And with this simple code, you can use their pixels to track any dynamic action a user might take.

---