Setting Up Facebook Pixel Tracking

Last modified October 5, 2018

This article applies to Contextual Commerce. (Looking for Classic Commerce documentation?)

This article provides instructions to set up Facebook Pixel Tracking on your FastSpring Store. This will affect all Storefronts, including Web Storefronts and Popup Storefronts.

Note

Before beginning this process, ensure that you have the Facebook Pixel Tracking code provided to you by Facebook.

Note

Facebook Pixel Tracking only fires on the completion page of your Storefronts. Page views and purchase data will not be reported for visits that do not result in a purchase, because the completion page must be displayed in order for the Facebook pixel tracking code to fire.
  1. Log on to Dashboard and select the Integrations menu.

    Integrations menu

  2. Click the Webhooks tab.

    Webhooks tab

  3. Click ADD WEBHOOK. The Add Webhook dialog will pop up.
  4. In the Title field, enter Facebook Tracking Pixel.

    Enter a Title

  5. In the Get webhooks from field, click the drop-down selector and choose whether you want the Facebook Tracking Pixel to fire for Live and Test Orders, or only for Live Orders.

    Choose to receive Live and Test Orders or just Live Orders

  6. Click ADD.  The new webhook will be created.
  7. In the newly created Facebook Tracking Pixel webhook, click ADD BROWSER SCRIPT.



  8. Optionally, enter a Name for the browser script (e.g. Facebook Tracking Pixel).



  9. In the Events field, select browser.order.completed.

    Select browser.order.completed

  10. In the Function field, replace /* Your Code Here */ with the tracking code you have received from Facebook.

    Note

    The code shown in the illustration above is only an example. If you do not paste in the code you have received from Facebook, pixel tracking will not work correctly.
  11. Still in the Function field, edit the tracking code.
    1. Delete the <script> and </script> tags.
    2. Delete the comments <!-- Facebook Pixel Code --> and <!-- End Facebook Pixel Code -->.
    3. Remove everything from <noscript> to </noscript>, including those tags.
    4. Optional:  If you want to track purchases, add a new line immediately after fbq('track', "PageView"); and then copy and paste the following on the new line:

      fbq('track', 'Purchase', {'value': event.data.subtotal, 'currency': event.data.currency});

       Click here for an example of the revised function

      Important

      The code shown below is only an example. If you do not begin with the code you have received from Facebook and follow the instructions above, pixel tracking will not work correctly.
      function(event) {
      
      
      !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', '1262415707141961'); 
      fbq('track', "PageView");
      fbq('track', 'Purchase', {'value': event.data.subtotal, 'currency': event.data.currency});
      
      
      }
  12. Click ADD to save your changes.

Tip

For users of Google Chrome, Facebook offers a convenient tool called Facebook Pixel Helper, which may be helpful in testing and validating your implementation. You can download the Chrome plugin for free at https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?utm_source=chrome-app-launcher-info-dialog.