Subscribe:   Posts   |   Email   |   Facebook   |   Twitter

Internet Marketing and Web Development in Higher Education and other tidbits…

Idiot’s Guide to Event Tracking

27 Jul 2011

written by Michael Fienen

Idiot's Guide to Event Tracking

On July 23rd, 2011, I had the pleasure of presenting at the HighEdWeb Arkansas regional conference. My topic was looking at approaching our websites through incremental realignments, rather than sweeping redesigns, and doing so based on information we can get from our analytics. A core component of that topic is using Google Analytics for event tracking on parts of your site. After talking with some folks post-presentation, it was clear a deeper look at event tracking was needed to show why it’s important and how to use it.

So, what is event tracking? Let’s let Google speak for themselves on the matter first:

Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system. This is accomplished by attaching the method call to the particular UI element you want to track. When used this way, all user activity on such elements is calculated and displayed as Events in the Analytics reporting interface. Additionally, pageview calculations are unaffected by user activity tracked using the Event Tracking method. Finally, Event Tracking employs an object-oriented model that you can use to collect and classify different types of interaction with your web page objects.

event menu 221x300 Idiots Guide to Event Tracking

Location in the GA menu

Crystal clear, right? In layman’s terms, while most normal stuff in GA lets you look at data at the page level, event tracking let’s you track things, components, and happenings on pages. This is extremely important when it comes to measuring the performance of tools on your site that don’t necessarily link to a new page, or that perhaps link to pages which you can’t track. For instance, want to track how many people click the play button on a video? How about tracking how many people open up your net cost calculator which you’ve put into a modal window? Or maybe you have links repeated on a page and you want to test them against each other (GA will treat these like one link in overlay mode if they have the same href). All of this is possible through the use of events.

Understanding the Function

First, let’s look at how you put event tracking to use. Basically, you’re going to tie a GA method to anything you want to track clicks for – the simplest way is through using the onclick attribute. The method in question is _trackEvent(). It is possible to call this on page load for global events, but if you are trying to track actions on the page, you’ll combine this with the _gaq.push() method (used for asynchronous tracking) in the following manner:

<a href="some-uri.htm" onclick="_gaq.push(['_trackEvent', 'category', 'action', 'label']);">Open Popup</a>

That basically says: “When someone clicks this link, we want to push _trackEvent data to GA, and here’s the data.” The three fields are used for helping you segment and silo the data.

  • category – For Event Tracking, a category is a name that you supply as a way to group objects that you want to track.
  • action – Use the action parameter to name the type of event or interaction you want to track for a particular web object. (e.g. ‘click,’ ‘download,’ ‘play,’ etc)
  • label – With labels you can provide additional information for events that you want to track. (e.g. video title or the name of a file)

So, knowing that, you could do the following in a situation where you needed to track form interactions:

1
2
3
<p>Need a copy of the TPS Report?<br />
<a href="this-form.htm?print=true" onclick="_gaq.push(['_trackEvent', 'Site Forms', 'Print', 'TPS Report']);">Print for later</a> |
<a href="this-form.pdf" onclick="_gaq.push(['_trackEvent', 'Site Forms', 'Download', 'TPS Report']);">Download</a></p>

In this case, by changing up the action, I can track the same basic information as it is used in different manners, in this case folks who would prefer to print the document versus downloading a PDF version.

Other Uses

Trying to think of ways to use event tracking? Consider these.

Outbound Links

This can be especially useful if you currently don’t have a way to track people once they enter the funnel of your university application that might live on another server. By tossing event tracking on the link, you can at least see how many people are clicking to start an application, and compare that to the number of completed online apps to get your dropoff rate for the overall funnel. Likewise you can track clicks into any of your third party software platforms so you can get some idea of how frequently they are used.

<a href="http://www.google.com/" onclick="_gaq.push(['_trackEvent', 'Outbound Links', 'Click', 'Google']);">Google</a>

PDF Downloads

This is a common question: “How do I track X, when X isn’t a webpage I can put analytics code on?” Normally, it’s asked in the case of PDF, Word document, and other types of downloads. GA is good for tracking web pages, but sometimes you want to track non-HTML page content. This is not the only way to do it, but is a useful and simple one.

