认识百度统计，如何在vue单页面中加入百度统计。
2019-08-05 本文已影响0人
一个被程序员耽误的厨师
写在前面
PV：页面访问量，即PageView，用户每次对网站的访问均被记录，用户对同一页面的多次访问，访问量累计。 UV：独立访问用户数：即UniqueVisitor，访问网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。
作为一个vue单页面应用，如何使用百度统计呢？
注册一个百度统计账号。百度统计
获取代码
获取代码截图
在vue的index.html页面中全局注册百度统计代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>资讯部</title>
<script>
var str = location.href.split("?")[1] || '';
var items = str.split("&");
var result = {};
var arr;
for (var i = 0; i < items.length; i++) {
arr = items[i].split("=");
result[arr[0]] = arr[1];
}
// 对详情页的百度统计
var concatUrl = location.hash.split('?')[0]
+ (result.messageFrom === 'hw' ? '?messageFrom=hw' : '');
console.log(concatUrl)
var _hmt = _hmt || [];
_hmt.push(['_setAutoPageview', false]);
_hmt.push(['_trackPageview', concatUrl]);
// 全局引入百度统计插件
(function() {
var hm = document.createElement("script");
hm.src = "获取代码的片段";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
上面的代码基本上就可以实现详情页的统计了，但是vue这种页面是不支持刷新的，所以具体的统计还要在路由设置了进行设置，下面这段代码加在路由设置的主文件里。具体代如下：
router.afterEach(function(to, from) {
if (from.path !== '/') {
console.log(to)
// 有列表页进入详情页的百度统计
const concatUrl = `#${to.path}${to.query.messageFrom === 'hw' ? '?messageFrom=hw' : ''}`;
_hmt.push(['_trackPageview', concatUrl]);
}
});
接下来我们来分析下代码含义:
以上代码都是url统计
_hmt.push(['_trackPageview', pageURL]);
应用：
a、可统计站点、页面的pv、uv、停留时长、转换等；
b、且可统计运营渠道；
c、关键弹窗的访问统计等。
通过设置pageURL参数，可实现灵活的统计。扩展error统计等。
其与域名相关，统计核心为生成的url。为了灵活统计，一个页面的访问，将包含多次域名的访问。如例：
-
a、默认的页面统计
该页的链接如下：http://hity.test.com:8000/poetry?sfrom=jd
在刷新页面时，会形成一个统计数据；使得该url形成统计； -
b、弹窗的统计
页面当中有一个弹窗，需要进行统计；所以，增加了一个虚拟的页面访问url：
let windowName = ‘prize'
_hmt.push(['_trackPageview', router.path + ‘window' + windowName])
生成的统计url为：
http://hity.test.com:8000/poetry/window/prize
- c、vue单页应用的统计方法
如果是vue的单页，在路由跳转时，不会自动生成新页面的url统计（无刷新），但可以手动在router中设置，从而捕获新页面的统计数据：
_hmt.push(['_trackPageview’, to.path])
- d、统计数据的准确度
由于url统计的灵活性，在同一页面中，我们会出现多处使用url进行统计，如弹窗、路由等，这就使得一个真正页面访问，对应多个路径下的数据，使得页面、站点的统计数据不够准确， 所以需要设置一个关键字，对页面、站点数据进行统一。
有什么问题可以加我的微信，有问必答。
致力于技术分享的厨师
