How to track anchor tags with Google Analytics

Question

I'm trying to track clicks via Google Analytics that do not result in a new request. Specifically, clicks on tabs that are created via the jQuery UI tabs widget. I'm using the older version of the code ('urchin tracker') and trying to log the clicks like so:

$('.ui-tabs-nav li a').click(function() {
    val = "/tab/" + $(this).attr('href');

    // when uncommented, the following line reports, for example:
    //   /tab/#main
    // as expected.
    // console.log(val);

    res = urchinTracker(val);
});

The same method works, in another instance, whose only significant difference, as far as I can tell, is the lack of a hash (#) symbol in the string. Is that character not allowed in a string tracked by urchinTracker(), or could there be some other cause (other than no-one having clicked on the links!)?

Answer 1

In short, Google Analytics can't track on-page links containing a '#' character. A click on index.html#foo is treated simply as a click on index.html, with everything after the '#' ignored.

You could consider escaping the '#' character:

$('.ui-tabs-nav li a').click(function() {
    val = new String("/tab/" + $(this).attr('href')).replace('#', '&');

    // when uncommented, the following line reports, for example:
    //   /tab/#main
    // as expected.
    // console.log(val);

    res = urchinTracker(val);
});

In your example, this would record a page view for /tab/?main, which should work fine with Google Analytics.

Answer 2

By default, Google Analytics disables tracking anchor tags. To enable it for the legacy tracking code, use the following form:

_uanchor = 1;
urchinTracker(val);

Setting a value to variable _uanchor is the equivalent of calling method _setAllowAnchor when using the latest GA code base. (You find a detailed comparison in the Google Analytics Tracking Code Migration Guide).

Answer 3

Sounds like you want Google Analytics Event Tracking the examples use onclick="" rubbish but I bet you could probably bind these to jQuery click events as well.

Answer 4

1. I tried using the _uanchor = 1; method. That does not work. The reason it does not work is that it is designed to send the google analtyics parameters as hash values, not send your hash value.

From the guide quoted above, setting _uanchor to one has the following effects: "When enabled, uses # instead of the default ? to separate the request stem from the query string"; this is in the 'Campaign Tracking' section.

1. The number 2 answer works fine, but I made a small modification. In pseudo code:

   if (href contains ?) { href = href.replace('#', '&'); } else { href = href.replace('#', '?'); }

Not sure if it really matters to GA to have a url like foo.html&bar=baz but it just seemed cleaner to me.

Answer 5

This may be a dumb question, but where should this code be added? With the Google Analytics code or with the JQuary Call?