Shopify provides access to add HTML and JavaScript to your shop’s themes and to add conversion tracking upon successful checkout. Let’s use that ability to add Kissmetrics tracking to important e-Commerce activity.

Use a Native Shopify Application

We partner with a Shopify application to make installation easy. This application will track all of your important events and properties surrounding the checkout process, as well as making sure users' identities are maintained as they move from your site to Shopify's site (an advanced manual procedure).

Our partner provides the support specifically for this application, hence the monthly cost.

Get the integration at https://apps.shopify.com/kissmetrics.

Here is a comprehensive list of the Events and Properties that you will track through this application:

EVENTS

  • Added to Cart
  • Billed
  • Canceled Product
  • Continued purchase - billing address
  • Continued purchase - shipping address
  • Continued purchase - shipping lines
  • Customer Created
  • Order canceled
  • Purchased
  • Purchased Product
  • Returned Product
  • Removed from cart
  • Refunded
  • Started purchase
  • Viewed potential purchase

PROPERTIES

  • Abandoned cart url
  • Accepts Marketing
  • Added product name
  • Added product price
  • Added product quantity
  • Added product sku
  • Added product variant
  • Billing address
  • Canceled product id
  • Canceled product name
  • Canceled product price
  • Canceled product quantity
  • Canceled product sku
  • Canceled product variant
  • Customer ID
  • Discount codes
  • Email
  • First Name
  • Last Name
  • Landing Site
  • Order number
  • Order subtotal
  • Order total
  • Purchased product id
  • Purchased product name
  • Purchased product price
  • Purchased product quantity
  • Purchased product sku
  • Purchased product variant
  • Product quantity
  • Product url
  • Product viewed
  • Referring Site
  • Removed product quantity
  • Removed product sku
  • Removed product variant
  • Returned product id
  • Returned product name
  • Returned product price
  • Returned product quantity
  • Returned product sku
  • Refund amount
  • Refund reason
  • Removed product name
  • Removed product price
  • Removed product quantity
  • Revenue
  • Shipping address
  • Shipping code
  • Shipping name
  • Shipping price
  • Shipping source
  • Tags
  • Total discounts
  • Total tax

Doing It Yourself

Part 1. Place the JavaScript Library in your shop’s theme

  • Go to the theme editor at https://myshopify.com/admin/themes.
  • Open theme.liquid or the layout that is used in all the pages of your shop.
  • Add your JavaScript snippet to the bottom of the of the layout, as shown below.
  • Remember to use your JavaScript snippet, which contains your unique API key rather than 'foo'.

Code Template

<!-- Inside theme.liquid -->
<head>
  ...
  <!-- Kissmetrics -->
  <script type="text/javascript">
  var _kmq = _kmq || [];
  var _kmk = _kmk || 'foo';
  function _kms(u){
    setTimeout(function(){
      var d = document, f = d.getElementsByTagName('script')[0],
      s = d.createElement('script');
      s.type = 'text/javascript'; s.async = true; s.src = u;
      f.parentNode.insertBefore(s, f);
    }, 1);
  }
  _kms('//i.kissmetrics.io/i.js');
  _kms('//scripts.kissmetrics.io/' + _kmk + '.2.js');
  </script>
</head>

Part 2. Modify the cart to also include the customer’s anonymous identity

  • Still in the theme editor, open cart.liquid.
  • As shown below, add a hidden <input> field to the cart form (<form action="/cart">). This field will pass along the customer’s Kissmetrics anonymous ID as an extra cart attribute. In our example, I’ve placed the input beneath the area for order notes.
  • Place the custom JavaScript at the bottom of cart.liquid. This does the actual work of assigning the identity to the hidden field.
  • The event to record that the customer Viewed Cart is helpful, but optional.

Code Template

<!-- Inside cart.liquid -->
<form action="/cart" method="post">
   ...
   <textarea id="note" name="note" placeholder="Add a note to your order...">{% raw %}{{ cart.note }}{% endraw %}</textarea>
   <!-- Kissmetrics ID here -->
   <input id="km_id" style="display:none" name="attributes[km_id]" />
   ...
</form>
<script type="text/javascript">
  _kmq.push(['record', 'Viewed Cart']);
  _kmq.push(function() {
    jQuery("#km_id").val(KM.i());
  });
</script>

Part 3. Record the purchase on the order confirmation page

  • Head to https://myshopify.com/admin/settings/payments to modify your checkout settings.
  • In the section “Order processing”, under “Additional content & scripts”, paste the sample from below.
  • Again, remember to use your JavaScript snippet, which uses your unique API key rather than 'foo'.
  • The last 3 lines of JavaScript make sure that the person’s ID stays consistent between your shop’s domain and checkout.shopify.com. It will record the event “Purchased”, and the total cart amount as the “Billing Amount” property.

Code Template

<script type="text/javascript">
var _kmq = _kmq || [];
var _kmk = _kmk || 'foo';
function _kms(u){
  setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0],
    s = d.createElement('script');
    s.type = 'text/javascript'; s.async = true; s.src = u;
    f.parentNode.insertBefore(s, f);
  }, 1);
}
_kms('//i.kissmetrics.io/i.js');
_kms('//scripts.kissmetrics.io/' + _kmk + '.2.js');

var KM_SKIP_VISITED_SITE=1;  // Prevent recording Visited Site on Shopify
_kmq.push(["identify", "{{customer.email}}"]);
_kmq.push(["alias", "{{customer.email}}", "{{attributes.km_id}}"]);
// Force the timestamp of the Purchase event to use the order creation date
_kmq.push(["record", "Purchased", {"Billing Amount":"{{order.total_price | money}}", "_d":1, "_t":Math.round((new Date("{{order.created_at}}")).getTime() / 1000)} ]);
</script>

Additional Notes

  • You are not limited to recording only the events described here. Refer to Shopify’s documentation on the cart and order objects.