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

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 - this link is outdated).

The method _setAllowAnchor is described on the Google Reference Site.

Answer 2

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 3

If you want to track in-page anchor clicks, the following would work globally:

window.onhashchange = function() {
  _gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);
}

Beware that if you have some specific onclick handlers such as

 $('#someid a').click(function(event){
   event.preventDefault();
   var target = $(this).attr('href');
   // some more clever stuff
 });

You would need to manually prepend the hash to trigger the onhashchange

 $('#someid a').click(function(event){
   event.preventDefault();
   var target = $(this).attr('href');
   // triggers onhashchange
   location.hash = target;
   // some more clever stuff
 });

Answer 4

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 5

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 Analytics parameters as hash values, not send your hash value.

   From the guide quoted in Török Gábor's answer, 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.

2. Rob Knight's 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 6

https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiCampaignTracking

_gaq.push(['_setAllowAnchor', true]);