用户运营 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.js

const script = document.createElement('script');

script.src = 'https://xxx/circle.js';

document.body.appendChild(script);