前端工程实践之数据埋点分析系统（一）

想获取更多原创好文，请扫 👆上方二维码关注咱们吧~

背景

随着公司业务的不断增加，平台业务的不断增长，场景复杂度也对应的有所增长。这对平台产品的用户体验，商业场景的深化运营，及过程当中对平台用户的使用便捷性，都带来了不小的影响和挑战。为更精准的触达用户痛点，定位转化低点，提高业务赋能，基于数据分析的优化策略势在必行。

政采云前端团队（ZooTeam），从去年年末开始，主动主导推动公司业务层面的 Web 数据埋点及分析量化的能力建设（内部产品化命名“浑仪系统”）。但愿基于咱们过去一段时间的事件和经验，能为正有意实践此方向从 0 到 1 建设的小伙伴们，提供一些思路和帮助。

系统概览

数据埋点分析系统都作了些什么？采集了哪些数据？这些数据咱们将如何运用和分析？最终又将如何展现呢？

首先咱们看下系统结构。整个系统由如下 4 个部分组成，指望能提供一套完整的用户行为分析的解决方案：

1. 埋点采集 JSSDK：收集用户行为数据，并进行上报；
2. 数据处理服务：接收上报数据并存储；筛取所需数据，进行数据处理并透出；
3. 数据可视化平台：汇总展现详细数据，支持自定义，打通业务；
4. Chrome插件工具：在页面上直观展现坑位数据，提供场景更友好的数据可视化服务；

其基本协做流程是，用户进入平台任意一个已埋点的 Web 页面，进行的一系列（进入、点击、滚屏等）操做，都会由 JSSDK 进行分类并将数据上报至服务端进行存储，再由站点 / 插件发起查询，服务端将处理后的数据返回，再经过数据可视化平台进行透出展现。

数据采集

数据采集通常分为如下三种：

1. 无埋点（全埋点）：零埋点成本，抓取用户行为全量数据，任何操做行为都会被上传。数据量大，“噪音”多；
2. 可视化埋点：在页面中操做，选择埋点位置/模块，非开发人员也能够进行埋点；
3. 侵入式埋点：埋点时须要将数据采集代码写入业务代码中，埋点成本较高，但准确度也更高；

因为对数据的准确度要求较高，同时但愿前期只投入较少的开发资源就能够进行快速试错，并为了知足重点的用户行为数据的采集需求，所以，咱们优先采用代码侵入式埋点方案。

同时针对其接入成本较高的劣势，咱们也将埋点在搭建系统及组件中采用了自动化的植入方式，这点将再也不此详述。为下降接入成本而且更加灵活的捕获数据，咱们采用了 DOM 节点挂载特殊属性后自动发送和手动自定义发送两种方式结合，以知足不一样场景的须要。

//自动发送埋点方式，举例：
<button data-utm-click="${did}" data-utm-data="${业务数据}">
//手动发送埋点方式，举例：
const utmCnt = g_UTM.batchSend('触发类型（click/browse）等',[{
    utmCD:['区块信息','位置信息'],
    bdata:{key:'其余业务数据'}
  },{
    utmCD:['001','008'],
    bdata:{key:'value'}
  }
]);
复制代码

基于用户行为分析这个大目标，咱们所采集数据牢牢围绕着两个主题，即：Event（事件/行为）和 User（用户）。

围绕“事件“咱们采集了：事件的类型、发生时间、页面位置等信息，组成事件惟一标识。

围绕”用户“咱们采集了：用户 IP、操做系统、浏览器信息、屏幕分辨率等，并生成用户惟一标识植入 Cookie 中。

{
  bdata: {}, //业务数据
  createTime: "1571038815128", // 建立时间
  evt: "browse", // 事件类型
  ipAddr: 122.226.174.195, //ip地址
  logType: 2, // 触发类型
  lver: 1.1.0, //版本
  mx: 0, // 页面位置坐标x
  my: 0, // 页面位置坐标y
  os: "Windows/7", // 操做系统
  pre: "https://www.zcygov.cn/", // 来源地址
  scr: "1920x1360", // 屏幕分辨率
  url: "https://www.zcygov.cn/", // 页面地址
  userId: "001", // 用户标识
  utmCnt: "a0004.2ef5001f.0001.0001.d814bf60ee5511e99397b37fe9083257", // 触发位置
  utmUrl: "a0004.2ef5001f.0001.0001", // 来源位置
  uuid: "d7fd8de0-ee55-11e9-9397-b37fe9083257", // 浏览器惟一标识
}
复制代码

上述一些收集的字段，会在下面案例中使用到。

数据展现

目前前台站点已经提供了比较丰富的数据展现功能，好比：PV（浏览次数）/UV（浏览人数） 排序或趋势、漏斗分析、路径分析、热图分析、用户画像、自定义看板等等，还有各类业务相关的数据统计及报表导出功能。整体菜单以下：

• PV/UV 排序或趋势（PV：PageView，页面浏览次数，用户每打开一次记录一次，屡次打开同一页面将累计屡次；UV：UserView，浏览页面人数；下文中将直接用PV/UV；）
  • 全站的PV/UV单日趋势图：分时段查看访问量的高峰和低谷；
  • PV/UV排序：查看Top页面的PV/UV
  • 按页面、时间区间查询PV/UV
