一、数据埋点的意义

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

 二、如何在项目中接入埋点

1) 安装前端需要的sdk包

cdn地址 

 https://github.com/sensorsdata/sa-sdk-javascripthttps://github.com/sensorsdata/sa-sdk-javascript

npm 安装依赖

npm install --save sa-sdk-javascript

 2) 集成神策分析

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'
  }
})

3) 埋点

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

Vue.prototype.$sensors = sensors

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

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

公共属性埋点

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

事件埋点(页面上事件用这个)

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

到这里项目中的数据埋点已经上报,登录神策查看数据是否上报成功

三、 在神策中查看埋点数据

 

Logo

前往低代码交流专区

更多推荐