前端组件埋点（前端埋点统一接入方案实践）
作者：于新辉
转发链接：https://mp.weixin.qq.com/s/Q1p-q2JAYoGb8Fz8O01b_A
导语随着运营活动的规模越来越大，单页面多平台展示的需求越来越多，而不同平台的埋点的接入各不相同，本文将多平台不同类型埋点接入进行统一，可以节省开发人员的学习成本并提升开发效率。
背景关于埋点，作为用户行为过程数据采集的一种方式，被广泛用于各公司的站点中。它不仅可以收集页面浏览量，还能对访问用户的时间、地点、操作路径等用户行为进行多维度记录。通过这些数据，可以更好得了解用户的使用习惯，并根据用户的行为习惯来优化业务流程，为用户提供更优质的服务。埋点的重要性毋庸置疑，每个公司都会搭建自己的一套埋点体系来服务业务。由于业务的分离及管理等原因，甚至公司内不同产品线和平台也会有各自的埋点体系。一个埋点体系包含前端或服务端发送、数据清洗、数据分类及数据查询统计等流程。目前公司内部就有多个埋点系统，分别面向58与安居客，不同埋点系统的埋点接入方式也有差别。随着部门垂直业务的调整，部门内运营活动需要在公司内多平台同时上线，而不同的平台的埋点类型是不同的，同平台APP与WEB的埋点类型相同，而发送方式也有可能是不同的，这就导致同一个运营活动页面在不同平台需调用不同类型埋点的SDK文件，并调用不同的埋点方法。接下来主要从前端角度对多平台（1）多类型（2）埋点的接入方式的统一进行的一次实践。名词解释：（1） 多平台：指公司业务（58、安居客）展现的不同端（APP、M、PC等）（2） 多类型：指公司内不同的埋点系统（58埋点系统、安居客埋点系统等）
导致问题1、学习及开发成本高开发人员想在一个页面上加入多种类型的埋点，首先需了解所有埋点类型的接入方法和埋点发送方法，还要了解每个埋点类型的参数设置类型，无疑学习成本是很大的。页面开发时，开发者想要在一个页面实现多种埋点类型的发送，引入埋点sdk文件有两种方法：1） 在开发时将所有类型埋点相应sdk文件提前引入，但会增加不同平台页面必要加载文件数量；2） 判断平台进行动态引入sdk文件，但需要平台及环境的一个判断方法，开发成本高；在业务事件中调用相应的埋点发送方法进行埋点的发送时，也需要进行平台及环境的判断，虽然判断方法可以提取出来，但不同项目支持环境不同时，判断条件也会不一样，跨项目无法完全复用。\
2、埋点与业务耦合，维护困难由于活动页面中的埋点以点击埋点为主，埋点的开发方式也是在业务事件函数中进行手动埋点。多类型埋点开发时，首先要对平台及端进行判断，然后调用对应类型埋点的方法。由于方法及参数都不相同，页面埋点过多就会造成代码比较混乱。无论是新增还是修改埋点参数，都需要去业务代码中查找维护，非常困难。
3、多类型埋点测试困难一个平台内埋点测试流程是：测试人员根据业务流程对页面进行操作，同时对发送的埋点参数进行验证，多个页面关联的时候，流程走一遍就需要几十分钟甚至一两个小时，而多平台多类型埋点更是需要走多遍流程，埋点测试耗时长。
4、埋点测试数据无法验证正确性由于测试环境埋点数据量大，且对于分析用户行为无意义，因此测试环境的埋点数据会被清洗，数据组想要对项目的埋点数据进行统计分析，只有等项目上线后才能进行，而有些埋点参数错误也只有等项目上线后才能被发现，哪怕此时修正也会有部分数据无法正常统计到最后结果中，无疑增加了数据统计风险。
方案设计基于以上几点问题，我收集了前端组不同项目的埋点需求，整理了单类型埋点发送流程的八个步骤：1） 产品报备埋点，并将报备数据给到相应开发及数据人员；2） 前端了解此类型埋点加载及发送方法；3） 开发页面引入相应sdk文件；4） 配置此类型埋点所需必要参数；5） 在相应业务事件中加入埋点发送方法；6） 开发完成，埋点测试；7） 项目上线，埋点数据统计分析；8） 埋点维护。不同类型埋点流程可能存在步骤3与步骤4颠倒的情况。从以上单埋点发送流程可以看出，步骤1由产品人员执行，步骤2-5以及步骤8由前端开发人员执行，步骤6由测试人员执行，步骤7由数据人员执行。如果页面有N种类型埋点的发送，那就需要重复所有步骤N遍。要提升多类型埋点发送过程的开发效率，首先要从前端开发人员的步骤入手：1） 首先要解决对于平台及环境的自动识别问题，同时需要一个埋点分发层根据环境及配置动态加载对应类型埋点SDK文件；2） 其次要解决埋点与业务耦合严重，埋点难维护的问题，需要将埋点配置及业务埋点数据与业务代码分离开；3） 想要保持业务代码的整洁以及开发人员的学习成本，还需要对不同类型埋点的初始化和发送方法进行统一；4） 另外要解决埋点测试耗时问题与测试环境埋点正确性验证问题，还需要一个线上页面，可以根据埋点配置文件自动生成。基于以上几点思考，多类型埋点接入方案整体设计如下图所示。
1、埋点解耦无论想提升埋点的可维护性，还是统一多类型埋点的调用方法，都需要将埋点进行分离，并设计统一配置格式。而每一种类型的埋点数据都可分为初始配置和业务埋点发送数据两种，初始配置具有公用性，参数可能会变化（例如城市信息），埋点发送数据具有单一性，且参数大部分不变，我们将其分开配置，便于开发人员理解与管理。1） 埋点初始配置设计不同类型的埋点配置字段是不相同，而且差距非常大，我们无法将这些配置字段进行统一，因为这些字段在埋点申报时对应的含义完全不同，因此为了便于理解，此部分的字段名称保持原名称及含义，只不过将关键字段抽离出来放到对应类型的配置字段中。A：xxConfig：将不同类型埋点（xx）关键设置参数分离出来，作为一个配置字段。例如有埋点类型为wb，那此字段为wbConfig，内容包含wb类型埋点的所有必要配置，json格式。例如：有A类型埋点，对应的关键参数为a1，a2，则我们需要在此进行设置：
多种埋点类型则对应多个此种参数；B、commonParam：公参配置字段，会带入所有埋点自定义参数中。例如开源参数from；C、trackHost：平台发送埋点类型自定义字段，假如目前有两个平台M和N，那么我们可以配置平台M发送A类型，平台N发送B类型，如果单平台支持发送多类型埋点，亦可同时配置。
D、autoShow：是否自动展现埋点，默认为true；这些字段就组成一个大的埋点配置json文件trackConfig。以支持A、B两种埋点类型为例：
为了业务埋点数据的配置与业务分离开，也需要对业务埋点数据格式进行统一设计。想要一次调用可以在不同环境发送不同类型的埋点，就要以埋点业务为维度进行区分。单个业务埋点中可能包含一个或多个类型埋点的数据，并以唯一key作为与业务事件耦合的标志。
单个业务埋点数据设计，具有唯一key值（json格式）A、xx：将不同类型埋点（xx）发送参数分离出来，作为一个配置字段。例如有埋点类型为wb，那此字段名为wb，内容包含wb类型埋点的所有埋点参数，json格式。例如：此业务埋点需支持A类型埋点的发送，A类型埋点的主参数为aa等，并加入自定义字段param。我们可以这样配置：
多种埋点类型则对应多个此参数；B、desc：单个埋点描述字段 ；假如有业务埋点——banner点击，以支持A、B两种埋点类型为例：
多个埋点数据组成一个大的埋点数据json文件tracklogs。
2、埋点插件有了上边的两个埋点文件后，接下来设计开发了一个埋点插件，充当埋点分发层的职责。不同类型埋点的初始化及发送方法各不相同，而我们想要做统一，就需要将各类型埋点的方法做统一处理，根据埋点的流程，我将不同类型埋点作为抽象类，并对外抛出相同的三个方法：config()、show()、send()，而整个插件也是对外抛出这三个方法。原理如下图：
插件原理图
整个埋点插件在不同平台发送埋点的类型是由当前平台及trackHost中设置的对应埋点类型来决定的，那么页面初始化的时候首先需要一个平台及环境的判断，部门正好有公用插件（Flib）具有此功能，因此我们将此埋点插件与Flib结合在一起，动态加载所需的埋点sdk文件，并进行初始化。这样开发人员无需关心环境及加载sdk问题，也无需关心调用不同发送方法及传参问题，统一调用sendLog方法，并将埋点数据文件中的一个埋点（例如bannerClick）作为参数即可。与flib结合后的插件整体的流程如下图所示：
分发层插件原理
而且再有其他类型的埋点接入，只需要插件中定义此埋点类，抛出统一的config()、show()、send()方法就可以了。
3、埋点测试针对埋点测试的问题，我开发了一个埋点测试生成页面（如下图），此页面可以根据独立出来的埋点文件trackConfig与tracklogs，自动生成适用于不同平台的测试页面链接及二维码，便于测试人员在不同平台进行测试。页面的生成原理是这样的：将埋点文件储存在缓存服务器中，设置30分钟有效，并生成对应key值，放入测试页面链接的url中。测试页面通过此key值可取得对应的埋点配置文件内容，以及对应的插件生成埋点测试页面。
埋点测试生成页
点击链接或移动端扫码可以进入一个测试页面（如下图），测试页面会根据设置的埋点数据生成对应的按钮，点击可以发送对应平台类型的埋点。由于这个页面是线上页面，所有这些埋点在项目上线之前就可以进行测试，有问题也可以在上线前进行修正。为了提升测试效率，还增加了“一键发送所有”功能，在页面埋点过多时，可以大大提升测试人员的埋点测试效率。
v
埋点测试页
总结多平台埋点接入方案目前已在本部门前端十多个项目中运用，对埋点开发及测试效率都得到较大提升。目前埋点接入流程中比较费时的节点就是由产品给出的埋点文档转换为埋点开发文件的过程，后续会开发相应页面进行自动转换。
推荐JavaScript经典实例学习资料文章《细聊微内核架构在前端的应用「干货」》
《一种高性能的Tree组件实现方案「干货」》
《进击的JAMStack》
《前后端全部用 JS 开发是什么体验（Hybrid Egg.js经验分享）上》
《前后端全部用 JS 开发是什么体验（Hybrid Egg.js经验分享）中》
《前后端全部用 JS 开发是什么体验（Hybrid Egg.js经验分享）下》
《一文带你搞懂 babel-plugin-import 插件（上）「源码解析」》
《一文带你搞懂 babel-plugin-import 插件（下）「源码解析」》
《JavaScript常用API合集汇总「值得收藏」》
《推荐10个常用的图片处理小帮手（上）「值得收藏」》
《推荐10个常用的图片处理小帮手（下）「值得收藏」》
《JavaScript 中ES6代理的实际用例》
《12 个实用的前端开发技巧总结》
《一文带你搞懂搭建企业级的 npm 私有仓库》
《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》
《细说前端开发UI公共组件的新认识「实践」》
《细说DOM API中append和appendChild的三个不同点》
《细品淘系大佬讲前端新人如何上王者「干货」》
《一文带你彻底解决背景跟随弹窗滚动问题「干货」》
《推荐常用的5款代码比较工具「值得收藏」》
《Node.js实现将文字与图片合成技巧》
《爱奇艺云剪辑Web端的技术实现》
《我再也不敢说我会写前端 Button组件「实践」》
《NodeX Component - 滴滴集团 Node.js 生态组件体系「实践」》
《Node Buffers 完整指南》
《推荐18个webpack精美插件「干货」》
《前端开发需要了解常用7种JavaScript设计模式》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的 Webpack HMR 学习指南（上）「含源码讲解」》
《了不起的 Webpack HMR 学习指南（下）「含源码讲解」》
《10个打开了我新世界大门的 WebAPI（上）「实践」》
《10个打开了我新世界大门的 WebAPI（中）「实践」》
《10个打开了我新世界大门的 WebAPI（下）「实践」》
《「图文」ESLint 在中大型团队的应用实践》
《Deno是代码的浏览器，你认同吗？》
《前端存储除了 localStorage 还有啥？》
《Javascript 多线程编程的前世今生》
《微前端方案 qiankun（实践及总结）》
《「图文」V8 垃圾回收原来这么简单？》
《Webpack 5模块联邦引发微前端的革命？》
《基于 Web 端的人脸识别身份验证「实践」》
《「前端进阶」高性能渲染十万条数据(时间分片)》
《「前端进阶」高性能渲染十万条数据(虚拟列表)》
《图解 Promise 实现原理（一）：基础实现》
《图解 Promise 实现原理（二）：Promise 链式调用》
《图解 Promise 实现原理（三）：Promise 原型方法实现》
《图解 Promise 实现原理（四）：Promise 静态方法实现》
《实践教你从零构建前端 Lint 工作流「干货」》
《高性能多级多选级联组件开发「JS篇」》
《深入浅出讲解Node.js CLI 工具最佳实战》
《延迟加载图像以提高Web网站性能的五种方法「实践」》
《比较 JavaScript 对象的四种方式「实践」》
《使用Service Worker让你的 Web 应用如虎添翼（上）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（中）「干货」》
《使用Service Worker让你的 Web 应用如虎添翼（下）「干货」》
《前端如何一次性处理10万条数据「进阶篇」》
《推荐三款正则可视化工具「JS篇」》
《如何让用户选择是否离开当前页面？「JS篇」》
《JavaScript开发人员更喜欢Deno的五大原因》
《仅用18行JavaScript实现一个倒数计时器》
《图文细说JavaScript 的运行机制》
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《深入JavaScript教你内存泄漏如何防范》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web 前端区别在哪里》
《63个JavaScript 正则大礼包「值得收藏」》
《提高你的 JavaScript 技能10 个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线 PDF 预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript 20 年 中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的 5 个区别》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location 详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node H5 实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的 JavaScript 模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript 面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道 JavaScript知识点汇总（一）》
《关于前端174道 JavaScript知识点汇总（二）》
《关于前端174道 JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript 装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个 JavaScript 版敏感词过滤库》
《送你 43 道 JavaScript 面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂 JavaScript 执行机制》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript 工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的 JS 写得更漂亮》
《恭喜你获得治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript Canvas实现自定义画板》
《Continuation 在 JS 中的应用「前端篇」》
作者：于新辉
转发链接：https://mp.weixin.qq.com/s/Q1p-q2JAYoGb8Fz8O01b_A
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
