Adding a Facebook conversion tracking pixel to the Checkout Complete page

PRESSERO > *Pressero FAQs
Facebook's conversion tracking requires that you install a Facebook pixel on every page in your site, and one that is only on the order confirmation (or checkout complete/successful) page. You can add the Facebook-provided code for both of these items in Site > Settings for your B2C site.
 
Here is an example of the Facebook code:
<!-- Facebook Pixel Code -->
<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', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
 

Single PageView Pixel

For a single PageView pixel that goes on every page, always the same, go to the SEO/HTML tab and paste the code into the Edit HTML Head Content area.
 

Single Purchase Pixel

For a single Purchase pixel that needs to appear only on the order confirmation page, go to the Instructions tab. In the Checkout Successful Page Instructions area, click the "</>" button to open the HTML editor. Paste the Facebook-provided code into that editor; then click Update.
 

PageView and Purchase Pixel Combination

If you need the PageView pixel on all pages but a Purchase type on the Checkout Successful page, then you will need to add code to two areas in your sites settings area. The first block of code will go into the HTML Head Content area of you site. Admin > Site > Settings > SEO/HTML > Edit HTML Head content.
 
Please replace the 'your-pixel-id-goes-here' text with the pixel id given to you by Facebook
 
<!-- Facebook Pixel Code -->
<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', 'your-pixel-id-goes-here');

</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
 
This next section of code should be pasted into the shared script area. Admin > Site > Settings > SEO/HTML > Edit Share Script Area. No edits to this code are necessary.
<!-- Facebook Pixel Code -->
<script>
if (location.pathname.match("^/complete/")) {
    fbq('track', 'Purchase', {value: parseFloat($(".summaryTotal span").text().replace(/\$/g, '')) , currency:'USD'});
  } else {
    fbq('track', "PageView");
  }
</script>
<!-- End Facebook Pixel Code -->
The above code is almost exactly the same as what is given to you by Facebook but we need to change the JavaScript so a particular function is fired depending on page type. The code added above does just this. It looks at the url of the page and if it has /complete then the code will fire purchase tracking, in all other cases it will fire page view tracking.
 
 
For testing your code you can download the Chrome extension from Facebook that will check your code and give you an indication of the data sent to Facebook. https://developers.facebook.com/docs/facebook-pixel/support/pixel-helper
 
Any further adjustments or additions to functionality to the Facebook pixel code will not be supported by Pressero. Please consult the Facebook pixel documentation or use their support services.