stat.js
前端埋点通用方案，支持加载、点击、曝光统计，支持声明式、命令式。
使用方式
stat.js导出为umd模块。
脚本引入
通过script标签引入后，全局变量Stat即为模块。
<script src="//path/to/stat.js" charset="utf-8"></script>模块引入
var Stat = require('path/to/stat.js');HTML标签属性形式声明
支持三种行为统计：点击、曝光、加载，对应以下示例中stat-click、stat-view、stat-load属性。点击，指元素被click一次则发送一个请求。曝光，指元素进入可见范围时发送一个请求，可选择是否仅统计一次，可选择是否元素全部进入可见范围才算作曝光。加载，指元素在页面中加载时发送一个请求。
需要为统计对象定义编码，例如“首页feed流中的项”的统计编码为key1。统计编码在HTML标签中的属性名可自定义，以下示例中为stat-code。
可以为统计对象通过HTML标签属性的方式指定统计请求所要携带的统计数据。统计数据在HTML标签中的属性名可自定义，以下示例中为stat-data。如果使用stat-data定义统计数据，则属性值最好是JSON字符串。也可以通过stat-data-paramname="paramvalue"的方式定义统计数据，如以下示例中的stat-data-name。
<a stat-click stat-code="key1" stat-data='{"name":"a1"}' href="javascript:void(0);">click this</a>
<div stat-view stat-code="key2" stat-data='{"name":"div1"}'>view this</div>
<div stat-view stat-code="key2" stat-data-name="div2" style="position:absolute;top:2000px;left:0px;">view this</div>
<div stat-view stat-code="key4" stat-data-name="div3" stat-view-once="false" style="position:absolute;top:2100px;left:0px;">view this</div>
<a stat-click stat-view stat-load stat-code="key3" stat-data-name="a2" href="javascript:void(0);">click or view this</a>JavaScript API调用
config
配置。
Stat.config({
defaultDataAttr: 'stat-data', // 统计数据的HTML标签属性名
defaultCodeAttr: 'stat-code', // 统计编码的HTML标签属性名
'key1': {
data: function (node) { // 通过函数定义编码为key1的统计对象需要携带的数据
return {
url: node.getAttribute('href')
};
}
},
'key2': {
view: { // 设置编码为key2的统计对象的曝光统计
once: true, // 是否仅统计一次，默认为是
whole: false // 是否元素全部进入可见范围才算作曝光，默认为否
}
},
sendBy: { // 设置统计请求的发送方式，默认为图片请求
type: 'image',
url: function () {
return '//some-domain.com/some-path';
}
}
});bind
绑定。
Stat.bind($target, 'click', {
code: 'key1',
data: (function (el) {
return {
url: el.href,
text: el.innerText
};
})($target)
});check
检查绑定状态。
var bindingStatus = Stat.check($target);
bindingStatus.click && console.log('Target element has bound click-type stat.');unbind
解绑。
Stat.unbind($target, 'click');send
发送统计请求。
Stat.send('view', $target);
Stat.send('view', {
code: 'key1',
data: {
name: 'a1'
}
});forceAllViewStat
强制检查所有需要曝光统计的元素，一般用于动态改变html元素的情况。
Stat.forceAllViewStat();可能发生的问题
如果在埋点统计的绑定事件执行之前，元素已绑定了事件并在事件处理时阻止了默认行为（e.preventDefault()），那么绑定的统计事件可能不会被触发。这时请考虑取消对默认行为的阻止，酌情变通。
Build
stat.js依赖jQuery或Zepto，但可以选择是否将jQuery或Zepto打包进代码中。
npm run build # 默认包含jQuery
npm run build:jquery-in # 包含jQuery
npm run build:jquery-out # 不包含jQuery
npm run build:zepto-in # 包含Zepto
npm run build:zepto-out # 不包含ZeptoTODO
- 区域停留时间
License
Copyright © 2017-present, shenfe