Shopify

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

🚧
Please note: The Shopify plugin is currently under revamping. You can integrate your store with the manual setup.

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