安装

npm install @colin-tools/v-tracking -S

示例

在 main.js 中引入插件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import vTracking from "@colin-tools/v-tracking";
const app = createApp(App);
app.use(router);
app.use(vTracking, {
  //公共参数，一般为用户的登录信息
  baseParams: {
    uid: 123
  },
  //上报后台请求接口
  baseUrl: "http://example/event",
  //PV&UV&TP事件前缀
  prefix: "app",
});
app.mount("#app");

注意

因为涉及到路由检测，所以必须配合vue-router使用

点击指令上报&手动调用上报事件

<template>
    <div>page1</div>
    <div v-click="{ eventName: 'test1' }">test1</div>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
//手动上报事件
proxy.$vtrack({ a: 1 })
</script>

UV&PV

后台接收数据格式

• baseParams 为传入公共数据
• UPVEventName 为后台接收统计 UV&PV 参数
• prefix 为传入前缀，path 为当前路由路径

{ ...baseParams, UPVEventName: "prefix_path" }

页面停留时长（TP）

后台接收数据格式

• path 为路由路径
• time 为在 path 下停留时长

{
  ...baseParams,
  TP: { path: "/page2", time: 1269446 },
}