代码拉取完成，页面将自动刷新
Vue3 前端埋点插件。主要功能有PV&UV统计、用户页面时长统计、click指令形式埋点、手动上报埋点事件。
npm install v-tracking -S
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import vTracking from "v-tracking";
const app = createApp(App);
app.use(router);
app.use(vTracking, Options);
app.mount("#app");
注意
因为涉及到路由检测，所以必须配合vue-router使用
公共参数，每次上报都会携带的参数，比如用户的登录信息 uid 等
上报的后台请求地址，后端接口需按照前端请求参数设计
PV&UV&TP 事件前缀，一般用于区分不同项目等（建议和普通事件前缀一致）
是否统计页面 UV&PV&PT
app.use(vTracking, {
baseParams: {
uid: 123
},
baseUrl: "http://example/event",
prefix: "app",
isVisTP: false,
});
<template>
<div>page1</div>
<div v-click="{ eventName: 'test1' }">click</div>
</template>
后台接收数据格式为
{ uid: 123 , eventName: "test1" }
<template>
<div>page1</div>
<div @click="track">click</div>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
//手动上报事件
const track = ()=>{
proxy.$vtrack({ eventName: 'test1' })
}
</script>
后台接收数据格式为
{ uid: 123, eventName: "test1" }
isVisTP为 true 时候插件会自动上报每个页面进入时的数据，其中后台接收数据格式为
{ uid: 123, UPVEventName: `${prefix}_${path}` }
其中path为页面路由路径，如/page1
isVisTP为 true 时候插件会自动上报每个页面用户停留时长，其中后台接收数据格式为
{
uid: 123,
TP: { path: "/page2", time: 1269446 },
}
time 则表示时长（ms）
当你在main.js中无法获取公共数据的时候,你可以在获取到公共数据比如登录信息 uid 等的时候调用manualInto进行Options注入。注意: Option.isVisTP手动注入无效,需在main.js中传入是否开启
import { manualInto } from 'v-tracking'
/**
* @param {*} options 同Options
* @param {String | undefined} path 当前页面路由，不传手动注入则不会统计到当前页的UPV
*/
manualInto({
baseParams: {
uid: 122133,
userAgent: "Chrome",
},
baseUrl: "http://example/event",
prefix: "app222"
},'/xxx')
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手