Shopify Pixel Tracking
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:
Go to your preezie CMS
Navigate to Transaction pixel
Choose Shopify from the Select your CMS dropdown
Hit the Copy button to copy the displayed code snippet
Go to Shopify admin
Navigate to Settings → Checkout
Under Order Status Page (not 'Post-Purchase Page'), find the Additional scripts text box
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://preeziecdn.azureedge.net/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:
Go to your preezie CMS
Navigate to Transaction pixel
Choose Shopify from the Select your CMS dropdown
Hit the Copy button to copy the displayed code snippet
Go to Shopify admin
Navigate to Settings → Customer events
Click Add custom pixel
Give it a name of preezie pixel > Add pixel
Now in the Code box paste in your copied code from the preezie CMS. This can replace anything already in that box. It will look like this:
Now delete all of these parts from the code:
{% if first_time_accessed %}<script></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 %}
You will be left with this part only:
!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://pub-1617bd8b30144648b4c52fa2477d8eaf.r2.dev/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");
Now underneath this paste in this code exactly as is:
analytics.subscribe("checkout_completed", event => { const products = event.data.checkout.lineItems.map((product) => ({ productId: product.id, productName: encodeURIComponent(product.title), quantity: product.quantity, price: product.variant.price.amount })) prz("event", "transaction", {"products": ${JSON.stringify(products)}})});
You will have the complete code now ready to publish:
Hit Save, then Connect and this is now live!
How to test it
Follow these instructions to test: Testing your pixel