usage and user analysis graph

Google Analytics Custom Events

Many site owners use Google Analytics to capture user statistics. Usually people look at page views, number of pages visited, bounce and exit rates. Google also tells you the time users spent on a page, but what about all the other user interactions that happen on single pages? With a bit of extra work, we can capture statistics on those too using the custom events feature built into the Analytics API. Here are some examples of on page actions we can configure and track in Google Analytics:

  • clicking on tabs within a page
  • downloading content
  • watching an embedded video
  • submitting forms or getting form errors (Interesting to know what the common mistakes are your users make. Maybe your form can be improved to avoid this from happening)
  • navigate through images in slideshows
  • tracking (ad) clicks that open in a new tab/window
  • social sharing

In this article, I will explain how to set up custom events on Drupal sites.

There are existing Drupal modules that can log these events such as google_analytics and google_analytics_et, but adding your own JavaScript or jQuery code isn’t difficult, and can often make more sense, especially if you’re using panels and custom panes. The JavaScript that logs a particular event can live in the same file that defines the custom pane that generates the markup for the event you want to capture, for example.

Adding your own JavaScript or jQuery code isn’t difficult, and can often make more sense, especially if you’re using panels and custom panes.

I’ve put together an example html page that demonstrates these custom events, which you can grab from GitHub. Rather than using a Drupal install, it’s just a standalone page, but I’ve used jQuery 1.4.4 and jQueryUI 1.8.7 to keep in line with stock Drupal 7. If you want to try it out with your own Google Analytics account, just change the account reference in the ga('create'… line in index.html.

If you load the page, you can see my lack of design skills, plus three example interactions that we’ll track. There’s a basic button, an accordion and some tabs.

Google_Analytics_Custom_Events.png

These are typical things that you might want to track, but which won’t be picked up by basic page view tracking. The example markup is straight out of the jQueryUI widget documentation, http://api.jqueryui.com/1.8/category/widgets/, with some added cheese ipsum. At the end of index.html, there’s the standard Google Analytics universal tracking script.

That’s all you need for page view tracking, but to track other events, we need to do a bit more work. Google provides plenty of documentation on their API together with some examples.

Events are sent to Google by the ga() function, passing a number of parameters. Only some of the parameters are required, so all of these are valid:

ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', value);  // where value is a number.

The events.js file contains the extra JavaScript to initialise the jQueryUI elements and fire off the data to Google. The button is the most straightforward:

$('#buttons button').button().click(function(event) {
  ga('send', 'event', 'button', 'click', 'Trigger Event button clicked');
});

The button widget is enabled and a click handler is added to pass the event information to Google. Here, the category is button, the action is click and the label is Trigger Event button clicked. These parameters will be visible in the Google Analytics dashboard.

Next on the page is the accordion. This is a little more complicated, as we need to use the change method that the accordion widget provides - see http://api.jqueryui.com/1.8/accordion/#event-change for more information on this.

$("#accordion").accordion({
  change: function(event, ui) {ga('send', 'event', 'accordion', 'click', ui.newContent.context.textContent + ' expanded')}
});

For the accordion, the category is accordion, the action is click and the label looks complicated, but ui.newContent.context.textContent just returns the accordion heading as text. So if Accordion 2 is expanded, the label will be Accordion 2 expanded.

Finally, there’re the tabs which are very similar to the accordion above.

$("#tabs").tabs({
  select: function(event, ui) {ga('send', 'event', 'tab', 'click', ui.tab.innerText + ' selected')}
});

The tab widget provides a different method for us to use, select - see http://api.jqueryui.com/1.8/tabs/#event-select.

The category is tab, the action is click and the label will be formed from the tab text, Tab 2 selected, for example.

Loading up the page and clicking around should generate some events. Checking in the Google Analytics dashboard, you should see something like this:

GA_Events.png

You can also click on each event category to see further information:

GA_Accordion.png

GA_Tabs.png

GA_Button.png

It’s always worth asking whoever will be analysing this data to specify the category, action and label that they’d like to use for each event. No two sites are the same, and depending on the type on analysis that they want to do, different naming strategies may make more sense.

Now, this is certainly a very contrived example, but it gives an idea of what you can do with custom events. Once you’ve collected some sample data, you can then examine the effect of any future changes that you make. You might add an embedded video to a page, but discover that very few visitors actually play it. You can use the analytics data to feed back into your content and design decisions.

 

No two sites are the same, and depending on the type on analysis that they want to do, different naming strategies may make more sense.