Add conversion tracking to your order status page

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

You can track when your customers visit your checkout and how often they make a purchase using conversion tracking. There are a few different platforms available that will allow you to access this data.

Google Analytics conversion tracking

We recommend using Google Analytics conversion tracking for your checkout. To implement this on your store, follow this link:

Google Analytics Goals and Funnels ›

Tracking Pixels

You can add tracking pixels to your order status page using the Additional Content & Scripts box.

Tracking Orders

Conversion tracking codes, such as a tracking pixel, can be added to your store to track customers purchasing from your store. Tracking codes typically are used on the order status page, which is the page that confirms the customer has successfully placed an order.

Tracking scripts are provided by a third-party, and are used as a snippet of code in your store Admin.

To install a tracking code

  1. After you have your tracking code, copy it to your clipboard with cmd + c on a Mac or ctrl + c on a PC.

  2. From your Shopify admin, click Settings, and then click Checkout.

  3. In the Order processing section, find the Additional scripts text box:

    Additional content 1

  4. Paste your tracking code from your clipboard with cmd + v on a Mac or ctrl + v on a PC.

In that text box, you are able to use the shop liquid object, the order liquid object, and the order status JavaScript asset.

Tip

Customers might return to the order status page multiple times which will skew your conversion analytics. You might want to run scripts on the first visit only.

Conditional Integration

Some providers ask you to only show their tracking pixels if the customer came with a certain reference parameter ( usually ref, source or r ).

Shopify stores these values with the orders and makes them available using landing_site_ref.

For example, your affiliate provider wants you to include their pixel in the checkout, but only for customers that come through their referrals.

The URL you register with your tracking system would look like this:

http://www.example.com/?ref=tracking-site

The ?ref=tracking-site must be something unique.

It would be used it on the last page of the checkout to verify that a given order came by someone referred by your affiliate.

To set up conditional integration:

  1. Go to your Checkout settings page and add the affiliate script.
{% if landing_site_ref == 'tracking-site' %}
<img src="https://www.trackingx.com/pixel.gif?amount={{ total_price | money_without_currency }}&amp;order-id={{ order_number }}&amp;currency={{ shop.currency }}" height="1" width="1" />
{% endif %}

Because of the {{ % if landing_site_ref == 'tracking-site' % }} statement, the pixel will only be displayed to customers with the correct landing_site_ref.

Examples

Basic conversion tracking:

If your third-party asks you to integrate a tracking pixel like this:

<img src="https://www.tracking.com/u?amount=<AMOUNT>&amp;order-id=<ORDER_ID>&amp;currency=<CURRENCY>" height="1" width="20" />

Looking at the above example we know that you need:

  • Full money amount of order, probably in dollars : {{ total_price | money_without_currency }}

  • A unique order id. order_number will print out the name of the order such as #2322 without the hash character which will suit your purposes: {{ order_number }}

  • Your shop's currency. You can either hardcode this or use {{ shop.currency }}

  • Replace the placeholders with actual liquid tags:

<img src="https://www.tracking.com/pixel.gif?amount={{ total_price | money_without_currency }}&amp;order-id={{ order_number }}&amp;currency={{ shop.currency }}" height="1" width="1" />

When customers reach the last page of the checkout, the code that will actually be delivered to the browser looks like this:

<img src="https://www.tracking.com/pixel.gif?amount=55.34&amp;order-id=4343&amp;currency=USD" height="1" width="1" />

Conversion tracking that describes the order:

<img src="https://www.emjcd.com/u?CID=YOURCID&amp;TYPE=YOURTYPE&amp;METHOD=IMG&amp;CURRENCY={{ shop.currency }}&amp;OID={{ order_number }}{% for line_item in line_items %}&amp;ITEM{{ forloop.index }}={{ line_item.sku }}&amp;AMT{{ forloop.index }}={{ line_item.line_price | money_without_currency }}&amp;QTY{{ forloop.index }}={{ line_item.quantity }}{% endfor %}" height="1" width="20" />

Facebook Pixel

There are two different methods for adding Facebook Pixel tracking to your store.

Tip

The two methods to add Facebook Pixel tracking do not work together. Please choose one or the other.

You can integrate your store and Facebook Pixel in your admin without using any code. You need your Facebook Pixel ID.

You can add the code manually to each page of your store and to your checkout. You need to know about working with code for this to work properly.

Want to discuss this page?

Visit the Shopify Community