How to Setup Facebook Conversion Tracking with Shopp

by Lorenzo Orlando Caum on April 5, 2013

In this post we’ll take a look at getting Shopp running with Facebook conversion tracking. This works by using a conversion pixel which fires after a successful checkout on the Shopp thanks page.

You’ll need an FTP client to complete this tutorial. We recommend the Transmit FTP client which is available for the Mac. If you aren’t using a Mac, then try FileZilla is an alternative option.

Here is an example of what the code snippet for Facebook’s conversion pixel:

<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = '1234567890123';
fb_param.value = '0.00';
(function(){
 var fpw = document.createElement('script');
 fpw.async = true;
 fpw.src = '//connect.facebook.net/en_US/fp.js';
 var ref = document.getElementsByTagName('script')[0];
 ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=1234567890123&value=0" /></noscript>

When it runs, it will tell Facebook that an event has occurred for a certain amount. Note that the value “1234567890123″ is an example and not a real value. The same applies for “0.00.”

We’ll need to wrap this script in a function that runs only after checkout has completed and a customer has arrived on the thanks page.

Add the JavaScript Code to the Functions.php file

1) Login to the site with your FTP client. We recommend Transmit (for Mac).

2) Then go to your theme folder and locate the functions.php file. This is generally wp-content/themes/yourthemefolder/

3) Open the functions.php file

4) Copy the revised coding below:

function add_facebookconversionpixel() {
 if (function_exists('is_shopp_page') & is_thanks_page()) {
 ?>
 <script type="text/javascript">
 var fb_param = {};
 fb_param.pixel_id = '1234567890123';
 fb_param.value = '<?php echo floatvalue(shopp('purchase.get-total')); ?>';
 (function(){
 var fpw = document.createElement('script');
 fpw.async = true;
 fpw.src = '//connect.facebook.net/en_US/fp.js';
 var ref = document.getElementsByTagName('script')[0];
 ref.parentNode.insertBefore(fpw, ref);
 })();
 </script>
 <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=1234567890123&value=<?php echo floatvalue(shopp('purchase.get-total')); ?>" /></noscript>
</script>
<?php 
}
}
add_action('wp_footer', 'add_facebookconversionpixel');

5) Next, you’ll need to change the value of “1234567890123″ to your actual pixel id.

6) Save changes to your functions.php file.

Now return to your store and run a test by purchasing an item from your store. Shortly afterwards, you should see the information reported in your Facebook Ads Manager.

Notes: View the documentation for Facebook conversion tracking. You can retrieve the order subtotal by using purchase.get-subtotal instead of purchase.get-total.

Related Posts Plugin for WordPress, Blogger...
  • Was this post helpful to you?
    Join our newsletter to receive updates!
  • Author: Lorenzo Orlando Caum

    Lorenzo Orlando Caum is the founder of Enzo12 LLC, a web engineering firm in Tampa, FL.

    Lorenzo contributes to the Shopp project as a member of the support team. He has written several WordPress extensions for Shopp.

    If you would like to know more about Lorenzo, you can follow @lorenzocaum on Twitter or check out his blog.

    Previous post:

    Next post: