It’s no secret that everything you do on the Internet can be tracked, watched, and analyzed. The amount of information that we can gather is… well… creepy… to say the least. I wouldn’t worry too much though, as most people really don’t care who you are and are not recording that. Using the Google Analytics Event Tracking API, we can get nice statistics for everything from browser window size, to outbound links, to downloads, all the way to what people are copying off of your pages.

This post was inspired by Zach’s browser window dimensions tracking post. I won’t cover tracking browser size here, as he’s done a great job of explaining what’s going on with it his blog post. He also gives a nice introduction to event tracking:

The new BETA _trackEvent method allows us to set both custom text and numerical values for better reporting, it is more configurable, and it does not inflate your Visitors or Content reports. —Zach Johnson

Okay… event tracking sounds awesome, so let’s get down to it.

Note that event tracking is a beta feature in Google Analytics and not every account has access to it yet. You can prod Google a little by signing up for the Trusted Tester Program, but there are no guarantees of being accepted.

I've currently only been running and testing events for a couple of weeks. Here's a sample of what I'm seeing in my Event Tracking section:

Download Events

The first, most important, and least creepy thing that I wanted to track with the Event Tracking API was file downloads. Most people are currently accomplishing this by adding an onclick event handler into the HTML and manually tracking clicks as page views, but file downloads don’t have much in common with page views, so they are better categorized as events. So, I had three things that I wanted to track on file downloads:

• Number of downloads
• Location of file (and file type)
• What keywords are used in the link

Tracking downloads is actually a pretty simple task with some basic knowledge of JavaScript. I’ve used jQuery to bind event listeners to any link with the class download, but this snippet could fairly easily be adapted for other frameworks or libraries.

JavaScript Code

// Select all links with class 'download'
$('a.download').each(function() {
    // Double check that the link includes a file type at the end of the string using a regular expression
    if($(this).attr('href').match(/[.](\w+)$/)) { 
        // Bind a function to the click event
        $(this).bind('click', function(event) {
            // Track as category: 'Downloads', label: link of file, optional_label: text of link
            pageTracker._trackEvent('Downloads', $(this).attr('href'), $(this).text());
        });
    }
});

Outbound Links

This one is also pretty simple, but getting to the point of being unnecessary and a bit intrusive. On the other hand, tracking what outbound links people are clicking to get away from your site can help you gauge whether or not you're losing your visitors to an outbound link too much.

Again, this uses jQuery to iterate over all links in a document and binds the event listener only to the appropriate outbound links, but could easily be adopted to another framework.

JavaScript Code

$('a').each(function() {
    var href = $(this).attr('href');
    // verify that the href includes an http or https protocol 
    // and also require that the href includes the hostname of the current page
    if( href.match('http://|https://') && href.indexOf(window.location.hostname) == -1) {
        $(this).bind('click', function() {
            // Track as category: 'Outbound Link', label: link, optional_label: the current page
            pageTracker._trackEvent('Outbound Link', $(this).attr('href'), window.location.pathname);
        });
    }
});

Going Too Far: Copying and Right Click Events

Besides always being curious as to what images people are yanking from my site, I’ve also been really curious as to what text was being copied. While we can’t track copy events that are used from a computer’s internal system, we can still get a good number of events from key commands. I also feel it’s pretty safe to assume that any right clicking on images are a sign of someone trying to either copy the image itself or the location of the image for use with hotlinking.

Over the past few weeks, visitors to my site have been copying the following text:

I won’t go into too much detail explaining the following snippets, but feel free to copy¹ and use it on your site and see what your visitors are copying. Note that it currently only works for Firefox, Safari, Internet Explorer 6+, and Opera (on Windows only).

JavaScript Code

// Copy Keyboard Shortcut
function trackCopyEvent(type, selection) {
    pageTracker._trackEvent('Copy', type, selection);
}

$(document).bind('keypress', function(event) { // Safari and Firefox
    if( (event.charCode == 99 && (event.metaKey || event.ctrlKey) ) && window.getSelection ) {
        var selection = String(window.getSelection() + '').truncate(60);
        trackCopyEvent('text', selection);
    }
});
$(document).bind('keyup', function(event) { // Opera Windows and Internet Explorer
    if( event.keyCode == 67 && event.ctrlKey ) {
        if( document.getSelection ) { // Opera Windows
            var selection = document.getSelection().truncate(60);
	        trackCopyEvent('text', selection);
        } else if( document.selection ) { // Internet Explorer
            var selection = document.selection.createRange().text.truncate(60);
	        trackCopyEvent('text', selection);
        } 
    }
});

// Context Menu
$(document).bind('contextmenu', function(event) {
    if(event.target.nodeName == 'img') {
        var image = $(event.target).attr('src'));
        trackCopyEvent('image', image);
    }
});

Footnotes

¹By copying this snippet to track what people copy, you should already understand that I’m tracking you copying it. Creepy, isn’t it?