vue项目中引入神策埋点

转载于 2024-01-17 17:56:09 发布

· 905 阅读

3 ·

版权

原文链接：https://blog.csdn.net/tt1234561009/article/details/130422786

文章标签：

#vue项目中引入埋点

Vue 同时被 2 个专栏收录

92 篇文章

订阅专栏

埋点

2 篇文章

订阅专栏

1.埋点是什么？

埋点：用于跟踪应用使用的情况，记录用户在系统中的操作行为轨迹，后续用来进一步优化产品或提供运营的数据支撑，包括访问数、访客数、停留时长、页面浏览数和跳出率。
埋点采集信息大致分为两大类：页面统计，操作行为统计。

2.引入埋点

npm install --save sa-sdk-javascript

3.集成神策分析（初始化神策配置）

var sensors = require('sa-sdk-javascript')；
sensors.init({
  server_url: 'https://sensors.lianxiaowei.com/sa?project=kaduofen',//数据接收地址
  is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  use_client_time: true,
  send_type: 'beacon',
  heatmap: {
    // 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: 'default',
    // 是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
    scroll_notice_map: 'not_collect'
  }
})

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

Vue.prototype.$sensors = sensors

5.自动采集事件埋点

自动采集事件埋点，主动触发页面浏览事件，一般只在页面配置后调用一次即可。

// 自动采集事件埋点
sensors.quick('autoTrack', {
  platform: 'h5'
})

6.公共属性埋点

// 设置公共属性埋点
sensors.registerPage({
  envirType: process.env.NODE_ENV === 'production' ? 'prd' : 'dev'
})

7.事件埋点（页面上事件用这个）

this.$sensors.track('dingke_personal_view', {
  message1: 'withdraw_verificationcode_view',
  message3: 'withdraw',
  info1: '白条提现、普通提现'
});