FB pixel - conversion tracking tutorial

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"
    /></noscript>

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"
    /></noscript>

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
   
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"
               /></noscript>
           

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.