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，关于存储空间pinia细讲，请跳转
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(‘事件名’, 上报参数)
标签：
话题：
评论 33
avatar
0 / 1000
发送
最热 最新
1
11天前
点赞
评论
前端开发工程师
是不是这些所谓的埋点 基本都是用别人平台 以及api来实现的呀
27天前
点赞
5
: 不是。我最近俩公司都有大数据部门，数据都是自己分析，所以都是自己写。之前倒是用的神策之类的
25天前
1
回复
作者 : 大部分是第三方，也不乏有自己动手的
21天前
点赞
回复
查看全部 5 条回复
前端
1
28天前
点赞
评论
查看全部 33 条评论
关注
已关注
私信
目录
收起
埋点安装
参数配置
相关推荐
精选内容
找对属于你的技术圈子
回复「进群」加入官方微信群
为你推荐
3月前
2.7k
64
9
7月前
1.1k
27
2
7月前
511
6
5
3年前
9.8k
26
4
1年前
10k
11
2
5年前
74k
1.3k
37
2年前
7.8k
32
评论
1年前
46k
509
39
5年前
27k
713
44
2年前
20k
346
21
3年前
1.7k
9
1
1年前
69k
1.1k
110
1年前
9.0k
103
11
1年前
6.1k
176
26
3年前
46k
814
45
avatar
关注