Vue利用神策数据实现前端埋点

在我们前端日常开发过程中经常会有前端埋点接入的需求，特别是涉及到一些例如支付数据，点击捕获错误等信息，埋点日志的上报是必不可少的环节，接下来记录一次我在项目中埋点的简单封装，供大家参考。

埋点安装

标题也有说，我们用的是 神策埋点平台 提供的 JS SDK。

pnpm install sa-sdk-javascript

参数配置

一般情况我们都在项目外层 utils 文件中创建一个 sensor.js 文件，创建一个埋点实例：

import sensors from 'sa-sdk-javascript'

// 一些动态的参数需要我们和服务端商议自行填写

sensors.init({

    name: 'sensors',
    
    server_url: '', // 服务端接受数据地址
    
    show_log: false, // 不输出 log 到控制台

    cross_subdomain: false, // 不在根域下设置 cookie
    
    is_track_single_page: true, // 表示是否开启单页面自动采集 $pageview 功能，SDK 会在 url 改变之后自动采集 web 页面浏览事件 $pageview。
    
    heatmap: {
    
  // 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
  clickmap: 'not_collect',
  
  // 是否开启触达注意力图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
  scroll_notice_map: 'not_collect'
  
}
})

sensors.registerPage({
    current_url: location.href,
    referrer: document.referrer
})

sensors.quick('autoTrack')

window.sensors = sensors

export default sensors

最后方便使用，我们自行封装 sendSensors.js。

import { APP_ENV } from '@/config'
import moment from 'moment'
import { userInfoStore } from '@pinia';
/**
 * 神策数据埋点 主站神策数据初始化后挂载到 window 对象
 * @param {*} eventName 自定义事件名称
 * @param {*} data 数据
 * @param {*} callback
 * @param {*} alwaysCallback
 */

export default function sensorsTrack (
  eventName,
  data = {},
  callback = () => {},
  alwaysCallback = true
) {

  try {
    const prefix = APP_ENV === 'production' ? '' : APP_ENV + '_'
    if (!eventName) {
      callback()
      return
    }
    const userStore = userInfoStore()
    let commonPonintsParams = {}
    if (userStore) {
      const { id, name, school_id, school_name } = userStore
      // 通用参数 为了保证获取参数的时机不过于提前，公共参数不提取到函数外
      commonPonintsParams = {
       
      }
    }
    const paramTemp = Object.assign({}, commonPonintsParams, data)
    if (window.sensors) {
      eventName = prefix + eventName
      window.sensors.track(eventName, paramTemp, () => {
        callback()
      })
    } else if (alwaysCallback) {
      callback()
    }
  } catch (e) {
    console.log(e)
    callback()
  }
} 

然后在全局挂载在项目入口 main.js：

//main.js

import App from './App.vue';
import '@/utils/sensors';
import pinia from './pinia';
import router from '@/router';

// 创建 vue 实例 
const app = createApp(App);

app.use(pinia);
app.use(router); 
app.mount('#app');

在组件内使用:

// 引入
import sensorsTrack from '@/utils/sendSensors.js'

// 需要上报的事件 || 函数内添加
sensorsTrack('事件名', 上报参数, callback()) || sensorsTrack('事件名', 上报参数)