@cmss/sensor-report
v1.0.0
Published
sensor report helper library
Downloads
34
Keywords
Readme
介绍
神策 SDK 是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个 icon 点击次数、观看某个视频的时长等等。 该包针对移动云接入神策 SDK 进行一个二次封装,用于简化移动云上云产品的事件埋点上报。
功能
封装了神策埋点上报初始化,屏蔽环境差异;
内置浏览器部分性能监控指标,如 fp_time、fcp_time、fcp_time;
实现了一个 vue 的自定义指令 v-sensor-report,支持各类 dom 原生事件,如 click、blur,用于自定义埋点上报;
智能化获取自定义上报节点的元素名称;
安装
npm install @cmss/sensor-report --save
快速使用
全埋点
- 在 main.js 文件里进行全局引用
import SensorsReport from '@cmss/sensor-report';
Vue.use(SensorsReport);
- 在 index.html 文件的 head 里新增两个 meta,用于透传公共属性
<meta name="department" content="PaaS" />
<meta name="product" content="Redis" />
- 在 init.js 初始化文件里进行用户 id 接入,用户关联用户信息
import SensorsReport from '@cmss/sensor-report';
SensorsReport.login(userId);
- 提供 enableLog 函数,可动态开闭日志在控制台的打印。建议在生产环境关闭打印
SensorsReport.enableLog(false)
自定义埋点
- 指令式: v-sensor-report (支持各类 dom 原生事件,如 click、blur)
<div
class="content-to-helpcenter"
@click="onNavHelpCenter(Object.values(getHelpDocLink('order'))[4])"
v-sensor-report:click="{
event: 'pruchase_baseConfSubmitClick',
attrs: {
button_name: '订购页-计费模式-了解更多'
}
}"
>
<span>了解更多</span>
</div>
<bInput
v-model="orderObject.name.text"
placeholder="请输入实例名称"
style="width: 270px"
v-sensor-report:blur="{
event: 'pruchase_prdOperateInput',
attrs: {
Input_name: '实例名称',
keyword: null // 无需传值,内置计算
}
}"
></bInput>
- 函数式:SensorsReport.report
SensorsReport.report(event, {
source: null,
lcp_time: null, // 使用google推荐的lcp
fcp_time: null,
});