Posts
47
Comments
136
Trackbacks
0
September 2010 Entries
Leveraging Google Analytics Event Tracking On Your Shopify Store

One of the main reasons this blog hasn’t gotten any love lately is because of my new side project, PiX Eyewear. I won’t dive into all of the details here, but I maintain another blog detailing my experiences trying to start this business while continuing to work full time as a software developer. I’m using an e-commerce platform called Shopify for this project. Working with Shopify has been a very positive experience overall and has definitely given me an opportunity to venture out of the .NET development ecosystem for a bit.

Standard Analytics

I wrote a post on my other blog a little while back talking about why I chose to use Shopify for this project. One of the reasons that I like Shopify is they make it very easy to integrate with Google Analytics. The general preferences section of the administrative interface for every Shopify store includes a convenient textbox where you can enter your Google Analytics code.

image

Entering this code will automatically inject the standard Google Analytics tracking snippet into every page of your store. This ends up looking something like this:

<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="/global/ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker('UA-XXXXX-1');
pageTracker._setAllowLinker(true);
pageTracker._setDomainName('none');
pageTracker._trackPageview();
</script>

A Bit Lacking…

This standard Google Analytics code will give you a lot of insight into how your customers interact with your store, but I’ve always wanted to be able to see exactly which products my customers are adding to their shopping carts (but not ever buying). I should stop here for a minute and say that I currently have a ‘Professional’ level Shopify account for my store which does not include the ‘Statistics’ package that comes with some of the more expensive plans. For all I know, the Statistics package provides the information that I’m trying to see, but since my store doesn’t generate nearly enough sales to justify the extra $40 / month, I needed a cheaper (free) way to get this information.

As it turns out, Google Analytics offers Event Tracking functionality that can let you intercept and report on specific events (e.g. button clicks) on your site. Utilizing the Event Tracking functionality requires that your site use the asynchronous analytics tracking snippet. As far as I can tell, the default Google Analytics code that you get “out of the box” with Shopify is not the same as the asynchronous analytics snippet. Fortunately, it’s not that difficult to modify your site template to include the proper asynchronous analytics code on each page.

To do this, you’ll first need to go in and clear out the analytics code that you’ve entered in the general setting section of your site (if any). Then go to the ‘Template Editor’ in your site’s administrative interface. From there, open the ‘Theme’ file under the ‘Layouts’ area. Once open, look for the closing tag of the <head> section of your layout. It’ll likely look something like this:

{{ content_for_header }}

</head>

<body id="page-{{template}}">

 

Put the following bit of javascript right before the closing </head> tag being sure to replace the ‘UA-XXXXX-1’ placeholder with your own analytics code.

<script type="text/javascript"> 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script> 

Save your layout template and you’ll be all setup with asynchronous analytics tracking. Now we’re ready to start tracking products that get added to the shopping cart.

Event Tracking Setup

Google has very detailed Event Tracking docs, but I’ll attempt to distill the information presented there and tell you about how I’m using Event Tracking to see which products my customers are adding to their shopping carts. At it’s core, Event Tracking boils down to a single method call:

_trackEvent(category, action, opt_label, opt_value)

The method takes four arguments. The first two, ‘category’ and ‘action’, are required, the last two are optional. You can choose whatever categories and actions you want, but I opted to have a single category called ‘Products’ with an action called ‘Added To Cart’. I used the third parameter, ‘label’ to track the handle of the product being added to the cart. My _trackEvent method call ended up looking like this:

_trackEvent('Products', 'Added To Cart', '<product handle>')

Implementing this is as simple as modifying your ‘product.liquid’ template in the template editor of your site. Open the ‘product’ file under the ‘Templates’ section of the Template Editor. This template will vary based on the layout that you initially chose for your store, but you should be able to locate the following bit of HTML to indicate where the ‘Add To Cart’ form falls on the page:

<form action="/cart/add" method="post">

Somewhere between that tag and the closing </form> tag you should see an <input> element representing the ‘Add To Cart’ button that customers use to add the current product to their shopping cart. For my store, it looks like this:

<input type="image" name="add" value="Add to Cart" id="add" src="{{ 'add_to_cart.gif' | asset_url }}" />

We need to add an ‘onclick’ event handler attribute to this element that will queue up our ‘_trackEvent’ method call. By doing this we’ll tell Google Analytics that every time someone clicks the ‘Add To Cart’ button we want to track what product was added. We’ll make use of the Liquid product.handle variable that Shopify exposes in this template to plug in the handle of whatever product is currently being viewed. For my store, the input element ended up looking like this:

<input onclick="_gaq.push(['_trackEvent', 'Products', 'Add To Cart', '{{ product.handle }}']);"
 type="image" name="add" value="Add to Cart" id="add" src="{{ 'add_to_cart.gif' | asset_url }}" />

That’s it! Providing you’ve done everything correctly you should start seeing these events show up in your Google Analytics account under ‘Content’ –> ‘Event Tracking’. In my experience Google Analytics typically takes about 24 hours to report data, so you may need to wait a day until you start seeing the events show up.

Just The Beginning

Once you’ve setup Event Tracking for adding products to the cart you’ll find it’s very easy to add Event Tracking to other areas of your store. For example, I was also interested in tracking each time users clicked the ‘Checkout’ button while viewing the contents of their shopping cart. Once users click the ‘Checkout’ button on their shopping carts they are directed to the secure Shopify checkout form. Providing they complete at least the first step in this form (providing shipping information) an order number will be created for their order. If they finish this first step but ultimately fail to complete the process they will show up as an ‘Abandoned Order’ in your Orders dashboard. If they don’t complete the first step, however, you’ll never get any indication of their intent to check out. I was interested in seeing how many users might be clicking the ‘Checkout’ button but then not even finishing the first step. This can be easily accomplished by adding some Event Tracking code to the ‘Checkout’ input element in your cart.liquid template.

Posted On Monday, September 20, 2010 9:36 PM | Comments (3)
Meta
Tag Cloud