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

添加对应文件 可根据项目需求 自定义指令（directive)

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