Installing Shopify Plugin (EN)

Owned by vTranslator
Last updated: Aug 24, 2023 by Miranda Blom
13 min read

The Shopify Plugin can be implemented as follows:

Add tracking

Step 1: Add tracking code in theme

  1. Go to https://app.squeezely.tech/company/channels/shopify

  2. Copy the Tracking script tag from your account, for example:

  3. Go to your Shopify Store

  4. Go to "Online Store → Themes → Customize Themes"

  5. Go to "... → Edit code"

  6. Paste the "Tracking script tag" into the <head> section in theme.liquid

  7. 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.

 

This is only required when you are unable to follow step 1 or when this step does not add the tracker code as expected.

  1. Go to "Online Store → Themes → Preferences".

  2. Scroll to "Google Analytics" and add the following snippet to the "Add custom JavaScript to Google Analytics" box:

    /* START SQUEEZELY TRACKING */ /* Please note we're using Shopify Privacy Consent. If you use this, please hook us into your cookiebanner. */ function loadSqueezely() { if (!window.Shopify.customerPrivacy || window.Shopify.customerPrivacy.userCanBeTracked()) { var sqzlScript = document.createElement("script"); sqzlScript.src = 'https://app.squeezely.tech/assets/js/channels/SqueezelyShopifyTracker.js?SqueezelyIdentifier=YOUR SQ ACCOUNT ID'; sqzlScript.async = 1; if(document.body && typeof document.body.appendChild === 'function') { document.body.appendChild(sqzlScript); } else if(document.head && typeof document.head.appendChild === 'function') { document.head.appendChild(sqzlScript) } else { document.lastChild.appendChild(sqzlScript); } } } loadSqueezely(); /* END SQUEEZELY TRACKING */

  3. Replace YOUR SQ ACCOUNT ID with your Account ID, found at https://app.squeezely.tech/company/settings

  4. Click "Save"

Step 2: Add code on thank you page

  1. Navigate in your Shopify admin to Settings → Checkout and accounts

  2. 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 -->

Using Shopify Privacy Consent:

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.

Add webhooks

  1. Go to https://app.squeezely.tech/company/channels/shopify

  2. Copy your account's webhook, for example:

  3. Go to your Shopify Store

  4. Go to "Settings → Notifications"

  5. Scroll to the bottom of the page and click "Create Webhook"

  6. Create the following three webhooks, in JSON Format and With latest webhook API version:

    1. Order Creation

    2. Customer Create

    3. Customer Update

    4. 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.

Save Squeezely settings

  1. After adding the Webhooks in Shopify, you have generated a webhook signature (highlighted in yellow), for example:

  2. Copy this webhook signature

  3. Go to https://app.squeezely.tech/company/channels/shopify

  4. Enter your Shopify Shop Url

  5. Paste the webhook signature

  6. Click on "Save Channel"

Add product link

  1. Go to "Online Store → Themes → Actions → Edit code"

  2. Create a new template with name: page.squeezely-product-feed

  3. Add the code below and save:

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

Installation completed

After going through all the steps above, the installation is complete.