aigen-log
v1.1.5
Published
## 统计的模式 主要分为`精确统计`和`泛统计`,下面分别介绍。
Downloads
15
Readme
static-log
统计的模式
主要分为精确统计
和泛统计
,下面分别介绍。
精确统计
针对具体的dom元素精确埋点统计,可以记录时长,以及附带自定义信息;
- 点击打点(type: click): 在click事件发生时打点记录
- mouseenter开始,到mouseleave离开(type: enter-leave):记录这段时间长度,并在mouseleave事件发生时发送到后端入库;
- focus当前元素开始,blur当前元素离开(type: focus-blur): 记录这段时间长度,并在blur离开时发送到后端入库;
- (未实现,暂时没有场景需求)点击开始,到mouseleave离开(type: click-leave):记录这段时间长度,并在mouseleave事件发生时发送到后端入库;
其中type值就是埋点时的data-log-type值;
除此之外还有自定义的精确统计项
,后续会介绍。
如何使用
只需要在元素上进行埋点就行了,格式如下:
<div data-log-type="click"
data-log-info={"app": "",category":"control","position":1,"content":{"function":"click","value":"click"}}>
注意不要阻止事件冒泡,因为监听都统一代理在document上;
自定义的精确统计项
对于一些非常个性化的统计逻辑,可以自己记录数据,然后在document
上触发custom-log
事件来记录,
event.detail包含所要记录到数据的内容,格式和上面埋点的data-log-info
属性的内容一样(一个JS对象);
请求接口
地址
测试:https://alpha-metrics.aidigger.com/api/v1/tracking
生产:https://metrics.aidigger.com/api/v1/tracking
参数
- app
- url
- category
- position
- action
- content: {function: '', value: ''}
泛统计
统计所有元素上的click
,focus/blur
,enter/leave
事件
如何使用
需要传递额外自定义数据的话,在body标签中埋点:
<body data-log-info={"key": "value"}>
</body>
请求接口
地址
参数
- url
- position
- action
- content: '{"key": "value"}'
备注
focus/blur
是通过 focusin/focusout
来实现的;
enter/leave
是通过 mouseover/mouseout
来实现的;