如何在HTML 5历史记录中使用谷歌分析？

Question

我正在为我的网站使用HTML 5历史记录,因此,对于浏览器支持它的用户,单击链接不会重新加载整个页面,而只是重新加载主要区域.

Google Analytics不会跟踪这些部分网页加载.如何让它跟踪没有HTML 5历史记录支持的用户？

Answer 1

您只需要在_trackPageview每次加载新内容时再次调用该函数来注册其他综合浏览量.这称为"虚拟网页浏览",但在Google Analytics中以与真实网页浏览相同的方式注册.要设置页面的路径,您需要向函数添加其他参数:

        _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        _gaq.push(['_trackPageview', '/new/content']);

Answer 2

这是最新的通用跟踪代码.

最近,我不得不重新审视自己对新项目的回答.我注意到一些我应该清理的问题.

要以编程方式发送网页浏览,您只想发送路径和查询,例如.因为http://example.com/path/to/resource?param=1我们会发送/path/to/resource?param=1.

一些SPA使用HashBangs(#!)作为其URL.所以我们需要在Hashbang之后发送任何东西.例如,http://example.com#!path/to/resource我们会派/path/to/resource?param=1.

我的解决方案的早期版本是错误的,并且对于在url中具有哈希的所有URL都将失败.另外,当我使用jQuery + History.js插件时,我的解决方案就是statechange从那里听取.

使用此新代码发送综合浏览量.它更具弹性,适合混乱和历史.

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

如果您没有专门使用Hashbang,只需更改hashbang = "#!",以匹配例如hashbang = "#@",

第二部分是检测网址何时发生变化.为此,您需要从您正在使用的任何库的文档中找到.

对于jQuery + History.js插件,下面的代码可以使用

$(window).on('statechange', function() {
    //put code here
});

有关详细信息,请访问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);
});