支持命名空间ga前端打点

先扔个logger的基本实现代码链接:

前端打点的实现原理:

  • 建立一个事件委托模型:

统一处理埋点的捕获。比如我们想获取首页用户点击了N个标签,我们只需要给这些标签加上‘data-log-act’属性,然后在事件委托函数中获取到当前点击目标的‘data-log-act’属性,发送给统计服务器。

  • 使用img的src发送请求:

src标签解决跨域,用img来实现跨域数据

存在的问题:

  1. 公共模块中做了打点,用在不同业务线中如区分?
  2. 打点数据的合并
  3. 打点动作的标记
1
2
3
4
//针对上面三个问题,给dom增加三分标签来解决
data-log-id: 所处的环境标示
data-log-data: 打点需要的数据
data-log-act: action触发的dom动作

例如:ux-member-add 组件如下:

1
2
3
4
5
<div data-log-data='{"b":000}' data-log-id='member'>
<div data-log-data='{"c":111}' data-log-id='item'>
<input type="button" value="添加" data-log-act="add" data-log-data='{"d":333}'/>
</div>
</div>

在云课堂2c的工程中使用了 ux-member-add 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div data-log-data='{"user": "admin"}' data-log-id='edu2c' >
<p>添加用户:</p>
<ux-member-add/>
</div>
//注: 最终发送出去的打点数据为:
{
"user": "admin",
"d": 333,
"c": 111,
"b": 000,
"action":"edu2c_member_item_add_click"
}

最终,能实现action命名空间,和数据的合并;
把公共的数据,例如user等信息,挂载到最顶层的dom元素上。

同样要注意恶意攻击,保持有效数据,token 等还有有必要加的。

代码基本实现移步git(点击我)

2017 年 12月 11日