Tracking OpenCart Customer Activity with Google Analytics Events

This is part two of the blog series concentrating on integrating OpenCart and Google Analytics even tighter to get more data from your online store. See the complete list of the series here

 

The more data you can pull from your OpenCart store, the more detailed a picture you have of your customers and how they are engaging with your business. Most people are of the assumption that you can track visitors and referral rates etc with Google Analytics but the rest is a bit of a blur.

The good news is that this is wrong! With the ‘Events’ section of Google Analytics you can track any number of enlightening things which your customers are doing on your online store. In this blog post we will be looking at how to track things like which products people added to their basket, tracking product selectors and finding out what has been downloaded, how many times by which customer types. All of this can be analysed in the Google Analytics ‘Events’ section on the dashboard.

It is nice and easy (the hard part is discovering where to put what but I will walk you through it here) but first we will look at the basics of what we need to do to create an event when a customer interacts with your OpenCart store.

How to create a Google Analytics ‘Event’ in OpenCart

OK, so in order to start tracking events in OpenCart we first need to know how to make the site send information to Google Analytics. I will say it now, you will need to have a Google Analytics account (which is free of course at www.google.com/analytics) and have it installed on your OpenCart store.

The code you will need is very simple and Google have loads of helpful information on the topic but below is a sample of an event tracking JavaScript code which tracks an event when I click on a button.

So if we look into more detail we see the structure of the Event tracker sends all of the right information off to Google Analytics and places it in different places depending on the order of the values. See below for more detail on how to build your tracker link:

• Button
• The first value is called the “Category“. This is the group which is being interacted with, in my example I have chosen a button because a button is being clicked but it could be something like Videos…Audio…Files…etc etc
• Click
• The second value is called the “Action“. This is what is happening to the category item we specified before. In my example I have set it to click because the button is being clicked. In other examples this could track the stop button on a video…the pause button on an audio file…a file download…etc etc
• Tracker Button
• The third value is called the “Label“. This should something unique so when you look at it in the Google Analytics Dashboard you know instantly what it is. I have named mine Tracker Button. Now when I see it in a report, I know which button, out of all the ones on my website, has been interacted with.

There is also a fourth value which you can add to the end which can hold a numerical value. This can be used to see at what point along the video or music file it was paused, or what time of day exactly it was when a button was clicked, or how many items a visitor had in their basket when clicking something but for the sake of keeping things simple, I’ll leave that out for now.

So now you can see how to create a piece of code which tracks an event. In the example I have used the “onclick” JavaScript handler which tracks the event when something is clicked but there are other JS Event handlers like “onmouseover” which will track an event if a user’s mouse is hovered over an element but I won’t go into that too much. It can be useful for some things such as: tracking a user hovering over a download button and tracking again when they click it. Then you can see how many were tempted to click the button but didn’t by subtracting the two numbers. Lots of things can cause it to be inaccurate though so let’s start on the easy things first.

I’ve made a tool below which you can use to generate your Event Tracking code if you are unsure with HTML. Just enter the values in the right fields and it will give you the end code as you need it.

So there we are, you have the basics of how the Analytics Event Tracking works we can get started with a few examples of how to start tracking. The limit with this kind of thing is really your imagination. You can pretty much track anything in a roundabout way. Below I’ll show a few examples and show you what kind of data you might find useful from tracking.

Tracking which OpenCart products are added to a shopping basket

OK, I thought I would start with the trickiest first, just to be difficult! In this section we will be adding an Event tracker to see when a product has been added to a shopping basket. I will be working on a default 1.5 OpenCart theme but the principle works exactly the same no matter what you use.

Open up your favourite FTP program and open up the following file:

• catalog/view/theme/[YOUR THEME]/template/product/product.tpl

Use the code generator above to create your code and place it as an “onclick” event on the Add To Cart button as I have demonstrated below:

        


          
          

//

          

//

              
          

            
        
         1) { ?>
        

        
      

You can see where I have added the “” actually puts the product name into the “Label” section so that you can see which products are being added to the shopping basket. I may update this blog later on to show how to track the quantity as well but for now I will leave this as it is.

And that’s all there is to it! OpenCart will now send data to Google Analytics whenever a customer adds a product to their shopping cart through the product page.

Tracking which OpenCart products are removed from a shopping basket

Equally important, perhaps even more so, is tracking when a product is removed from the shopping basket. If a high percentage of people add a certain product to the shopping basket then it is likely that the Marketing Campaign is ensuring people start to convert into paying customers but something is preventing them from actually making the sale.

This could be down to poor information, dodgy looking conditions or anything to do with that particular product or it’s images. With this code we will track when people remove the product from the mini-cart in the top right of the screen. This time, open up the following file:

• catalog/view/theme/[YOUR THEME]/template/module/cart.tpl

Again, use the GA Event Tracking code generator above and follow the example below:

        
          

            
            

          

            

              
              -  

              
            

          x 

          

//







//

        

        

You will notice in this example that the image inside the td class=”remove” actually already has a JavaScript handler due to fire onclick so we will set our code on the table cell instead of the image itself. Works exactly the same apart from that. We use the “” value to assign the product name to the label, showing us in the Google Analytics Events Dashboard which product has been removed.

Tracking a download in OpenCart

If you have a free PDF or document which doesn’t require your customers to be signed into their account, it can be tricky to track how many times it is downloaded. In this example we will be assuming we have a simple link on the OpenCart homepage which looks like:

• Download our new brochure

Everytime a user downloads the brochure Google Analytics will track it as an event and you will get a good idea of how much your information is being utilised and can help you draw conclusions on sales performance from when the information was available.

By now you know the score, choose a good set of data which allows you to know exactly what it is in the Google Analytics Events Dashboard and use the code generator above to get what you need then add it in as an “onclick” JavaScript event. See the example below for what I would do:

That’s it!

Like I said at the start, the limit really is in your creativity. Think about what might be useful to know for your business and see if you can find where you would need to put your code to track events on your OpenCart store. You can also track things by using other attributes like “onmouseover” but bear in mind that someone may move over your image or link but have no intention of clicking. This would be tracked regardless so can be a bit more unreliable. If you leave a comment below I will add examples or instructions to this blog as we go on.