The Shopify Plugin can be implemented as follows:
Copy the Tracking script tag from your account, for example:
Go to your Shopify Store
Go to "Online Store → Themes → Customize Themes"
Go to "... → Edit code"
Paste the "Tracking script tag" into the <head> section in theme.liquid
Click on "Save".
By default, Shopify does not allow access to the checkout page. The only method for measuring this is via a Shopify Plus merchant and modifying the checkout page with our tracker code and/or custom GTM events. |
|
Navigate in your Shopify admin to Settings → Checkout and accounts
Scroll to Order status page add in “Additional scripts” below script (change your Squeezely ID on line 6):
<!-- Squeezely purchase event --> <script type="text/javascript"> (function(s,q,z,l,y){s._sqzl=s._sqzl||[];l=q.createElement('script'), y=q.getElementsByTagName('script')[0];l.async=1;l.type='text/javascript'; l.defer=true;l.src=z;y.parentNode.insertBefore(l,y)}) (window,document,'https://squeezely.tech/tracker/SQ-2565XXX/sqzl.js'); let sqCurrency; if (typeof Shopify !== 'undefined') { sqCurrency = Shopify.currency.active; } window._sqzl = window._sqzl || []; {% if order.id|json %} window._sqzl.push({ "event" : "Purchase", {% if customer %} "firstname" : {{ customer.first_name|json }}, "lastname" : {{ customer.last_name|json }}, {% for customer in customer.addresses %} "postcode" : {{ customer.zip|json }}, "city" : {{ customer.city|json }}, "country" : {{ customer.country_code|json }}, {% endfor %} {% if customer.phone != null %} "phone" : {{ customer.phone|json }}, {% endif %} "email" : {{ customer.email|json }}, {% if customer.accepts_marketing == true %} "newsletter" : "yes", {% endif %} {% endif %} "orderid" : {{ order.id|json }}, "currency": sqCurrency, "products": [ {% for line_item in line_items %} { "id": {{ line_item.sku|json }}, "name": {{ line_item.title|json }}, "price": {{ line_item.product.price|money_without_currency|replace: ',', '.' }}, "quantity": {{ line_item.quantity }}, }, {% endfor %} ], }); {% elsif customer %} window._sqzl.push({ "event" : "PrePurchase", "firstname" : {{ customer.first_name|json }}, "lastname" : {{ customer.last_name|json }}, {% for customer in customer.addresses %} "postcode" : {{ customer.zip|json }}, "city" : {{ customer.city|json }}, "country" : {{ customer.country_code|json }}, {% endfor %} {% if customer.phone != null %} "phone" : {{ customer.phone|json }}, {% endif %} "email" : {{ customer.email|json }}, {% if customer.accepts_marketing == true %} "newsletter" : "yes" {% endif %} }); {% else %} console.log("No Squeezely purchase sent due to missing order information"); {% endif %} </script> <!-- End of Squeezely purchase event --> |
If you want to use shopify privacy consent, you will need to make sure squeezely is loaded after someone presses the accept button on your cookie banner.
Here’s an example code snippet on how to do that.
<script> document.addEventListener('trackingConsentAccepted', () => { loadSqueezely(); }); </script> |
The loadSqueezely function name corresponds to the funtion name in step 1.
Copy your account's webhook, for example:
Go to your Shopify Store
Go to "Settings → Notifications"
Scroll to the bottom of the page and click "Create Webhook"
Create the following three webhooks, in JSON Format and With latest webhook API version:
Order Creation
Customer Create
Customer Update
Checkout Creation
With some webhooks, you need to add a parameter to the URL. Please look at the instructions in the Shopify app in Squeezely. |
After adding the Webhooks in Shopify, you have generated a webhook signature (highlighted in yellow), for example:
Copy this webhook signature
Enter your Shopify Shop Url
Paste the webhook signature
Click on "Save Channel"
Go to "Online Store → Themes → Actions → Edit code"
Create a new template with name: page.squeezely-product-feed
Add the code below and save:
Missing products? |
{%- layout none -%}<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0"> <channel> <title>{{shop.name | escape_once }} Squeezely Feed</title> <link>{{shop.url}}</link> {% assign cnt = 0 %} {% for product in collections.all.products %} {% for variant in product.variants %} {% assign cnt = cnt | plus: 1 %} <!-- Item #{{ cnt }} --> <item> <id>{{variant.sku}}</id> <external_object_id>{{variant.id}}</external_object_id> <condition>new</condition> <description>{{ product.description | strip_html | strip_newlines | escape_once }}</description> <link>{{shop.url}}{{variant.url}}</link> <currency>{{shop.currency}}</currency> <price>{{variant.price | divided_by: 100.00 }}</price> <inventory>{{ variant.inventory_quantity }}</inventory> <brand>{{product.vendor | escape_once }}</brand> <parent_id>{{ product.id }}</parent_id> {% if variant.title == 'Default Title' %} <title>{{ product.title | strip_html | strip_newlines | escape_once }}</title> {% else %} <title>{{ product.title | strip_html | strip_newlines | escape_once }} {{ variant.title | strip_html | strip_newlines | escape_once }}</title> {% endif %} <image_links> {% for image in product.images %} <image_link>https:{{ image | image_url}}</image_link> {% endfor %} </image_links> <category_ids> {% for collection in product.collections %} <category_id>{{ collection.id }}</category_id> {% endfor %} </category_ids> <availability>{% if variant.inventory_quantity > 0 %}in stock{% else %}out of stock{% endif %}</availability> {% if product.options_with_values.size > 0 -%} {% for optionobj in product.options_with_values -%} {% assign optionname = 'option' | append: optionobj.position %} {% if optionobj.name == 'size' or optionobj.name == 'Size' %} {% if variant[optionname] %} <size>{{ variant[optionname] }}</size> {% endif %} {% endif %} {% if optionobj.name == 'color' or optionobj.name == 'Color' %} {% if variant[optionname] %} <color>{{ variant[optionname] }}</color> {% endif %} {% endif %} {%- endfor %} {%- endif %} </item> {% endfor %} {% endfor %} {% assign cnt = 0 %} <categories> {% for collection in collections %} <category> <id>{{ collection.id }}</id> <title>{{ collection.title | strip_html | strip_newlines | escape_once }}</title> <description>{{ collection.description | strip_html | strip_newlines | escape_once }}</description> <link>{{shop.url}}{{ collection.url }}</link> </category> {% endfor %} </categories> </channel> </rss> |
4. Go to "Online store → Pages → Add Page"
5. Enter in"Title": squeezely-product-feed. Use the Theme template 'squeezely-product-feed':
Make sure the url is created as: https://yourwebsite.com/pages/squeezely-product-feed
6. Click on "Save"
7. Check that the url is created as: https://yourwebsite.com/pages/squeezely-product-feed
After going through all the steps above, the installation is complete.