<a href="this-form.pdf" onclick="_gaq.push(['_trackEvent', 'PDF Downloads', 'Download', 'TPS Report']);">TPS Report</a></p>

Multimedia Interaction

Using a video player on your site? If you have a player, especially one that is non-YouTube, you might be lacking in information about how people use it. If your player supports callbacks on common actions like play, pause, and stop, you can tie in to those and pass it a function to note certain activities.

1
2
3
function sendToGA(filename,playerAction) {
    _gaq.push(['_trackEvent', 'Videos', playerAction, filename]);
}

This assumes your player can send a string of its status along with the callback, something like ‘play,’ ‘paused,’ or ‘stop.’ The YouTube player can do this, as can most others. Then you can use the single callback function to track any player interaction. The same basic thing could be done for an audio player, or for photo galleries or slideshows.

jQuery

So far, most of the examples focused on links, but jQuery opens up the whole DOM to interactions. Here’s an obvious use to automatically apply a download action to any links that are PDFs:

1
2
3
4
5
$(document).ready(function() {
    $('a[href$="pdf"]').click(function() {
        _gaq.push(['_trackEvent', 'PDF Downloads', 'Download', $(this).attr('href')]);
    });
});

Cool, right? Expand the idea, automatically track all external links, internal page anchors, or monitor modal popup windows. jQuery opens the world to you on your pages, and let’s you wire in to basically anything that the user is going to interact with.

In the Real World

So, how can you put this to use besides the obvious? That was part of what I talked about in Arkansas. For example, every part of our base templates is now set up with event tracking. This allows me to specifically watch the usage of our header and footer links across the site, and see where they are most frequently being used. In those cases, I use “Header Links” and “Footer Links” as categories, “Click” as the action, and the link text as the label.

header clicks 1024x767 Idiots Guide to Event Tracking

Sample report showing events for header link clicks

In this case, you can see I added the Page dimension to the report so I not only see the event labels, but where they were triggered from. Using this, over time I can measure how people use things we’ve placed in our template, and make decisions on what to change and how to change it. For example, perhaps a particular link simply falls out of usage, or we place something with the idea that people wanted it, but it turns out no one uses it. Knowing that allows us to make educated decisions and gives us a baseline to compare against.

eventTracker 300x225 Idiots Guide to Event Tracking

Using onclick events to track the old application links, the only thing that changes is the label.

Similarly, I’ve done this with other static tools around the site. We had a box on our homepage that was being used for admission application links. A debate was taking place on whether that was really useful though. Looking at event clicks on them (note: we can’t track people once they enter the application itself, so I used this as a means to see who was trying to apply), we noticed a major gap between the number of clicks vs number of submitted apps. We saw at best 80% dropoff in the funnel (I can’t account for apps mailed in, or ones not initiated from the home page – so the actual funnel loss is likely into the 90% range).

box comparison 300x225 Idiots Guide to Event Tracking

Updating tools for better results based on event tracking

So, we set about finding a better way to use the space. Rather than linking directly to the app, we decided to link to informational pages first, with the goal of helping people get comfortable with us first since a large part of the loss was likely because people clicked the links not expecting to immediately enter the application (gotta build those relationships first). The results based on watching event numbers spoke for themselves. Pages per visit were up about 2 for those users, time on site (compared to average) was way up, and general clickthroughs increased over 50%. Without event tracking, I would have never been able to identify the problem or measure the results of the change.

In Closing

Event tracking in Google Analytics can provide a critical extra layer of depth and perspective on your existing analytics. While most normal data addresses the question of where, events allow you to watch the what. This becomes more important as you try to help your site evolve intelligently over time, rather than dumping the whole thing every few years and starting over. Events also give you an added layer of flexibility in control what is tracked, and how that happens, to meet custom needs you might have for your site. Naturally, Google has a guide for implementing the event tracker that you might want to bookmark for future reference.

Below, you can find my slide deck from Context in Chaos: Informed Design Through Analytics, and you can listen to audio of the presentation over at the HighEdWeb AR site.

Do you have your own creative use of event tracking in Google Analytics on your higher ed site? We want to know about it. Share your example in the comments down below!

The content of this post is licensed: The post is released under a Creative Commons by-nc-sa 3.0 license


About the author

Michael Fienen

