收集⽤户⾏为⽇志—前端vue埋点（⼀）
前端vue收集⽤户⾏为⽇志（⼀）
1.创建⽤于埋点setPoint.js
import Cookies from'js-cookie'
export default{
setPoint:function(etJson){
//main 所属应⽤  cmdata 公共数据  bussdata 业务数据
const params ={ main:'pc-web', cmdata:{}, bussdata:{}}
// 获取事件时间
var myDate =new Date()
= Time()
= pe
params.bussdata.kv = etJson.kv
// Document对象数据
if(document){
}
// //分辨率
if(window && window.screen){
}
// //设备信息
if(navigator){
// 页⾯加载时间
const userId ='603'
// 浏览器唯⼀标识
const uuid = ('uuid')
if(uuid !=null&& uuid !=''){
}else{
const newUuid =ateUUID()
Cookies.set('uuid', newUuid)
}
// 拼接参数串
var args =''
for(var i in params){
if(args !=''){
args +='&'
}
args += i +'='+encodeURIComponent(JSON.stringify(params[i]))
}
// 通过Image对象请求后端脚本
const img =new Image(1,1)
img.src ='192.168.152.102/log.gif?'+ args
},
/
/⽣成唯⼀的UUID
//⽣成唯⼀的UUID
generateUUID(){
let d =new Date().getTime();
if(window.performance &&typeof w ==="function"){
d += w();//us
e high-precision timer i
f available
}
let uuid ='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){
let r =(d + Math.random()*16)%16|0;
d = Math.floor(d /16);
return(c =='x'? r :(r &0x3|0x8)).toString(16);
});
return uuid;
}
}
2.在main.js中添加
//这是我项⽬中setPoint.js的路径
import bPoint from '@/utils/setPoint';
Vue.prototype.bPoint = bPoint;
设置为全局也可在页⾯中直接使⽤
created(){
//页⾯每次刷新收集⼀次⽇志
//可⾃定义数据
/**
* type：事件
* kv： key-value 事件相关数据
*/
const eventJson ={ type: 'browse', kv: { action: '1', currPage: 'documentView', docId: this.documentId }}
this.bPoint.setPoint(eventJson)
},
3.在main.js添加指令
// 埋点指令
js获取json的key和valueVue.directive('bpoint', {
bind: (el, binding, vnode)=>{
el.addEventListener('click', ()=>{
//⾃定义数据
const data = binding.value;
//调⽤setPoint.js
bPoint.setPoint(data)
}, false);
}
})
4.进⾏埋点
例如：
<el-button v-bpoint="{type:'click',kv:{action:'1',w.documentId,w.categoryId,place:3}}">详情页链接</el-button>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。