How to use google analytics with HTML 5 History? - html

Question

I'm using HTML 5 history for my site, so, for users whose browsers support it, clicking on a link doesn't reload the whole page, but just the main area.
Google analytics doesn't track these partial page loads. How can I get it to track it just like it does for users that don't have HTML 5 history support?

Answer 1

You just need to register the additional pageviews by calling the _trackPageview function again each time your new content loads. This is called a 'Virtual Pageview' but is registered in Google Analytics in the same way as a real one. To set the path of the page you need to add an additional parameter to the function:
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/new/content']);

Answer 2

This is for the newest Universal Tracking Code.
So recently, I had to revisit my own answer for a new project. I noticed some issues that I should clean up.
To send a pageview programmatically, you want to send only the Path and the Query eg. for http://example.com/path/to/resource?param=1 we will send /path/to/resource?param=1.
Some SPAs use HashBangs (#!) for their urls. So we need to send anything after the Hashbang. e.g. http://example.com#!path/to/resource we will send /path/to/resource?param=1.
The earlier version of my solution was erroneous and would fail for all urls which had a hash in the url. Also, as I was using jQuery + History.js plugin my solution was along of listening to statechange came from there.
Use this new code to send a pageview. It is more resilient and caters for both hashbangs and history.
var loc = window.location,
hashbang = "#!",
bangIndex = location.href.indexOf(hashbang),
page = bangIndex != -1 ? loc.href.substring(bangIndex).replace(hashbang, "/") : loc.pathname + loc.search;
ga('send', 'pageview', page);
If you don't use Hashbangs specifically, simply change hashbang = "#!", to match e.g. hashbang = "##",
The second part of this is detecting when the url changes. For this, you will need to find out from the docs of whatever library you are using.
For jQuery + History.js plugin, the code below works
$(window).on('statechange', function() {
//put code here
});
More information can be found at https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
$(window).on('statechange', function() {
var loc = window.location,
page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search;
ga('send', 'pageview', page);
});

Answer 3

As Ewan already stated, you should send the pageview to analytics in the window.popstate event.
So, in plain javascript, if you have called:
history.pushState({'statedata':''}, 'title', '/new/page/url');
you should simply add:
window.addEventListener('popstate', function(event) {
ga('send', 'pageview');
});
Actually the new Universal Tracking Code automatically gets the current URL, so you don't really need to pass the extra parameter.