Event Collector —— Web 环境的标记埋点方案

原创郑志伟字节跳动ADFE团队

本文分享的内容是由飞鱼前端团队带来的 Event Collector ，一套适用于 Web 环境的标记埋点解决方案，旨在提升埋点的开发效率与埋点数据的使用体验。

阅读本文，你将依次了解：

标记埋点与命令式埋点的不同之处；
配套浏览器扩展带来的埋点管理新体验；
Event Collector 技术实现的概述。

由来

无论是面向一般用户还是面向企业的产品，通常都需要对用户的交互进行记录，用于分析用户的使用情况，进而优化产品功能或是发现新的需求，这些对于用户交互的直接记录就是「行为埋点」。

在使用标记埋点之前，我们行为埋点的上报方式可能和大部分项目一样：监听事件，然后在回调函数中调用某个特定的函数上报数据。

命令式埋点的代码示例

随着行为埋点需求的不断累积，我们发现此类命令式埋点存在不少冗余代码、对可读性也会造成一些影响，因此我们开始尝试借助事件冒泡等特性对用户交互行为进行统一埋点，总结出 Event Collector 这套标记埋点方案。

标记代替命令

标记埋点约定将埋点信息标记在用户直接交互的对象上，在用户完成交互之后，由全局的事件监听器从交互对象上采集预先标记的埋点信息进行上报。而命令式埋点通常需要分散地监听交互事件、完成埋点信息的上报。

概括来说，标记埋点涉及到标记、监听、采集、上报四个环节，命令式埋点涉及到监听、上报两个环节。相对于命令式埋点，标记埋点将监听、采集、上报环节集中起来，可以减少代码的冗余；此外，标记埋点将埋点信息从上报环节前置到新增的标记环节，突出强调埋点信息与交互对象的联系、使得埋点代码更易于阅读和理解。

采用 Dataset 方法进行标记埋点的代码示例

Event Collector 目前提供两种标记埋点方法：

一种如上图所示约定使用 data-log- 开头的 HTML 属性进行标记；
一种如下图所示使用特定的 React 组件进行标记。

二者都支持点击、悬浮、展现事件的埋点，并在满足基础的标记埋点需求之上各具特色。

采用 React Component 方法进行标记埋点的代码示例一

采用 React Component 方法进行标记埋点的代码示例二

管理埋点

既然埋点信息已经被标记在交互对象上，我们不如对其加以充分利用。Event Collector 标记埋点方案就包括一个浏览器扩展 Event Collector Kits ，以在不对业务代码做出改动的前提下提供额外的标记埋点管理功能。

配合 Event Collector SDK ， Event Collector Kits 可以直接在页面中圈选出被标记过的元素，协助研发同学快速了解到页面中哪些元素存在埋点、存在哪些埋点事件**，便于对照检查是否存在遗漏的埋点需求。

标记埋点的可视化展现

此外， Event Collector Kits 还内置了对公司内部事件分析平台的支持，无论是研发同学还是产品同学都可以快捷地为页面中的标记埋点创建分析看板。

快速创建埋点数据分析看板

上述功能都建立在 Event Collector Kits 为页面注入的 Injected Hooks 之上，这一设计参考自 React Developer Tools ，并做出了进一步改进：Injected Hooks 没有与 Event Collector SDK 强绑定，而是提供了一组相对稳定的 API 、以及对应的类型声明 @event-collector/devtools 。这样一来，任何 Web 应用都可以单独、灵活地使用 Injected Hooks 的能力而不必接入标记埋点。例如，我们的 MIS 系统没有接入埋点，但是依然可以借助 Injected Hooks 创建事件分析看板，以便运营同学快速查看系统公告展现次数之类的指标数据。

为构建可持续维护的技术项目而努力

在设计实现 Event Collector 的过程中，我们始终努力让它更易于维护、更能持续地满足我们行为埋点的开发与管理需求，因此我们不断参考、学习公司内外的优秀项目，也不断尝试、实践新的想法。借此机会，我们非常乐于将其中一些有意思的部分分享出来。

1. Event Collector 整体结构

Event Collector 整体结构示意图