单页应用跟踪

一、概览

单页应用（SPA）是指在首次加载网页时加载浏览整个网站所需全部资源的网络应用或网站，所有的操作都在这张页面上完成，都由JavaScript来控制。 在传统网站上运行百度统计的跟踪代码hm.js没有任何问题，因为每次加载页面都会运行一次。但是对于SPA来说，页面的更新是通过JavaScript更新页面内容，而不是把整个页面重新加载一遍，因此hm.js只会运行一次，之前我们都是推荐使用JS API来完成对SPA的统计。

二、在管理中开启跟踪

在百度统计>管理>单页应用设置中，打开开启按钮即可对SPA进行统计。

注意：开启后，需要确保自己的站点中已经移除了其他跟踪代码（例如_trackPageview）以免发送重复日志。

三、使用JS API跟踪

百度统计提供了插件的调用方法来支持更加丰富的统计功能。

• UrlChangeTracker

UrlChangeTracker是用来监听SPA路由变化并自动发送pv日志的插件，支持History API和hashchange。

• 使用

在页面中引入如下代码：

var _hmt = _hmt || [];
_hmt.push(['_requirePlugin', 'UrlChangeTracker', {
  shouldTrackUrlChange: function (newPath, oldPath) {
	return newPath && oldPath;
  }}
]);

注意：插件不支持覆盖，即只允许调用一次，多余调用视为无效操作。

• 配置

shouldTrackUrlChange默认为：

function shouldTrackUrlChange(newPath, oldPath) {
  return newPath && oldPath;
};

注意：这个方法只会在newPath和oldPath不相等的情况下触发。

• 示例

query string相同的url不发送pv日志

var _hmt = _hmt || [];
_hmt.push(['_requirePlugin', 'UrlChangeTracker', {
  shouldTrackUrlChange: function (newPath, oldPath) {
	  newPath = newPath.split('?')[0];
	  oldPath = oldPath.split('?')[0];
    return newPath != oldPath;
  }}
]);

• 疑问

Q: 有/a，/b两个页面，比如我想排除b页面，从而进行了如下设置，那么从a页面跳到b页面再跳回a页面，为什么没有pv发出？

var _hmt = _hmt || [];
_hmt.push(['_requirePlugin', 'UrlChangeTracker', {
  shouldTrackUrlChange: function (newPath, oldPath) {
    return newPath !== '/b';
  }}
]);

A: 我们认为屏蔽了某个path之后，就相当于这个path不存在了，从a跳到b再跳回a，我们会视为该用户一直停留在a页面，自然而然也不会有pv日志发出。如果从a跳到b又跳到了c，我们也会按照用户是从a直接跳到了c进行处理。同样如果用户设置了return oldPath !== '/b'，这个时候一旦用户访问的第一个页面是b页面，那么永远不会有pv日志发出。shouldTrackUrlChange这个配置项非常灵活，所以需要大家谨慎使用。