How to use google analytics with HTML 5 History?

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);
});