一、数据埋点的说明

要想获取用户行为信息以及网站使用状况方式主要有：

1、查看后台日志；
2、数据埋点；

第一种方式只能获取很简单的数据，比如用户ip，浏览器型号等，且可读性差，主要是用来给开发人员看来找出问题的。要向获得更详细的信息必须进行数据埋点，而数据埋点也有两种方式：自行设计与使用第三方工具

1、自行设计
优点：（1）控制精准，可以非常精确地选择什么时候发送数据；（2）可以比较方便地设置自定义属性、自定义事件，传递比较丰富的数据到服务端。；
缺点：（1）时间成本高；（2）代价比较大，每一个控件的埋点都需要添加相应的代码，不仅工作量大，而且限定了必须是技术人员才能完成；（3）、更新代价大，每一次迭代更新都需要考虑之前的代码，工作量大；（4）、设计难度高，需要设计人员有相关知识储备来明确数据如何计算，学习成本比较高；

2、集成第三方统计的SDK；
第三方统计主要有：友盟、百度统计、谷歌分析、Sensors Data、GrowingIO、Talking Data等
先说一下缺点：能够覆盖的功能有限，目前并不是所有的控件操作都可以通过这种方案进行定制，但是现在实现的功能应该说是可以满足我们现在以及将来的需求；
优点：当然基本上自行进行代码埋点的缺点就是采用第三方工具的优点；除此之外还有以下好处：
（1）可视化效果好，它会直接根据获得的数据生成表格或者折线图，易于阅读；
（2）不会增加网站负担，代码采用异步加载，不会影响到网站的加载速度；
（3）扩展方式相对简单；

因为对于一个面向B端的web网站来说，并不需要了解用户太多的数据，比如购买转化率、点击热点图、点击路径图等很详尽的信息，所以综合上面的优缺点，我们采用了第三方工具，后续来说如果有需求，我想可以增加一下这些功能，比如：页面上下游（记录访客的点击路径，来研究顾客的访问习惯，从而优化网站）、页面点击图（展示页面上的点击热度）、事件分析（涉及button的点击等）、事件转化、时长转化、页数转化等。

二、百度统计的使用

代码添加

• 静态页面: 百度统计代码安装说明
• vue-ci项目：
  • 在index.html页面添加script

  #相关id更换为自己的
  var _hmt = _hmt || [];
  (function() {
     if (location.origin == 'http://www.baidu.com') {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?3274324063ed5dff62d0f75dd10d966b";
       var s = document.getElementsByTagName("script")[0]; 
       s.parentNode.insertBefore(hm, s);
     }
  )();
  
  

  • 在main.js添加代码

  # 逻辑按真实情况而定
  /** 百度统计，检测url变化 */
  var _hmt = window._hmt || []
  router.beforeEach( (to, from, next) => {
    if (to.path) {
        if (location.origin == 'http://www.baidu.com') {
            _hmt.push(['_trackPageview', '/#' + to.path])
        }
    }
    next()
  })
  

⚠️注意：通过vue添加的代码不能通过百度统计的代码检查，请忽视。