Tracking Setup: Shopify

  • Updated

In this article we explain how to set up Distil Tracking in your Shopify store.

While we recommend installing our Shopify app as this will simplify the process of installing Tracking, if you don't have the app you can still set up Distil Tracking in your Shopify store, read on for instructions.

For more information about the app, read our article introducing the Distil: AI Business Analytics Shopify app. If you haven't already installed the app, we recommend that you follow our step-by-step guide.

While the Distil Shopify app will give you some great insights even without Tracking, to get full value from Distil we strongly recommend following the steps below to install Tracking in your Shopify store.

There are two tasks to complete in order to fully implement Distil Tracking in your Shopify store:

  1. Install Main Tracking
      • This task installs Tracking on every page in your Shopify store, except for checkout.
  2. Install Order Tracking
      • This task completes the install by adding Tracking of orders.

If you don't have the Shopify app then you can complete the first task by following our manual installation instructions below. You will still need to complete the second task above to activate order tracking.

Install Main Tracking

With the Shopify app

Once you have the app installed, you will need to wait for your first Wednesday Daily Insight card in order to install Distil's main Tracking events in your store. So, if you installed the app on the Monday, you will need to wait until Wednesday to install tracking. If you have missed your first Wednesday, you can page back through the days using the back arrow to the left of the date.

The prompt to install Distil Tracking is only visible from within the Shopify app (the prompt is not included in the Daily Insight cards displayed within Distil). So, first log into your Shopify store and navigate to Apps > Distil: AI Business Analytics.

If it's not Wednesday, use the back arrow to page backwards to your first Wednesday. The Wednesday Daily Insight card includes a big green Setup Now... button. Click or tap the button.

Follow the on-screen instructions to copy your unique Distil ID.

Navigate to the Store Configuration page in your Shopify store. There is a helpful clickable link in the instructions which will take you the right page in your Shopify settings: Open your Store Configuration in a new tab.

Once you are in Store Configuration, make sure that the Tracking Block slider is on, and paste your Distil unique ID into the trackingid field (replacing the helpful text: replace-with-tracking-id). Click the Save button on the top right.

Once you've done this, return to the Distil app and verify that the install was successful by clicking the Run verification button. Once the verification has run successfully, click the Continue button.

That's it! Next, install order Tracking by following the instructions below. 

Without the Shopify app

While we recommend installing our Shopify app as this will simplify the process of installing Tracking, if you don't have the app you can still set up Distil Tracking in your Shopify store.

If you have the Distil Shopify app installed, then you can use the instructions above instead of the ones below (it's much simpler).

As a first step you will need to make note of the unique ID for your Distil Account. To find this, log into Distil and navigate to Settings > Tracking > JS Bespoke. Your ID is the 32-character value included in the code snippet.

 

Next log into your Shopify store, and follow these steps:

  1. Navigate to Online Store > Themes.

  2. Click the three dots "..." (next to the Customize button) and then Edit code.

  3. Select the file theme.liquid from the list on the left.
  4. In the HTML editor on the right, scroll down to the bottom of the <head> section (hit enter to insert a line above the </head> marker).
  5. Copy the code below and paste it into the HTML editor just above the </head> marker.
  6. Replace the YourTrackingID placeholder text (highlighted in blue below) with the 32-character unique ID you copied in the first step above.
<!-- START DISTIL TRACKING -->
<script type="text/javascript">
  (function(){var distil=window.distil=window.distil||[];if(distil.initialize)return;if(distil.invoked){if(window.console&&console.error){console.error("Distil snippet included twice.")}return}distil.invoked=true;distil.methods=["identifyCustomer","trackEvent","trackOrder","trackContent","trackProduct","trackPage","trackPageView"];distil.factory=function(method){return function(){var args=Array.prototype.slice.call(arguments);args.unshift(method);distil.push(args);return distil}};for(var i=0;i<distil.methods.length;i++){var key=distil.methods[i];distil[key]=distil.factory(key)}distil.load=function(key,options){var script=document.createElement("script");script.type="text/javascript";script.async=true;script.src="https://engagement.distil.ai/src/distil-latest.min.js";var first=document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script,first);distil._loadOptions=options||{};distil._loadOptions.distilAccountId=key;distil.trackPage()};distil.SNIPPET_VERSION="1.3.2";
      distil.load("YourTrackingID")
  })();