• 漏斗分析：按流程排序每一个阶段的人数，计算出转化率；
• 路径分析：查询各个页面的来源和去向；
• 热图分析
  • 点击热图：按钮及连接点击的热图；
  • 滚屏热图（即将上线）：用户页面滚屏触达率；
• 用户画像（即将上线）：针对重点用户的回访次数、浏览路径、用户身份、所在地、操做系统、浏览器等详细信息查询；
• 自定义看板：可选择首页看板的展现项；

赋能业务

采集和分析哪些数据才是对业务有价值的，咱们参考了许多业界成熟的用户行为分析解决方案，包括：

1. GrowingIO
2. 神策数据
3. 数极客

这些产品在用户行为分析侧的功能能够说是作到了大而全。根据咱们的实际需求能够筛选出如下一些重点功能模块：

关键功能点	数极客	神策数据	GrowingIO	自研系统
表单分析	支持	支持	支持	不支持
页面分析	支持	支持	支持	支持
路径分析	支持	支持	支持	支持
漏斗分析	支持	支持	支持	支持
事件分析	支持	支持	支持	支持
事件分布分析	支持	支持	支持	支持
用户分群	支持	支持	支持	支持
行为预测	不支持	支持	不支持	不支持
用户行为序列	不支持	支持	不支持	不支持
热图	支持	支持	支持	支持
视频回放	支持	不支持	不支持	不支持

上面大部分一支持的功能均可以在【数据展现】模块中查看，表单分析及用户行为序列目前已在咱们版本的规划中。表单分析是分析一个用户从进入一个表单填写页面到表单提交的过程当中各个行为的分析，每一个表单项的填写率、重填率、填写时长、放弃率等都是重要的分析指标，会直接影响到总体的转化率。也能帮助开发人员及时发现和定位表单页面中的交互问题，从而提高用户体验，和重要链路中的转化率。

例如：常见的注册表单的转化，即 10 个用户进入注册页面但最后只有 7 个用户成功注册，这个功能能够有效发掘剩余 3 个注册失败的用户流失的点，找到他们是在填写哪一个表单项前离开页面或是找到重填率最高的表单项进行优化。用户行为序列是从单一用户的角度去查看在咱们站点上的行为轨迹，从而去分析重点用户的行为喜爱。

基于公司当前的业务发展，除了上述基础功能模块外，系统中还会对应考虑一些定制化的业务能力模块。依据目前系统的能力类型，可分为用户行为分析、链路转化分析、用户体验分析等：

搜索流程埋点案例

那么在一个页面或者一个流程中咱们能够采集到哪些有价值的数据呢？下面咱们就以一个简单的流程为例来讲明。

这里流程能够分为三步，首先，用户进入政采云电子卖场首页，并在搜索框中输入想要搜索的关键词，其次，点击搜索按钮后进入搜索结果页，最后，在结果页中找到了目标商品并点击进去了商品详情页查看。这是在一个电商平台中用户操做行为中较为常见的一种流程，也是一个关键流程。

咱们在上述的三个页面中会采集的数据有如下三种：

1. 页面进入/离开自动埋点
2. 按钮点击埋点
3. 连接点击埋点

如上图所示，经过 Chrome 插件工具，能够在页面上直观的展现连接和按钮的点击次数（数据已脱敏）。

利用上面说到的三项埋点，咱们在单个页面中能够获得用户行为相关的四种数据。

1. PV：经过计算日志中全部进入页面日志条数的总和咱们能够获得 pv
2. UV：以惟一 uuid 将 pv 进行过滤后能够获得 uv ；
3. 按钮点击数：直接经过统计按钮点击事件上报的日志条数能够获得按钮的点击量；
4. 连接点击数：与按钮点击有所不一样，按钮点击是经过单独发送的点击事件上报来进行统计，而连接点击每每致使的是一次页面跳转，此处即为从电子卖场首页离开进入了搜索结果页，此时咱们所统计的就是搜索结果页的页面进入事件中的 utmUrl（即来源按钮的惟一识别码）值，判断出该次搜索结果页的进入是来源于首页常见搜索关键词的点击，从而统计出该位置的的连接点击量。

再对这些数据进行加工，咱们进一步能够获得：停留时长、转化率、热力图；

• 热力图：用于反映图中点的密集程度，在此处咱们利用点击的坐标（点击的 x,y 坐标位置，再根据屏幕分辨率作一致性的换算）组合成点击热图，以下图所示（数据已脱敏）。

• 漏斗分析：由一个元事件/虚拟事件加一个或者多个筛选条件组成，表示一个转化流程中的一个关键性的步骤；在咱们平台上建立一个漏斗主要由如下几步：

以下图所示，在这个漏斗中定义了三个事件。

将这三个事件串联起来，能够获得完整的漏斗分析图（数据已脱敏）。

总结

本文只是对通用类型的数据埋点与分析系统作了下初步的能力项介绍，后续咱们将针对每一个踩过的坑和作过的优化产出一系列的文章，但愿各位能给予意见。

1. 《如何高效完整的采集数据》
2. 《埋点数据分析模型设计》
3. 《Chrome插件之数据可视化》

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“ 5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

推荐阅读

前端工程实践之可视化搭建系统（一）

多是最全的 “文本溢出截断省略” 方案合集

图文并茂，为你揭开“单点登陆“的神秘面纱