@cmss/sensor-report

sensor report helper library

Usage no npm install needed!

<script type="module">
  import cmssSensorReport from 'https://cdn.skypack.dev/@cmss/sensor-report';
</script>

README

介绍

神策 SDK 是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个 icon 点击次数、观看某个视频的时长等等。 该包针对移动云接入神策 SDK 进行一个二次封装，用于简化移动云上云产品的事件埋点上报。

功能

  1. 封装了神策埋点上报初始化，屏蔽环境差异;

  2. 内置浏览器部分性能监控指标，如 fp_time、fcp_time、fcp_time;

  3. 实现了一个 vue 的自定义指令 v-sensor-report，支持各类 dom 原生事件，如 click、blur，用于自定义埋点上报;

  4. 智能化获取自定义上报节点的元素名称;

安装

npm install @cmss/sensor-report --save

快速使用

全埋点

  1. 在 main.js 文件里进行全局引用
import SensorsReport from '@cmss/sensor-report';

Vue.use(SensorsReport);
  1. 在 index.html 文件的 head 里新增两个 meta，用于透传公共属性
<meta name="department" content="PaaS" />
<meta name="product" content="Redis" />
  1. 在 init.js 初始化文件里进行用户 id 接入，用户关联用户信息
import SensorsReport from '@cmss/sensor-report';

SensorsReport.login(userId);
  1. 提供 enableLog 函数，可动态开闭日志在控制台的打印。建议在生产环境关闭打印
SensorsReport.enableLog(false)

自定义埋点

  1. 指令式： 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>
  1. 函数式：SensorsReport.report
SensorsReport.report(event, {
  source: null,
  lcp_time: null, // 使用google推荐的lcp
  fcp_time: null,
});