For six years, Michael served as the Director of Web Marketing at Pittsburg State University. Currently, he is the Senior Interactive Developer at Aquent and is also CTO for the interactive map provider nuCloud. When it comes to web communication, he focuses very heavily on interpersonal communication components of websites, as well as content considerations that must be taken into account when building usable sites.  He is an active supporter of the dotCMS community, accessibility advocate, consultant, internationally featured speaker on web issues, and general purpose geek who wears many hats.

Michael's Facebook Michael's LinkedIn Michael's UWebD Profile Michael's Twitter Michael's Flickr Michael's YouTube Michael's FoursquareProfile Michael's Lanyrd Profile Michael's Tumblr Account Michael's Slideshare Profile

This post was written by - who has written 99 posts on .eduGuru


  • http://twitter.com/McCarthySchdy Gary McCarthy

    Awesome, just went through most of our site and tagged a lot of events, easy with a CMS.

  • Mark Stylan

     Good explanation of Event tracking with Google Analytics. I was using it only for Click tracking and File downloads. But never used for jQuery or , Flash interaction.

  • http://twitter.com/mswas Bonnie Wasielewski

    How can I track the download of a PDF if it isn’t tagged? What about Search engine results, or links coming from other sites? How do we know if the PDF is downloaded if we can’t attach javascript to it?

  • jzhaoc

    You can also try skyglue.com. All you need to do is to add another javascript like ga.js, and it will start to track all events without manually tagging.

  • http://twitter.com/Yale32 Yale

    i have to tell you.  i couldn’t get my event tracking set up right even with the non help from Adwords tech support and my host: Hostgator. 

    Thank you very much for explaining this clearly!  :)

  • http://twitter.com/inseoservicesqc inseoservices

    Thank you for the guide, I will follow to used in my webside

  • How_to_make_visual_resume12

     Really,awesome explanation of event tracking with google analytics.

  • Ioannis Giannaros

    This is a lot better than what Google has listed on their website. Thank you!

  • http://www.facebook.com/saynw Nico Wegher Heredia

    Hi, I have a wordpress site where that uses a plugin to collapse more info ( When a user clics the “Phone number” the plugin collapse the number. I insert this plugin with a code provide by the plugin, so i’m not sure if I can add code to be track there. However I’m using the next code in my head to track the event however it isn;t working.
    _gaq.push(['_trackEvent', 'Phone Number', Lares_Chacras, (+54 261)4961061]);
    Lares_Chacras is the hotel name,
    And the number at the end of the code is the info that collapses.
    Any Idea on how to make it work?

  • http://www.facebook.com/vertigonation.dropka VertigoNation Dropka

    True, I’ve read a lot of GA event tracking articles (after dispensing with the Official Google one) and this is the best yet. Thanks.

  • Mark

    I’m new to the event tracking where would I place the codes in my website? I’ve tried putting it on the buttom of the template then when I see my website there is a link at the buttom right of my website. Am I hitting it right?

    Need some help. Thanks

  • http://twitter.com/mohrruebe83 Jani

    Thanks for the great explanation! Is there also a possibility to track pdfs that are not linked to a website, but an html email?

    • http://twitter.com/fienen Michael Fienen

      The trick there is that you’d need to proxy the PDF request through a page on your site where the hit can be tracked. The email isn’t going to fire the javascript, and so you can’t include analytics in it. What I’ve done in the past is created a blank page that takes a path as a URL parameter. The page is just there to land on and register the hit (like one of those “You Download will begin in X seconds” pages), and it automatically sends you the file from there.

  • http://www.twitter.com/heathers Heather

    sooo if I am tracking clicks as an event, what is that click exactly? a pageview? The previous page path on the landing page is showing far fewer pageviews from the source than the event tracking code is showing (even unique)

    • http://twitter.com/fienen Michael Fienen

      Think about it this way: A vanilla Google Analytics setup is designed to answer the “where” question about users on the site. Where do they go, where do they go after that, how long do they spend there, what kind of person are they. Event Tracking is focused on telling you how they use parts of your site once they are there. Inter vs Intra page tracking, so to speak.

      So, no, events are not pageviews at all, and don’t factor into that number. Events are totally separate as a dimension. I’d have to see your reports to tell you what exactly is going wrong, per se, or if it’s wrong at all.

      • Lin

        Hi. I am already tracking just page views on 2 pages and the GA code shows up in the head tag on those 2 pages and it is working. However, recently I decided to track events on 4 new pages. When I track events on 4 new pages, I am having a problem. No one seems to have the answer to the issue I am having regarding tracking events. I am trying to track events to find out how many users are clicking on certain links but I can’t see my GA code in the web browser when I view source. Also when I go into my Google Analytics account and select Events it says I have no events. This is the code I place in my head tag before the body tag:

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,’script’,'//www.google-analytics.com/analytics.js’,'ga’);

        ga(‘create’, ‘UA-my property ID, ‘my website name’);
        ga(‘send’, ‘pageview’);

        This is the code I place on my html links:

        Art

        I have been trying to figure this out for a while now and everyone is stumped just like I am. If you can give me some solutions that would be great and much appreciated as this is beginning to drive me nuts.

      • Michael Fienen

        Well, if you view source on the page, and the code isn’t there, then the issue lies with whatever CMS or method you’re using to handle the HTML output. Perhaps code in the wrong template, or something entered and saved but not published. At any rate, if it’s not in the source, it’s definitely not a problem with the tag.

      • Lin

        Michael, I just found out what’s wrong. I contacted my Web host. Last month the website was moved to another server. The GA code was not showing when I uploaded the page to the server because the page being seen on the server in the web browser was the old page not the new page that was being uploaded. The web host realized this when they told me the page’s date they were seeing had the last changes made to it last month, and I told them that the date on the page I just uploaded to the server had the last the date of 10/08/2013 as being the last changes made to it. Something was out of sync on the server.
        I decided to contact the Web host after what you said regarding the page not being published if code is not showing in view source. Which told me it had to be the server and the page I was seeing was not the page I uploaded if the GA code was not showing. Thank you so much for your help!!!! I appreciate it!!!!

  • Marcin

    And how can i track checkboxes cant find any simple code :/

    • http://twitter.com/fienen Michael Fienen

      Very easy, just use this as an example:

      $(‘#checkbox1′).mousedown(function() {
      if(!$(this).is(‘:checked’))
      _gaq.push(['_trackEvent', 'Form Elements', 'checked', 'checkbox1']);
      else
      _gaq.push(['_trackEvent', 'Form Elements', 'unchecked', 'checkbox1']);
      });

      • Marcin

        Thanks for quick response. Ok and if I have 26 checkboxes i have to write this code for all of them or just once?

      • http://twitter.com/fienen Michael Fienen

        Well, that’s all just a matter of your base selector and loop. Assuming you’re using jQuery, maybe change the selector to ‘#yourFormId input[type=checkbox]‘ and in the event label, use something like ‘$(this).attr(‘value’)', then it would automatically attach to all your checkboxes in your form and use their values as the event label.

        As to your other question, I’m not sure I understand. Regardless of if you’re using virtual pageviews or not, if you don’t use event tracking, you really can’t track your checkboxes.

      • Marcin

        Hi there then i cant track checkboxes without trackEvent?
        I have to apply tracking for this webpage http://lingleonline.com exactly for the text field, dropdown window second dropdown window with all the checkboxes and search button.
        I get this little project for my work placement and I’m not sure how to do that.
        Thank you Michael for previous answers.

      • Marcin

        And other question can i Track checkboxes on Virtual Pageviews if i do not use Event Tracking?

  • http://www.facebook.com/FRSTAR Fazlul Rm

    Can do the same Mobile videos ?

  • http://www.facebook.com/mike.cullinan Michael Cullinan

    Good stuff Mike

    • http://twitter.com/fienen Michael Fienen

      Thanks Mike!

  • anna white

    so, if event tracking is done right, can i track where people go and what they do on a specific PC browser, say the office browser?

    • http://twitter.com/fienen Michael Fienen

      The default answer is with the right planning and code, in theory, anything is possible. It’s just a matter of how you want the data to show up. You’d have to generate unique IDs for each event and such, but with some work it could be done.

  • Ramesh

    Dude You rock, the best explanation ever, You should start an online education site, there a lot of bs out there, you nailed it. Thanx

  • over50choices

    V helpful although i cant get the following code to work
    OnClick=”_gaq.push(['_trackEvent',
    'over50s', 'Loz2', 'compare-over50-life-insurance', true]),”
    Do i need to add some code in front and after it – i am looking to place on button that will take visitors to a 3rd party microsite?
    Ash

    • 10minutes

      It looks like Your missing a semicolon after the closing brackets, instead you used a comma. Other than that minor detail the code looks good to me.

  • KD

    I wonder if you could help me with a form event tracking issue. I’ve often used event tracking in the past for a href actions, but I’m not sure how to measure my form abandonment.

    I want the category to be Forms, the action reflected a completed selection, and the label to be ‘Region – United States’ for example.

    I’m not really a JQuery guy and I’m not sure how to implement this in the following form?

    Select a Region

    Please Select Region

    United States

    Canada

    International

  • KD

    P.S. I’ve been looking for a couple of days and can’t find anything clear around onChange event tracking.

    • 10minutes

      Check this resource out for help on this topic. It is JQuery but its pretty straight forward. http://www.lunametrics.com/blog/2012/11/13/track-form-abandonment-google-analytics/.

      • KD

        Many thanks 10minutes!

        I’m going to add this to my test environment Monday to ensure I don’t break the site. The only thing that might not work is the name attribute pulling through correctly, but at least it’ll be automated and available. I’ll come back to you next week!

      • 10minutes

        I look forward to hearing if that works for you.

      • KD

        Hi 10minutes,

        I gave it a try on a test site and in real time analytics, I’m still not getting quite the right information. I’m also not seeing it pass into content reporting, but it’s probably just not enough events to register.

        My promotion page is here: http://www.bradygames.com/promotions/promotion.aspx?promo=139300

        I added the following:

        (function($) {

        $(document).ready(function() {

        $(‘:input’).blur(function () {

        if($(this).val() == 0) {

        _gaq.push(['_trackEvent', 'preOrder-form', 'skipped', ('this.options[this.selectedIndex].text’)]);

        }

        else {

        _gaq.push(['_trackEvent', 'preOrder-form', 'completed', ('this.options[this.selectedIndex].text;’)]);

        }

        });

        });

        })(jQuery);

        I’m trying the to capture the region name, book title, and retailer, but having no luck as I’m getting this.options[this.selectedIndex].text; as my label in GA. Any idea what I’m doing incorrectly?

      • 10minutes

        Hi KD,

        I’m not the worlds greatest code monkey so if its not working specifically for you I’d not be the person to ask. However I had a buddy interested in doing the same thing you wanted so I showed him the same link and asked him to provide some feedback. Here’s what he did with pretty much the same code:

        http://jsfiddle.net/jx9A3/

        Give it a go and see how it helps!

      • KD

        10minutes, this is awesome and exactly what I need. Thanks for the help!

      • 10minutes

        Glad that worked for you KD. As Phil Robertson from Duck Dynasty would say… happy happy happy!

  • 10minutes

    I don’t have a higher education site but thought I’d share how I’m using events for one of my directories.

    … onClick=”_gaq.push(['_trackEvent', 'convertState($free->state,'short','slug') ?>', 'toSlug($free->city) ?>', 'slug ?>']);”

    Basically without the coding it would look like this:

    … onClick=”_gaq.push(['_trackEvent', 'California', 'Anaheim', 'Company-Name']);”

    I kind of think outside of the box when it comes to the purpose behind event tracking in my opinion because most articles specify category, action, label and other data like that. I’m not looking at event tracking in that same way.

    My specific goal is to be able to create custom reports for advertisers using data pulled from the state, city and company level that applies to them specifically.

    There’s probably an easier solution to this but thought I’d throw this use of Event Tracking out there. Enjoy! (Oh and feel free to tell me if I’m an idiot and I should be doing something else… totally open for feedback!)

  • Charlene

    Awesome post! Easy to understand! But now I’m wondering what I’ve done wrong…does this work If I’m linking an image instead of text? Here’s my code, which downloads the PDF via image click:

    The on-click event doesn’t show in my GA (and it does download the PDF when clicked). Is there something else I need to do (or do differently) to make this work? >>sorry, I don’t know how to prevent this PDF image from showing up! Also my code was condensed to hide what my track event code was…??

Proud Member of BlogHighEd University Web Developers eduStyle

© .eduGuru - Internet Marketing and Web Development in Higher Education and other tidbits…. Powered by Wordpress. | Advertiser policy