Is it possible to track hash links like pages with google analytics?

JavascriptJqueryGoogle Analytics

Javascript Problem Overview


Is it possible to track hash links like pages with google analytics?

For example, I want index.php/#1, index.php/#2, and index.php/#3 to all show up as individual page hits with individual time spent on page.

If there is no simple way of doing this, how can I add a track event to an onclick event with jquery? Can I still receive accurate time on "page" information this way?

Javascript Solutions


Solution 1 - Javascript

Generically, your code could look like this

_gaq.push(['_trackPageview',location.pathname + location.search  + location.hash]);

You could either bind that code to every time you have a hash change within your application, or you could use a generic hashchange plugin, that uses the HTML5 onhashchange, and some backwards compatible hacks for older browsers, and bind this code to that event, so that it fires every time your hash changes.

Using that plugin, your code could look like:

$(window).hashchange( function(){
    _gaq.push(['_trackPageview',location.pathname + location.search  + location.hash]);

})


UPDATE 2014:

This is how you'd do this in the new Universal Analytics:

ga('set', 'page', location.pathname + location.search  + location.hash);
ga('send', 'pageview');

Note from Google Analytics documentation:

> While technically the send command for pageview hits accepts an optional page field as the third parameter, passing the page field that way is not recommended when measuring single page applications.

This is how you'd do it if you're using Google Analytics within Google Tag Manager:

  • Go to your macros
  • Updated the URL Macro to "Fragment"

Solution 2 - Javascript

Looks like this might be useful too: https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Very helpful with clear 'What to do' and 'What not to do'

Solution 3 - Javascript

Google Analytics allows you to track custom events, for example AJAX page loads.

(The usual caveats apply when doing this - hopefully there are non-javascript ways to access the same data :)

Solution 4 - Javascript

Good question. To track the hash link, you must track an event or a pageview, for every link to this hash. For the pageView, a sample code is below

onclick="_gaq.push(['_trackPageview','/page/hashLink1']);"

Note: This method create a virtual page view that is summing up to the count of the pages of your site. If your site is a big html files with anchors (maybe there is a slider to this page), this method gives you an estimated of the interaction of the user with your "content"

Solution 5 - Javascript

For new universal tracking this doesn't work anymore. You will have to go to https://developers.google.com/analytics/devguides/collection/analyticsjs/events and update to something like

ga('send', 'event', 'category', 'action', {'page': '/my-new-page'});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaveView Question on Stackoverflow
Solution 1 - JavascriptYahelView Answer on Stackoverflow
Solution 2 - JavascriptkatjamView Answer on Stackoverflow
Solution 3 - JavascriptGarethView Answer on Stackoverflow
Solution 4 - JavascriptkeatchView Answer on Stackoverflow
Solution 5 - JavascriptbenpalmerView Answer on Stackoverflow