Shopify Pixel Tracking

Owned by Danny Wang
Last updated: Oct 07, 2024 by Andy Jiang
4 min read

Guide now updated for Shopify’s new Pixels and customer events method as of March 2024.

There are 2 methods to adding the preezie pixel into your Shopify store.

1. Using Additional scripts box

These instructions are for Shopify stores who can paste in code directly into your Additional scripts box in checkout settings (Shopify guide). If this box is uneditable/greyed out then go to option 2 below.

To add your preezie analytics pixel tracking to your Shopify Store follow the steps below:

  1. Go to your preezie CMS

  2. Navigate to Transaction pixel

    image-20240319-004235.png

  3. Choose Shopify - Additional scripts from the Select your CMS dropdown

     

  4. Hit the Copy button to copy the displayed code snippet

  5. Go to Shopify admin

  6. Navigate to Settings → Checkout

  7. Under Order Status Page (not 'Post-Purchase Page'), find the Additional scripts text box

  8. Paste in the preezie script code you copied, and ensure this statement is added above it:

{% if first_time_accessed %}

If there is already code in this box, your preezie code can be pasted as the last thing in this box - however ensure it still has {% if first_time_accessed %} above it!

It will something like this:

{% if first_time_accessed %}
<script>
!function (e, t, n, p, r, s) { e.prz || ((p = e.prz = function () { p.process ? p.process.apply(p, arguments) : p.queue.push(arguments) }).queue = [], p.t = +new Date, (r = t.createElement(n)).async = 1, r.src = "https://widget-cdn.preezie.com/production/prz_pixel.min.js?t=" + 864e5 * Math.ceil(new Date / 864e5), (s = t.getElementsByTagName(n)[0]).parentNode.insertBefore(r, s)) }(window, document, "script"),
prz("init", "PRE-12345");
</script>
<script>
prz("event", "transaction", {"products":[{% for line_item in checkout.line_items %} {"productId": "{{line_item.sku}}", "productName":"${encodeURIComponent("{{line_item.title}}")}", "quantity": {{line_item.quantity}}, "price": {{line_item.price}} }, {% endfor %} ]});
</script>
{% endif %}

9. Hit Save, you’re now ready to test it!

Note, this code uses the Shopify default variable definitions to udnerstand product information. More information can be found in this reference to line item Liquid objects: Liquid objects

  • If you are using custom checkout Liquid objects then make sure you update these in the script code, e.g. {{line_item.sku}}, {{line_item.title}}

  • Make sure your code is using your preezie Id not the example Id “PRE-12345“

How to test it

Follow these instructions to test: Testing your pixel

2. Using Custom pixels

These instructions are for Shopify stores that use Custom pixels (Shopify guide).

To add your preezie analytics pixel tracking to your Shopify Store follow the steps below:

  1. Go to your preezie CMS

  2. Navigate to Transaction pixel

  1. Choose Shopify - Custom pixel from the Select your CMS dropdown

  2. Hit the Copy button to copy the displayed code snippet

  3. Go to Shopify admin

  4. Navigate to Settings → Customer events

  5. Click Add custom pixel

  1. Give it a name of preezie pixel > Add pixel

  2. Now in the Code box paste in your copied code from the preezie CMS:

  1. Hit Save, then Connect and this is now live!

How to test it

Follow these instructions to test: Testing your pixel