Conversion Pixels

SPP comes with a dedicated Google Analytics integration which provides a reliable way to track your sales funnel and e-commerce metrics.

In this article you’ll learn how to set up other trackers including Facebook and Google Ads.

Let’s start with a quick overview first.

How Tracking Works

Most applications have one or two different tracking codes – a site-wide code that goes in the header of all your pages and a conversion code that should be loaded only when a conversion event happens.

Site-wide tracking code

To add any site-wide tracking scripts to your Client Portal’s header you can use the template editor in Settings → Templates.

From the left side open up your public/custom_scripts.html template. This is where you can paste the code that’s provided to you by the application.

Conversion tracking code

To track purchases you need to have a tracking code on the page that’s loaded after a successful payment. In SPP that is the clients/receipt.html template which is loaded at where ABCD is the invoice ID.

When editing this template put your code before the last {% endblock %} tag at the bottom of the page.

Some tracking codes can be customized with variables to pass the conversion value or transaction ID. See the Google Ads tracking code as an example of a conversion code that has values for transaction ID and amount. 

Facebook Tracking

Step 1: Paste the code that Facebook gives you into your public/custom_scripts.html template as seen here:

SPP facebook pixel code tracking custom_scripts template

Step 2: Open up your clients/receipt.html template and change the false to true on line 2, that is: {% set fb_events = true %}.

Inline image

Step 3: (optional). If you want to track AddToCart and InitiateCheckout triggers, copy this code into your public/custom_scripts.html file.

Here’s a list of events that will get triggered:

  • When somebody visits an order form that triggers a Page View

  • When they select a service (or one is already selected by default) that triggers an Add to Cart event

  • When they submit the order form that triggers a Checkout Started event

  • If the payment succeeds and they’re redirected to the receipt page, it triggers a Purchase event.

Step 1: Add the main site tag code to your public/custom_scripts.html template as seen here:

SPP google ads tracking script custom_scripts template

Step 2: Copy and paste this code to your clients/receipt.html template before the {% endblock %}.

Step 3. Update the code with your conversion ID.

Testing Tracking Pixels

Any ad blocker plugins you have installed in your browser may prevent the conversion pixel from firing. Be sure to turn them off while you’re testing your tracking codes.

You can use plugins like FB Pixel Helper and Google Tag Assistant to check your tags. Turn off live mode for your SPP and try placing a test order.