HankLiu 前端埋点处理
前端埋点JS-SDK
安装
npm install @hankliu/event-tracking -D
or
yarn add @hankliu/event-tracking -D
使用说明(重要)
为了对埋点事件的统一管理，请遵循以下约定。样例代码，请根据实际项目，自行修改。
所有的上报事件中都要包含appId, appVersion字段, 否则埋点将无法上报.(Andriod 和 iOS 将通过 JSBridge 获取, 无需以下操作)
| 名称 | 说明 |
|---|---|
| appId | 应用在发布系统中的Id |
| appVersion | 应用的版本 |
第一步、配置 APPID 和 APPVERSION
- in webpack with DefinePlugin
const packageJson = require('../package.json');
const webpack = require('webpack');
const webpackConfig = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
APPID: JSON.stringify('xxx'),
APPVERSION: JSON.stringify(packageJson.version)
}
})
]
}第二步、将 APPID 和 APPVERSION 注册到全局对象
- in index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="format-detection" content="telephone=no">
<script>
window.HANKLIU_APPId = <% process.env.APPID %>
window.HANKLIU_APPVERSION = <% process.env.APPVERSION %>
</script>
</head>
<body></body>
</html>第三步、使用案例
ES6 Module方式
import EventTracking from '@hankliu/event-tracking';
EventTracking.sendEvent({
eventId: '10001',
eventType: 1,
eventValue: '1200'
}, {
delayReport: true
});script方式
<script src="https://statics-lib.xxx.com/event-tracking/1.0.0/event-tracking.js"></script>
<script>
HANKLIU_EVENT_TRACKING.sendEvent({
eventId: '10001',
eventType: 1,
eventValue: '1200'
}, {
delayReport: true
});
</script>当你写好以后，还要注意，先更新版本号，再打包。这样能确保获取正缺的版本号。
配置
{
// 请求的url，分为fat、uat、prod三个环境，根据生成时 process.env.ENV 来自动生成的
url: '',
// 是否延迟上报。延迟上报的内容将存储在[]中，满足上报的个数后，才会上报。
delayReport: false,
// 延迟上报数量。决定了何时进行上报。
delayNumber: 10,
// 失败尝试重新上报的次数, 可选值1, 2, 3
maxReport: 3,
// 日志等级，可选值error, debug。调试阶段，可以在console查看打印信息
logLevel: 'error',
// ajax配置
ajaxOptions: {
timeout: 3000
}
}API
session事件 [deprecated]
/**
* @params {object} data 上报数据
* @params {object} config 配置项
*/
reportSession(data, config)pageview事件
/**
* @params {object} data 上报数据
* @params {object} config 配置项
*/
reportPage(data, config)日志事件
/**
* @params {object} data 上报数据
* @params {object} config 配置项
*/
reportLog(data, config)业务事件
/**
* @params {object} data 上报数据
* @params {object} config 配置项
*/
reportEvent(data, config)修改全局配置
/**
* @params {object} config 全局配置项
* /
setDefaults(config)