android 百度统计可视化埋点,数据埋点的说明及百度统计的使用

一、数据埋点的说明

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

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添加的代码不能通过百度统计的代码检查，请忽视。