前端全埋点进化之路-付强-新浪移动

1 .前端全埋点进化之路路 2018-11-22 ⼩小爝 

2 .Github zhihu 团队专栏 新浪移动⼤大前端&⼯工具平台 

3 .“Data matures like wine, applications like fish” –Andy 

4 .• 我想知道web应⽤用上某个⻚页⾯面的PV，UV？ • 我想知道我们的⽤用户最喜欢点击⾸首⻚页的哪个地⽅方？ • 我想知道我们⽹网站的⽂文章阅读率是多少？ • 我想了了解我的⽤用户显示器器的分辨率构成占⽐比？ • 我想知道我的⽹网站是否有什什么兼容性问题或者前端性能的问 题？ 

5 . 前端埋点SDK收集纬度 错误⽇日志 Onerror unhandledrejection Try catch 性能⽇日志 FP P … FC P PV M F TI 核⼼心指标 ， UV … T T R ， ⻓长 … 停 留留 时 事件，曝光 ，客户端环 境… ⽤用户⾏行行为习惯 

6 .传统埋点SDK基础实现原理理 

7 . 常⻅见信息收集⼀一览 screenSize colorDepth appCode appName Cpu Platform jsVer netwrokType language timezone flashVer javaEnabled pageInfo referrer excuteCount isHomepage domCount iframeCount onloadTime readyTime webUrl cookieInfo nextHopProto domainLooku domainLooku sdkVersion fpsInfo initiatorType workerStart redirectStart redirectEnd connectStart connectEnd col pStart pEnd secureConnec encodedBody decodedBody firstpaint requestStart responseStart responseEnd transferSize resouceName entryType startTime tionStart Size Size domContentL domContentL chrome_white domInteractiv duration supportSwork userAgent host isStandlone domComplete oadedEventSt oadedEventEn domLoading Screen e art d loadEventStar navigationStar unloadEventSt unloadEventE fetchStart loadEventEnd ConsoleMsg ConsoleLevel ErrorMsg ErrorColNum ErrorRowNum t t art nd ErrorBreadcru componentNa ErrorTargetUrl ErrorStack componentId TargetPosition EventType ExtInfo platType BsCode Viewpath mbs me 

8 . 常⻅见上报⽅方式 体积⼩小； 1px 透明图，对⽹网⻚页内容的影响 1x1 ⼏几乎没有影响； img 天然⽀支持跨域；图⽚片 Initial GIF 请求不不占⽤用 Ajax 请求限额 Report POST API http2头部压缩，使⽤用sendBeacon，客户 端字符串串压缩， 204⽆无response下载 SDKInit 1x1 SingleRequest GIF Burying Point POST API MultipleCollection unloadBefore 

9 . SDK主要⽅方法 • initialization 初始化配置 • options modify 配置修改 • send/report 原⼦子上报⽅方法 • on/off/emit 事件解耦 （埋点命中，收集前后，上报前后…） 

10 . SDK初始化通参 扩展类 ⽇日志压缩，⽇日志过 滤，⽇日志抽样… 规则类 配置类 采集种类，采集⽅方 上报地址，字段配 式，采集规则… 置… 

11 . 代理理埋点⽅方式 • Global Object (XHR/Fetch/Timer/Promise/Console…) • Global Event (onerror/PerformanceObserver/ResizeObserver/ MutationObserver/IntersectionObserver…) • Framework Method （axios/$.ajax…） 

12 . ⾏行行为埋点⽅方式 • 利利⽤用DOM事件流中的冒泡或捕 获机制实现事件代理理。 • 在document代理理handle中进⾏行行 埋点判断。 • <tag log-(click/hover/ dbclick)=“BScode”></tag> 节 点钩⼦子。 • 命中埋点进⾏行行业务code上报。 

13 . 传统埋点SDK优缺点 API单⼀一，上⼿手简单 侵⼊入式，维护成本⾼高 部署成本⼩小 更更新埋点需要重发模板 基础⾏行行为埋点⽅方式直观 基础⾏行行为不不⾃自动化，有开发成本 

14 .⽆无痕埋点SDK基本实现原理理 

