标签:css 作者 lock targe comm href etl 引入 方式
埋点分析,是网站分析的一种常用的数据采集方法。数据埋点分为初级、中级、高级三种方式。数据埋点是一种良好的私有化部署数据采集方式。
埋点技术如何采集数据,有何优缺点?
数据埋点分为初级、中级、高级三种方式,分别为:
无疑,数据埋点是一种良好的私有化部署数据采集方式。数据采集准确,满足了企业去粗取精,实现产品、服务快速优化迭代的需求。
但,因手动埋点工程量极大,且一不小心容易出错,成为很多工程师的痛。且其开发周期长,耗时费力。无痕埋点成为市场新宠。
首先介绍一下传统埋点存在的问题
function leStatic(actiontype, pagetype=‘‘,backup = {}){
...
...
};
Vue.prototype.$log = leStatic;
将埋点方法注册到vue实例下;我们就可以使用 this.$log()来调用这个方法了,每调用一次这个方法就会埋上一个埋点;
1、我们的无痕埋点能做什么?
* 统计所有页面内事件的点击量
* 统计页面的展现量pv uv
2、怎么应用?
应用很简单,只需要引入封装的方法(Buried),并应用在methods即可
import { Buried } from ‘@/libs/decorators‘;
@Buried
methods: {
...
}
3、需要注意什么?
@Buried
components: {}
但是考虑到语义更加清晰建议在methods上使用此方法。
考虑到并不是所有的方法都需要设置埋点,所以如果某方法不想设置埋点 可以 return ‘noBuried‘ 即可忽略此方法不设埋点。
页面展现量统计在钩子函数中 (activated - created - mounted) 这三个钩子内,所以页面内至少有这个三个钩子之一才可统计页面展现量。
4、话不多说,先上代码?
/**
* @description 全埋点
* 1.在所有methods方法中埋点为函数名
* 2.在钩子函数中 (activated - created - mounted) 依次寻找这三个钩子
* 如果存在就会增加埋点 VIEW
*
* 用法:
* @Buried
* 在单文件导出对象一级子对象下;
* 如果某方法不想设置埋点 可以 return ‘noBuried‘ 即可
*/
export function Buried(target, funcName, descriptor) {
let oriMethods = Object.assign({},target.methods),
oriTarget = Object.assign({},target);
// methods方法中
if(target.methods) {
for(let name in target.methods) {
target.methods[name] = function () {
let result = oriMethods[name].call(this,...arguments);
// 如果方法中返回 noBuried 则不添加埋点
if(typeof result === ‘string‘ && result.includes(‘noBuried‘)) {
console.log(name + ‘方法设置不添加埋点‘);
} else if(result instanceof Promise) {
result.then(res => {
if(typeof res === ‘string‘ && res.includes(‘noBuried‘)) { console.log(name + ‘方法设置不添加埋点‘); return; };
console.log(‘添加埋点在methods方法中:‘ , name.toUpperCase ());
this.$log(name);
});
}else{
console.log(‘添加埋点在methods方法中:‘ , name.toUpperCase ());
this.$log(name);
};
return result;
}
}
}
// 钩子函数中
const hookFun = (funName) => {
target[funName] = function() {
let result = oriTarget[funName].call(this,...arguments);
console.log(‘添加埋点,在钩子函数‘ + funName + ‘中:‘, ‘VIEW‘);
this.$log(‘VIEW‘);
return result;
}
}
// 钩子函数中 view
if (target.activated) {
return hookFun(‘activated‘);
} else if (target.created) {
return hookFun(‘created‘);
} else if (target.mounted) {
return hookFun(‘mounted‘);
};
}
作者:Victor细节
链接:https://www.jianshu.com/p/467544cb088e
标签:css 作者 lock targe comm href etl 引入 方式
原文地址:https://www.cnblogs.com/tzy1997/p/10574745.html