用户运营H5可视化埋点平台落地

总篇172篇 2022年第47篇前言汽车之家 H5 页面传统的埋点方式，是由产品申请埋点，技术人员在代码中根据要求添加埋点上报事件。埋点代码和业务代码耦合在一起，造成了对业务代码的侵入，也不利于埋点的查找和维护。搭建本平台的目的就是为了让埋点和业务代码分离，同时使用可视化的方式，使非技术人员可以独立完成埋点区域、规则、参数的编辑，并生成包含本页面或项目所有埋点事件的 SDK，页面开发者直接引用生成好的线上 JS SDK 地址即可，不用关心具体埋点细节。?设计方案从需要创建的数据结构上来划分，有项目、页面和埋点三个层级，对应三个不同的模块，再加上一个埋点 SDK 生成的模块，整个系统就划分为四个主要模块。本平台的系统功能架构图如下所示：1.项目模块按照页面的加载方式，前端 H5 项目可以划分出两种类型：“无前端路由”和“有前端路由”。1.1无前端路由也就是全部由独立的页面组成的项目，可以直接在当前页面中加载本页面的埋点 SDK。1.2有前端路由有前端路由的项目需要监听路由变化，根据当前路由决定加载哪一个页面的埋点 SDK ，需要监听的事件有 hashchange 和 popstate，另外 History 对象中的 pushState 和 replaceState 方法，也会引起路由变化。可以通过 AOP 的方式对这两个方法重写，触发自定义的 pushState 和 replaceState 事件，这样就可以统一监听了。除了页面 SDK，有前端路由的项目，还会多生成一个项目 SDK，内部只包含路由事件监听、路由与页面 SDK 地址的映射关系。整个项目只需要引入项目 SDK，路由发生变化时，动态加载对应的页面 SDK。2.页面模块页面这一级除了要管理页面的各级栏目 ID、埋点通用参数之外，最重要的功能就是实现埋点区域选择的可视化。为了便于在一个页面中操作，需要使用 iframe 的方式，将待埋点页面嵌入到页面模块，要实现的效果是鼠标在 iframe 页面中移动，经过的可选区域会自动加红框表示选中，如下图所示：2.1编写 Chrome 插件为了实现可视化圈选的功能，需要向 iframe 页面注入脚本，然而由于待埋点的页面通常都是跨域的，使用常规方式无法实现想要的功能，我们最终选择自己编写? Chrome 插件的方式来实现注入功能。Chrome 浏览器在 PC 端占有三分之二的市场，作为一个后台使用的管理平台，我们可以限定操作人员使用 Chrome 浏览器，在我们的埋点平台上，下载该插件并安装。插件部分代码如下：//?manifest.json{"name":?"注入?iframe?脚本","version":?"1.0","description":?"可视化埋点系统专用","permissions":?["activeTab","declarativeContent","storage"],"content_scripts":?[{"js":["content_scripts.js"],"matches":["*://*.autohome.com.cn/*"],"exclude_matches":?["*://dev.autohome.com.cn/*"],"all_frames":true}],"manifest_version":?2,......}//?content_scripts.jsconst?script?=?document.createElement('script');script.src?=?'https://xxx/circle.js';document.body.appendChild(script);注入的 circle.js 中主要包含以下功能：1. 鼠标移动时添加红框圈选；2. 选中时，将选中元素的 XPath 使用 postMessage 的方式回传给页面模块；3. 监听页面模块的 message 事件，修改圈选元素；为了不影响操作待埋点页面（比如打开弹窗，选中弹窗中的区域），我们使用了鼠标左键圈选和操作，右键选中和回传的方式。3.埋点模块当页面模块收到来自 iframe 的回传，就会自动打开埋点模块的弹层，如下图所示：埋点模块为了方便操作元素，会将接收到的圈选元素的 XPath 转换为 CSS 选择器。此外还提供了几种不同的方式更改圈选元素，比如改为圈选所有同级元素、根据包含关系选择等，甚至直接手动编辑。埋点的类型有点击和曝光两种，可以选择点击和曝光次数，默认为点击可以多次，曝光只有一次。3.1扩展参数对于大部分埋点来说，添加一些自定义的键值对作为扩展参数是很常见的，它的取值主要分为三种类型：- 普通值；- 页面 url 参数传入；- 和页面数据相关的动态参数。在拼装 SDK 的时候，会根据参数类型的不同，使用对应的方式取值。需要特别说明的是第三种类型，和页面数据相关的动态参数，您将不得不在页面的业务代码中添加一个约定的 window.layer 来存放动态数据。不过平台会在页面模块自动帮您生成所需的动态参数及注释，您只需要将数据填入即可：4.埋点 SDK 生成模块主要功能是从数据库中读取页面和埋点数据，将数据拼装到项目 SDK 或者页面 SDK 的模板中，对生成的脚本代码压缩和混淆，并将代码上传到静态资源存储站点，通过项目或页面的 ID 以及版本号就可以拼出来对应的埋点 SDK 地址 。页面 SDK 模板中，包含所有埋点事件在对应元素上的绑定以及埋点参数的处理，并使用浏览器 API - MutationObserver 监听页面子元素、属性变化，动态更新对埋点元素的事件绑定。5.总结可视化自助埋点平台已经在用户运营的各个 H5 专题活动中投入使用了大半年，埋点代码和业务代码解耦后，有效地提高了开发效率以及埋点的可维护性。另外，为了增加可用性，平台的页面模块还增加了上传 Excel 文件，一键导入埋点数据的功能。当然由于水平有限，还有很多考虑不全面的地方，我们的埋点平台也还在不断的迭代和完善中，欢迎大家试用，并提出宝贵意见。作者简介张世萌用户产品中心-App技术部。2017年加入汽车之家，目前任职于用户产品中心-APP技术部-前端开发团队-用户增长前端开发组。主要负责用户运营相关前端开发工作。阅读更多：汽车之家推荐系统架构迭代之路RPA在IM资源位验证场景中的应用从SPserver到BRPC