15 . 传统埋点⽅方式埋点 addEvent(document,”click”,(e)=>{ document let target = e.target; while(target!=document.documentElement && !target.getAttribute(“log-click”)){ body if ( target.getAttribute(“log-click”) ){ let code = target.getAttribute(“log-click”) SDK.send(code) break; div } target = target.parentNode; } <button log-click=“code”> }); 

16 . ⽆无痕埋点⽅方式埋点 autoMap.selector = { “#myButton": "code" document } addEvent(document,”click”,(e)=>{ let target = e.target; while(target!=document.documentElement){ body for (let sel in autoMap.selector) { if (validBySelector(target, sel)) { let code = autoMap.selector[sel] div SDK.send(code);
 break; } } button target = target.parentNode; } }); 

17 . 经典场景流程 ⽆无痕/可视化-埋点 保存配置，⽣生成埋点pageID ⻚页⾯面修改SDK初始化pageID 基于xpath/css selector进⾏行行可视 ⽆无痕埋点handle接传统埋点send 活动⻚页/⼴广告⻚页/固定产品⻚页 化埋点 ⽅方法 可视化后台连接websocket获取 ⻚页⾯面嵌⼊入⽆无痕埋点SDK 埋点完成 埋点⻚页⾯面 传输当前⻚页⾯面内容样式到可视化 唤起埋点websocket连接 后台 

18 .举⼀一个栗栗⼦子 

19 .举⼀一个栗栗⼦子 

20 . ⽆无痕埋点SDK优缺点 ⾏行行为埋点不不侵⼊入业务代码 性能影响，需要多⼀一次配置下载 上报接⼝口⽆无需更更改 可视化后台和配置后台需要开发成本 ⾃自动化可视化 ⻚页⾯面结构变化时，xpath和selector同步问题 ⽆无开发成本 培训产品和运营需要成本 code码统⼀一维护 修改埋点不不需要重新发版 

21 .全埋点SDK基本实现原理理 

22 . 全埋点⽅方式埋点 addEvent(document,”click”,(e)=>{ document let target = e.target,stack = []; while(target!=document.documentElement){ let component = getComponentByEl(target); body let item = { Ame:component.name || target.tagName, otherInfo:{} //每层节点信息 } div stack.push(item); target = target.parentNode; } button SDK.send(stack); }); 

23 . 上报⽇日志和查询⽅方式的升级 传统/⽆无痕SDK上报信息 全埋点SDK上报信息 • 客户端通⽤用SDK收集信息 • 客户端通⽤用SDK收集信息 • 指定/配置的⽤用户⾏行行为信息 • 全部的⽤用户⾏行行为信息 • 依赖埋点code作为⽇日志汇总后的查询条件 • 不不依赖code，以⾏行行为元素本身的结构和位置做查询条件 • 埋点开发动作在功能开发完成和上线之间 • 埋点开发动作在功能开发时⼀一次性完成 

24 . 举⼀一个例例⼦子 • 我想获取⼀一个登录按钮的点击量量，⽽而这个登录按钮的位置可 能是N种变化的，全埋点如何做统计？ 1. 统计N种变化位置的全部点击量量数据。 2. 把这个登录按钮做成⼀一个唯⼀一组件，通过对这个组件name 获取全部点击量量数据。 

25 . 全埋点SDK优缺点 ⽆无需维护埋点code 要有组件命名规范和关联信息规范 ⽆无侵⼊入代码 全量量上报，带宽存储有成本 没有⼆二次埋点开发成本 查询时麻烦，关联信息只有开发⼈人员知道 ⾃自带结构关系，⽅方便便做统计和热图 不不需开发任何配置服务和后台 不不需要重发版，更更新埋点 

26 .新浪新闻APP中的全埋点实践 

27 .举⼀一个例例⼦子 

28 .举⼀一个例例⼦子 

29 . 新浪新闻APP Hybrid架构 Native Webview JSBridge javascript core APP-API WAP-API JSBridge SDK App webview VUE SPA page https://feexp.org/beijing/ 如何优雅的设计和实现⼀一个 JSBridge