FB pixel - conversion tracking tutorial

This guide works only for "old" facebook pixels. It's because facebook announced that they will remove the conversion tracking pixel in early 2017. September 15, 2016 - from this date all ad accounts will no longer be able to create OLD conversion tracking pixels. Facebook will replace "conversion tracking pixel" with brand new "pixel" and this module fully supports new tracking pixel!


In this guide I will show you an easiest and quickest way to include facebook conversion tracking pixel to your website. I decided to write this tutorial because I see on official prestashop forums that many PrestaShop users don't know how to add FB pixel to shop. Whole guide will be based on our html box pro module that allows to place custom contents to any part of website (with many conditions related to appearance of code). html box pro module is an advanced multitool for PrestaShop that allows to build blocks with custom contents (so also with tracking codes). If you don't have the html box pro module, you can try with cheapest FBPIXEL conversion tracking solution


How to add FB conversion pixel?

Facebook Conversion tracking pixel is a feature that allows to track conversion on your website. Using the Facebook pixel, you can leverage the actions people take on your website across devices to inform more effective Facebook advertising campaigns From technical point of view The Facebook pixel is a piece of JavaScript code. Because of this - to put it to the shop - it will be necessary to integrate this javascript code with your page. So, what are the steps to get FB pixel and include it to prestashop?

  1. create the facebook conversion pixel on your ads manager website: ads manager on facebook
  2. install and verify pixel on your website


Tracking pixel code

I assume that you generated own pixel on facebook ads manager page. Usually tracking conversion pixel code looks like below:

    <!-- Facebook Conversion Code for Test --> <script>(function() { var _fbq = window._fbq || (window._fbq = []);
    if (!_fbq.loaded) { var fbds = document.createElement('script'); fbds.async = true; fbds.src = 'https://connect.facebook.net/en_US/fbds.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fbds, s); _fbq.loaded = true; } })(); window._fbq
    = window._fbq || []; window._fbq.push(['track', '6014421445677', {'value':'0.00','currency':'USD'}]); </script> <noscript><img
    height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6014421445677&amp;cd[value]=0.00&amp;cd[currency]=USD&amp;noscript=1"

Treat code above as an example. I highlighted line where you can see  6014421445677 number. This is the pixel ID. Each user has different pixel ID so dont use code above (just use own code ). This line contains also value variable (0.00) and currency variable 'USD'. At the end of the code you can see <img> tag with the same variables, i mean: pixel id, value, currency code.

    <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6014421445677&amp;cd[value]=0.00&amp;cd[currency]=USD&amp;noscript=1"

We must replace 0.00 and USD with dynamic variables because customer can place orders in different currencies, and value of each order can be different. We will do it with html box pro module. So now you can go to the second step of this guide


Install fb conversion pixel with html box module

As i already mentioned this guide will be based on custom contents module called html box pro . Follow steps below to integrate the facebook pixel with your website.

  1. Go to your shop back office
  2. Open modules > modules section
  3. Open html box pro configuration page
  4. From left hand side column enable "orderConfirmation" position by ticking checkbox near the name of the position
    order confirmation hook html box pro
  5. Then click on (+) green button to add new block to this position
  6. Fill out form with block name for example "FB PIXEL"
  7. To contents paste pixel code with {order_total_paid} variable and {order_currency_iso_code} variable (instead 0.00 and USD) like i show on example below:
                <!-- Facebook Conversion Code for Test --> <script>(function() { var _fbq = window._fbq || (window._fbq = []);
                if (!_fbq.loaded) { var fbds = document.createElement('script'); fbds.async = true; fbds.src = 'https://connect.facebook.net/en_US/fbds.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fbds, s); _fbq.loaded = true; } })(); window._fbq
                = window._fbq || []; window._fbq.push(['track', '6014421445677', {'value':'{order_total_paid}','currency':'{order_currency_iso_code}'}]);
                </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6014421445677&amp;cd[value]={order_total_paid}&amp;cd[currency]={order_currency_iso_code}&amp;noscript=1"
  8. {order_currency_iso_code} - will be replaced automatically with currency iso code that was used to place an order
  9. {order_total_paid} - this will be replaced with order value


After save of this block, these variables will be replaced with values from order specification and conversion pixel will appear on order confirmation page properly. It will work as facebook suggest then.

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim