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('事件名', 上报参数)

以上关于Vue利用神策数据实现前端埋点的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。