vue项目中使用神策埋点统计按钮点击次数

1、问题
用户提出需求：需要统计当前页面中各个按钮点击次数来达到分析用户对各个功能的关注度。
方案就选择神测数据埋点来实现功能。
① 首先创建sensors,js文件进行初始化配置

const sensors = require('sa-sdk-javascript')
sensors.init({
  server_url: '数据上传地址', // 后续根据用户提供地址进行修改
  is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  use_client_time: true,
  send_type: 'beacon',
  // show_log: true,
  heatmap: {
    // 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: 'default',
    // 是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
    scroll_notice_map: 'not_collect'
  }
})
sensors.registerPage({
  current_url: location.href,
  referrer: document.referrer,
  product_name: 'xxxx',
  platform_type: 'H5'
})
sensors.quick('autoTrack')

export default sensors

② 在main,js中引入使用

import sensors from './utils/sensors'
Vue.prototype.$sensors = sensors //注册为全局方法

③ 在页面中使用 一般为sensor.track方法

//第一个参数为用户提供的事件名
//第二个参数为一个对象 key值也是用户提供
//里面的内容也是根据需求定
     this.$sensors.track('xxxxx', {
        name: '首页', //页面名称
        btnName:'查询按钮', //按钮名称
        searchValue:'a' //搜索词
      })

④ 以上就是实现了一个简单的埋点统计，在每次点击统计的元素时在控制台可以看到神策数据发送的请求

⑤ 通过神测数据提供的解码工具可以解码统计的数据
神策SDK数据解码