Open in a new Window with Google Event Tracking

Tracks by Steve Crane

Google Analytics event tracking doesn’t play nice when you’re trying to track clicks on links that open in a new window.  I recently ran into this problem on guggenheim.org and found that is a frequently asked, poorly answered question on forums, etc. Here’s how I solved it with a very little bit of jQuery

Before anyone says it, I know that opening links in a new window is one of the worst things you can do. Not my call. Moving on.

Google’s instructions for setting up event tracking involve an ugly bit of onclick attribute, something like:

<a href="link.html"
   onClick="_gaq.push(['_trackEvent', 'Category', 'Action', 'Label']);">
   Link
</a>

I won’t even get into target="_blank". Don’t use that for opening a new window, and it doesn’t work with the above code. The usual alternative, onclick="window.open(this.href); return false;", is itself an ugly bit of onclick attribute. I personally feel that if you need more than one semicolon in an onclick, you’re making a mistake—an attribute should not contain more than one line of code. Combining it with event tracking adds insult to injury:

<a href="link.html"
   onClick="_gaq.push(['_trackEvent', 'Category', 'Action', 'Label']); window.open(this.href); return false;">
   Link
</a>

It also doesn’t work. When I tried this what I got was a link opening in the new window and in the original window. The advice you’ll find on forums (e.g.) is to replace the call to the tracker with a call to a function that calls the tracker:

<a href="link.html"
   onClick="recordOutboundLink(this, 'Category', 'Action'); window.open(this.href); return false;">
   Link
</a>

This doesn’t work for a lot of people and I couldn’t get it to work on guggenheim.org. At this point I was far too frustrated by and bored with the problem to figure out why. We still have three lines of Javascript in an attribute, and now also a function somewhere. I also don’t like the having Javascript and onclicks scattered throughout our CMS like the shrapnel of a bad idea. Enter jQuery.

As a first step, let’s deal with opening new windows. Instead an ugly onclick, we’ll just add a class to the link:

<a href="link.html"class="new-window">Link</a>

And let jQuery know what to do.

$(document).ready(function () {

    /* Generic open in new window function */
    $('a.new-window').click(function () {
        window.open(this.href);
        return false;
    });

});

The immediate advantage is that, once you decide to stop opening links in a new window, you can just remove the “a.new-window” handler. We can also use a class to indicate that a link should be tracked in Google Analytics while also being opened in a new window.

<a href="link.html"class="new-window-track">Link</a>

Along with the Javascript:

function clickTrack(category, action, label) {
    _gat._getTrackerByName()._trackEvent(category, action, label);
}

$(document).ready(function () {

    /* Generic open in new window function */
    $('a.new-window').click(function () {
        window.open(this.href);
        return false;
    });

    /* New window with event tracking */
    $('a.new-window-track').click(function () {
        clickTrack('Category', 'Action', 'Label');
        window.open(this.href);
        return false;
    });

});

By doing it this way I was finally able to open a new window, track the event, and have everything work as expected. I was also happier with the cleaner HTML and single place to look to see what the Javascript was doing.

There is still the problem of setting the category, action, and label for the Analytics report.  That really depends on your reports and your needs. On guggenheim.org I decided to set the action in the title attribute of the link and we use the page where the link was found as the label, so I pass this.title and window.location.pathname for those two values (and my real clickTrack() function is a little more complex).

Perhaps we have some links we want to track while opening in the same window. Just use a different class:

<a href="link.html"class="same-window-track">Link</a>

And at a handler:

function clickTrack(category, action, label) {
    _gat._getTrackerByName()._trackEvent(category, action, label);
}

$(document).ready(function () {

    /* Generic open in new window function */
    $('a.new-window').click(function () {
        window.open(this.href);
        return false;
    });

    /* New window with event tracking */
    $('a.new-window-track').click(function () {
        clickTrack('Category', 'Action', 'Label');
        window.open(this.href);
        return false;
    });

    /* Same window with event tracking */   
    jQuery('a.same-window-track').click(function () {
        clickTrack('Category', 'Action', 'Label');
        return true;
    });

});

This does exactly the same thing as the original onclick version recommended by Google, but it keeps your content and code separate and each of them cleaner. If you were to switch to a different analytics service, you would only have to change the clickTrack() function to make the change sitewide.

Image by Steven Crane, from Flickr.

About these ads

One thought on “Open in a new Window with Google Event Tracking

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s