vue 项目中神策埋点

如何配置神策埋点信息？

1.安装依赖

npm install --save sa-sdk-javascript

2.项目配置

在 utils 文件夹下新建 sensors.js，配置单页应用的固定代码，（非单页应用不需要加上配置对象： is_track_single_page: true）。

import sensors from 'sa-sdk-javascript'

sensors.init({ // 神策系统配置
  server_url: 'http://shence.ap-ec.cn:8106/debug', // 数据接收地址
  is_track_single_page: true, // 单页应用页面浏览事件采集(url改变就触发)
  use_app_track: true,
  show_log: false, // 控制台显示数据开关
  heatmap: { // 热图设置 default开启 not_collect关闭（详细配置解释看官方文档）
    clickmap: 'default', // 点击热图，收集点击事件
    scroll_notice_map: 'default', // 视区热图，收集页面区域停留时间
  }
})

sensors.quick('autoTrack') // 首次触发页面加载事件 $pageview
export default sensors

3.全局注册神策埋点

在 main.js 文件中，将神策埋点信息挂载到 vue 实例下，操作如下：

import sensors from '@/utils/sensors.js'
Vue.prototype.$sensors = sensors

如何埋点？

1.自动采集事件埋点

主要用于主动触发页面浏览事件，一般只在页面配置后调用一次即可。

sensors.quick('autoTrack')

2. 事件埋点

事件名+传递参数（必须是对象）+回调函数

this.$sensors.track('ViewSupplyChainDetails'[, param][,callback])

3.公共属性埋点

const param = {
  platform_type: 'WEB', // 平台类型：App，H5，Web
  app_name: '沐甜商城网站', // 应用名称
  product_line: '白糖',
}
sensors.registerPage(param) // 设置公共属性