Shopify Installation

You can follow our in-app prompts to install Shopify on your website. Prior to installation, review the identity information below to choose the identifier for your installation.

Identity

Identities in Heap should always be globally unique for each unique user so you can track user activity across sites and platforms. When a user is identified, their past sessions and event activity from when they were anonymous are now tied to that identity. This allows the user to use multiple devices/browsers to access your website with a single identity.

Heap uses Shopify liquid variables to call the identify API, like this: {{ customer.email }}.

You can identify Shopify customers in Heap via their Shopify Customer ID or email. The Shopify Customer ID is the unique ID that Shopify assigns to each unique customer that shops in your store. You can learn more about this in Shopify's dev docs.

Here are some important considerations when choosing your identifier for Shopify:

  • If you have customers who check out with something besides email, such as if they signed up via their phone number, then you should use Shopify Customer ID as your identifier.
  • If you have multiple Shopify stores, and you want to analyze user activity across different stores, you should use email as your identifier. This allows you to track activity across your Shopify stores.
  • If you have a Shopify site and other sites not hosted by Shopify, you should use email as your identifier. This allows you to track user activity across different stores.

For an in-depth explanation of identity along with examples, see the Using Identify guide.

Multiple Shopify Stores

If you want to install Heap for multiple Shopify stores for cross-site tracking, reach out to [email protected].

Installation

To install Heap via Shopify, select Shopify as the installation method.

To collect additional types of data, such as the customer's name or the total amount they spent, by adding them into the theme.liquid page via Heap's addUserProperties API. You can add as many calls as you want to this snippet.

Shopify Plus

To capture interactions during checkout, you must have permission to edit the checkout.liquid file, which is only available for Shopify Plus customers. Contact Shopify support about enabling checkout.liquid to add the Heap snippet to this layout file.

Once you have edit access, add one of the following two snippets to your checkout.liquid template depending on which identifier you chose per the considerations above.

<script type="text/javascript">
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
    heap.load("YOUR_APP_ID");
    var customerId = '{{ customer.id }}';
    var customerEmail = '{{ customer.email }}' || '{{ checkout.email }}';
    heap.identify(customerEmail);
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
</script>
<script type="text/javascript">
    window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
    heap.load("YOUR_APP_ID");
    var customerId = '{{ customer.id }}';
    var customerEmail = '{{ customer.email }}' || '{{ checkout.email }}';
    heap.identify(customerId);
    heap.addUserProperties({'Name': '{{ customer.name }}','email': customerEmail,'CustomerID':'{{ customer.id }}','TotalSpent':'{{ customer.total_spent }}'});   
</script>

🚧

It may take up to 24 hours for data to sync from Shopify to Heap.

Tracking Checkouts

If you are using Shopify’s domain and your site uses SSL, you can embed an iframe on the thank you page to track how many people are completing their purchase.

  1. Starting at your Shopify admin, click Settings, and then Checkout.

  2. Scroll down to the Order processing section and select Additional content & scripts.

  3. Insert the following code. It will vary based on your site, but the iframe should look something like this:

<iframe src="https://your_site_url.com/store?thank-you" style="display: none"></iframe>
  1. In Heap, create a View page event and add a filter for query contains thank-you.

You’re ready to check out how many users are purchasing items from your site! For more help customizing your Shopify page, visit Shopify’s documentation.

📘

For customers using ReCharge Apps app with Shopify

Subscriptions by ReCharge is a popular eCommerce app that integrates with Shopify. To successfully track the entire customer journey across both Shopify checkout and ReCharge checkout, contact ReCharge support for assistance setting up ReCharge on your own domain. If you have any questions, feel free to contact [email protected]!