</script>
{% if customer %}
    <script>
      var customerProperties = {
        CustomerId: "{{ customer.id }}",
        EmailAddress: "{{ customer.email }}",
        FirstName: "{{ customer.first_name }}",
        LastName: "{{ customer.last_name }}",
        GDPRStatus: {
          MarketingSubscribed: {% if customer.accepts_marketing == true %}true{% else %}false{% endif %},
        },
      {% if customer.default_address %}
          PostalAddress: {
            Line1: "{{ customer.default_address.address1 }}",
            Line2: "{{ customer.default_address.address2 }}",
            Town: "{{ customer.default_address.city }}",
            Region: "{{ customer.default_address.province }}",
            Country: "{{ customer.default_address.country }}",
            Postcode: "{{ customer.default_address.zip }}"
          }
      {% endif %}
      };
    </script>
  {% endif %}    
  {% if template contains 'customers' and customer %}    
      <script>        
        distil.identifyCustomer(customerProperties);
      </script>    
   {% endif %}  
{% if product and product.selected_or_first_available_variant %}
    <script>                
      var productProperties = {
        ProductId: "{{ product.selected_or_first_available_variant.id }}",
        ParentProductId: "{{ product.id }}",
        Name: "{{product.title}} | {{ product.selected_or_first_available_variant.title }}"        
      };
      distil.trackProduct(productProperties{% if customer %}, customerProperties{% endif %});
    </script>
  {% endif %}
  {% if article %}
    <script>
      var articleProperties = {
        ContentId: "{{ article.id }}",
        Precis: "{{ article.content | strip_html | strip_newlines | replace: '“', '' | replace: '”', '' }}",
        Title: "{{ article.title }}",
        Author: "{{ article.author }}",
        KeyWords: "{{ article.tags | join: "," }}",
        ContentType: "Article",
        FullImageUrl: "{{ article.image | img_url }}",
        PublicUrl: "{{ shop.url }}{{ article.url }}",
        PublishedOnUTC: "{{ article.published_at | date: '%Y-%m-%d %H:%M:%S' }}"
      };
      distil.trackContent(articleProperties{% if customer %}, customerProperties{% endif %});
    </script>   
  {% elsif page.id  %}
    <script>
      var pageProperties = {
        ContentId: "{{ page.id }}",
        Precis: "{{ page.content | strip_html | strip_newlines | replace: '“', '' | replace: '”', '' }}",
        Title: "{{ page.title }}",
        ContentType: "Page",
        PublicUrl: "{{ shop.url }}{{ page.url }}",
        Author: "{{ page.author }}",
        PublishedOnUTC: "{{ page.published_at | date: '%Y-%m-%d %H:%M:%S' }}"
      };
      distil.trackContent(pageProperties{% if customer %}, customerProperties{% endif %});
    </script>
  {% endif %}
<!-- END DISTIL TRACKING -->
 

Install Order Tracking

In Shopify (and most other ecommerce stores) the order processing pages are separated from the product and other pages because of the complex back-and-forth process of payment and confirmation. For this reason, installing the main Distil tracking code as described above will not result in order tracking.

The good news is that installing order tracking is fairly straightforward and does not require any technical skills beyond following some simple instructions and copying and pasting text.

As a first step you will need to make note of the unique ID for your Distil Account. To find this, log into Distil and navigate to Settings > Tracking > JS Bespoke. Your ID is the 32-character value included in the code snippet.

 

Next log into your Shopify store, and follow these steps:

  1. Navigate to Settings > Checkout.

  2. Scroll down until you come to the Order status page section: additional_scripts.jpg

  3. Copy the code below and paste it into the Additional scripts text box (scroll down and paste underneath any existing text).
  4. Replace the YourTrackingID placeholder text (highlighted in blue below) with the 32-character unique ID you copied in the first step above.
  5. Click Save on the bottom right
<!-- Start distil tracking -->
<script type="text/javascript">
(function(){var distil=window.distil=window.distil||[];if(distil.initialize)return;if(distil.invoked){if(window.console&&console.error){console.error("Distil snippet included twice.")}return}distil.invoked=true;distil.methods=["identifyCustomer","trackEvent","trackOrder","trackContent","trackProduct","trackPage","trackPageView"];distil.factory=function(method){return function(){var args=Array.prototype.slice.call(arguments);args.unshift(method);distil.push(args);return distil}};for(var i=0;i<distil.methods.length;i++){var key=distil.methods[i];distil[key]=distil.factory(key)}distil.load=function(key,options){var script=document.createElement("script");script.type="text/javascript";script.async=true;script.src="https://engagement.distil.ai/src/distil-latest.min.js";var first=document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script,first);distil._loadOptions=options||{};distil._loadOptions.distilAccountId=key;distil.trackPage()};distil.SNIPPET_VERSION="1.3.2";
distil.load("YourTrackingID")
})();
</script>

<script>
var customerProperties = {
CustomerId: "{{ customer.id }}",
EmailAddress: "{{ customer.email }}",
FirstName: "{{ customer.first_name }}",
LastName: "{{ customer.last_name }}",
GDPRStatus: {
MarketingSubscribed: {% if customer.accepts_marketing == true %}true{% else %}false{% endif %}
}
};
var orderProperties = {
OrderId: "{{ order.id }}",
OrderLineItems: [
{% for line_item in order.line_items %}
{
OrderExternalId: "{{ order.id }}",
OrderLineItemId: "{{ line_item.id }}",
ProductId: "{{ line_item.variant_id }}",
ParentProductId: "{{ line_item.product_id }}"
},
{% endfor %}
]
};
distil.trackOrder(orderProperties, customerProperties);
</script>
<!-- End distil tracking -->

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.

Still have questions?

Contact us