How To Configure Conversion Tracking With Facebook's Pixel
Why is this so important? Because if you are running ads, that's money being spent. If you have proper conversion tracking, optimization algorithms are provided the required data for them to function, and function optimally (providing you improved results as time passes).
What a conversion action is for you can vary depending on what your active goal is. Sometimes you will want to measure how many website sign-ups your new landing page receives, so you would want your conversion event to be user registration. If you were a non-profit, maybe you want to track how many donations your donation page receives, so you would likely want your conversion event to be donation.
Facebook's Pixel code is provided when creating, it looks like this:
<script>
! function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxx&ev=PageView&noscript=1"
data-pagespeed-url-hash="2295629355" />
</noscript>You'll want to copy that to your clipboard (highlight, right-click, copy) then go to your website's index.html file and paste that in <head> tag, probably best to do so just above the closing </head> tag, and save the index.html.
After you've installed the above, what this will do as-is (but updating the xxxxxxxx with your Pixel's ID) is track any visitors to your home page (presumably index.html).
In most cases, this is not enough to measure what really matters and that's conversions. So in this example, we're going to demonstrate how to track a purchase from that page. When someone purchases your product or service on your website, it's usually best practice to redirect the user to a thank you page and this is what we'll do. On the thank you page that you redirect users to on a successful payment or checkout you would want to add the above code that you added to your index.html to the thank-you.html but with the addition of an extra line, just above the </script>. fbq('track', 'Purchase', {currency: "USD", value: 90.00}); This would assume that the product they purchased was in US Dollar and also in the amount of 90 dollars. Below is the full example:
<script>
! function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxxx');
fbq('track', 'PageView');
fbq('track', 'Purchase', {currency: "USD", value: 30.00});
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxx&ev=PageView&noscript=1"
data-pagespeed-url-hash="2295629355" />
</noscript>Now after you've added the above, you can save the file and voilà you have conversion tracking with Facebook's Pixel.
Why is this so important? Because if you are running ads, that's money being spent. If you have proper conversion tracking, optimization algorithms are provided the required data for them to function, and function optimally (providing you improved results as time passes).
Still confused or have questions? Please feel free to contact us, we'd love to chat and see how we can help you.