前端埋点获取pv uv信息

前端埋点获取pv uv信息

• 1.router路由拦截
• 2.自定义埋点指令

1.router路由拦截

使用router得beforeEach钩子函数拦截

router.beforeEach((to, from, next) => {get_userinfo(to, from);next();
});

获取详细信息

let ip = null;
getAddressInfo().then((address: IAddress) => {ip = address.ip})
//获取开始时间
let startTime = Date.now();
//定义一个获取用户的函数
const get_userinfo = (to, from) => {//获取当前时间let currentTime = Date.now();let Brow_history = {preUrl: from.path,preTitle: from.meta.title,currentUrl: to.path,currentTitle: to.meta.title,prePage_browTime: (currentTime - startTime) / 1000 + "s",user: null,kernel: getKernelVersion(),//获取版本信息os: getOs(),//获取系统信息address: ip,start_time: formatDate(startTime, 'yyyy-MM-dd hh:mm:ss'),end_time: formatDate(currentTime, 'yyyy-MM-dd hh:mm:ss')};Brow_history.user = JSON.parse(sessionStorage.getItem("user"));var str = '用户由 ' + from.path + ' 页面 跳转到 ' + to.path + ' 页面,停留了 ' + (currentTime - startTime) / 1000 + "s";alert(str);//此处可写入库逻辑//初始化开始时间startTime = Date.now();console.log("======== 分割线 ========");
};

2.自定义埋点指令

拦截按钮点击埋点，在页面引入以下文件

创建文件directive.ts

import Vue from "vue";
Vue.directive("track", {bind: (el, binding,) => {if (binding.value) {//这里参数是根据自己业务可以自己定义let params = {currentUrl: binding.value.currentUrl,actionType: binding.value.actionType,title: binding.value.title,// preUrl: binding.value.preUrl,frontTriggerType: binding.value.triggerType,// businessCode: binding.value.businessCode,behavior: binding.value.behavior,// service: "xxx",};//如果是浏览类型，直接保存if (binding.value.triggerType == "browse") {console.log("browse", params);//调用后台接口保存数据// api.eventTrack.saveEventTrack(params);} else if (binding.value.triggerType == "click") {//如果是click类型，监听click事件el.addEventListener("click",() => {console.log("click", params);alert(params.currentUrl);//调用后台接口保存数据// api.eventTrack.saveEventTrack(params);},false);}}},
});

在具体按钮中加上调用指令

 <a-button type="primary"v-track="{triggerType:'click', title:'查询',currentUrl: this.$route.Path,behavior:'点击查询'}">查询</a-button>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！