vue项目中使用神策进行数据埋点

前言：

      在vue种使用神策进行数据埋点

一、数据埋点的意义：

所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this virtual page view），统计操作行为（track this button by an event）。

二、神策埋点的资料：入口

三、具体操作

1、安装前端需要的js的sdk包

（1）cdn地址：

//cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.26/sensorsdata.min.js

（2）npm安装依赖

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) // 设置公共属性

4.给点击事件加触发埋点，使用vue的自定义指令

/**
 * 指令：v-saclick
 * 使用示例：v-saclick="{clickName:'XXX',clickData:{params1:'XXX',params2:'XX'}}"
 * clickName：埋点函数名
 * clickData | Object   params当前埋点函数所需参数
 */
const saclick = Vue.directive('saclick', {
  bind: (el, binding) => {
    el.addEventListener('click', () => {
      const clickName = binding.value.clickName // 携带的数据
      const data = binding.value.clickData || {} //接收传参
      sa.track(clickName, data)
    })
  }
})

export { preventReClick, saclick }

在这里常用的是第二个和第四个！

到此结束！