CODEWITHSUNDEEP
htmlgoogle-analytics
Kyle
Kyle

Reputation: 22045

How to use google analytics with HTML 5 History?

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?

Upvotes: 10

Views: 5298

Answers (3)

frostymarvelous
frostymarvelous

Reputation: 2805

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

Upvotes: 6

Daniel Castilla
Daniel Castilla

Reputation: 1

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.

Upvotes: 0

Ewan Heming
Ewan Heming

Reputation: 4648

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']);

Upvotes: 17

Related Questions