前端埋点.md

埋点系统分类

代码埋点

分为命令式和声明式

命令式埋点

report('slide-btn-click')

声明式埋点

声明式埋点的思路是将埋点代码和具体的交互和业务逻辑解耦，开发者只用关心需要埋点的控件，并且为这些控件声明需要的埋点数据即可，从而降低埋点的成本。

// 通用方式
//上报事件的绑定类型对应的绑定名称
const REPORT_EVENT_FUNC = 'data-reporteventfunc';
//上报事件数据对应的绑定参数名称
const REPORT_EVENT_DATA = 'data-reporteventdata';
document.body.addEventListener('click',function(e){
   if(e.target.getAttribute(REPORT_EVENT_FUNC)==='click'){
        const str=e.target.getAttribute(REPORT_EVENT_DATA);
        sdk.report(JSON.stringify(str));
   }
})

// 页面-react
<span 
    data-reporteventfunc="click" 
    data-reporteventdata={JSON.stringify({code:1,id:2})}></span>

// 使用装饰器，剥离埋点与业务逻辑实现上的耦合，实现低侵入埋点
@tracker((params)=>request('/api/report',{params}))
click(params){
 // click业务...
}

const tracker = partical=>(target, key, descriptor)=>{
    if (typeof partical!=='function') {
        throw new Error('tracker arguments is not a function ' + partical)
    }
    const oldValue=descriptor.value;
    descriptor.value=function(...args){
        partical.apply(this,args);
        return oldValue.apply(this,args);
    }
    return descriptor;
}

可视化埋点

可视化埋点多数基于Xpath方案，XPath是一门在XML文档查找信息的语言， XPath可用来在XML文档中对元素和属性进行遍历, 方案有Mixpanel、TalkingData、诸葛IO、腾讯MTA，Sensors AnalyticsV1.3+等

无埋点

它并不是真正的不需要埋点，而是前端自动采集全部事件并上报埋点数据，在后端数据计算时过滤出有用数据，代表方案是国内的GrowingIO。

参考

• 基于指令和混合的前端通用埋点方案
• 前端工程实践之数据埋点分析系统
• MTFlexbox自动化埋点探索
• aop monitor
• better-burying-point