认识百度统计，如何在vue单页面中加入百度统计。

写在前面

PV：页面访问量，即PageView，用户每次对网站的访问均被记录，用户对同一页面的多次访问，访问量累计。 UV：独立访问用户数：即UniqueVisitor，访问网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。

---

作为一个vue单页面应用，如何使用百度统计呢？

注册一个百度统计账号。百度统计
获取代码

获取代码截图

在vue的index.html页面中全局注册百度统计代码

上面的代码基本上就可以实现详情页的统计了，但是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进行统计，如弹窗、路由等，这就使得一个真正页面访问，对应多个路径下的数据，使得页面、站点的统计数据不够准确， 所以需要设置一个关键字，对页面、站点数据进行统一。

有什么问题可以加我的微信，有问必答。

致力于技术分享的厨师