本文首发于政采云前端团队博客:前端工程实践之数据埋点分析系统(一) https://www.zoo.team/article/data-analysis-one
随着公司业务的不断增长,平台业务的不断增加,场景复杂度也对应的有所增加。这对平台产品的用户体验,商业场景的深化运营,及过程中对平台用户的使用便捷性,都带来了不小的影响和挑战。为更精准的触达用户痛点,定位转化低点,提升业务赋能,基于数据分析的优化策略势在必行。
政采云前端团队(ZooTeam),从去年年底开始,主动主导推进公司业务层面的 Web 数据埋点及分析量化的能力建设(内部产品化命名“浑仪系统”)。希望基于我们过去一段时间的事件和经验,能为正有意实践此方向从 0 到 1 建设的小伙伴们,提供一些思路和帮助。
数据埋点分析系统都做了些什么?采集了哪些数据?这些数据我们将如何运用和分析?最终又将如何展示呢?
首先我们看下系统结构。整个系统由以下 4 个部分组成,期望能提供一套完整的用户行为分析的解决方案:
其基本协作流程是,用户进入平台任意一个已埋点的 Web 页面,进行的一系列(进入、点击、滚屏等)操作,都会由 JSSDK 进行分类并将数据上报至服务端进行存储,再由站点 / 插件发起查询,服务端将处理后的数据返回,再通过数据可视化平台进行透出展示。
系统概览.png
数据采集一般分为以下三种:
由于对数据的准确度要求较高,同时希望前期只投入较少的开发资源就可以进行快速试错,并为了满足重点的用户行为数据的采集需求,因此,我们优先采用代码侵入式埋点方案。
同时针对其接入成本较高的劣势,我们也将埋点在搭建系统及组件中采用了自动化的植入方式,这点将不在此详述。为降低接入成本并且更加灵活的捕获数据,我们采用了 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", // 浏览器唯一标识
}
上述一些收集的字段,会在下面案例中使用到。
点击发送请求.gif
目前前台站点已经提供了比较丰富的数据展示功能,比如:PV(浏览次数)/UV(浏览人数) 排序或趋势、漏斗分析、路径分析、热图分析、用户画像、自定义看板等等,还有各种业务相关的数据统计及报表导出功能。总体菜单如下:
数据展示.png
image.png
采集和分析哪些数据才是对业务有价值的,我们参考了许多业界成熟的用户行为分析解决方案,包括:
这些产品在用户行为分析侧的功能可以说是做到了大而全。根据我们的实际需求可以筛选出以下一些重点功能模块:
关键功能点 | 数极客 | 神策数据 | GrowingIO | 自研系统 |
---|---|---|---|---|
表单分析 | 支持 | 支持 | 支持 | 不支持 |
页面分析 | 支持 | 支持 | 支持 | 支持 |
路径分析 | 支持 | 支持 | 支持 | 支持 |
漏斗分析 | 支持 | 支持 | 支持 | 支持 |
事件分析 | 支持 | 支持 | 支持 | 支持 |
事件分布分析 | 支持 | 支持 | 支持 | 支持 |
用户分群 | 支持 | 支持 | 支持 | 支持 |
行为预测 | 不支持 | 支持 | 不支持 | 不支持 |
用户行为序列 | 不支持 | 支持 | 不支持 | 不支持 |
热图 | 支持 | 支持 | 支持 | 支持 |
视频回放 | 支持 | 不支持 | 不支持 | 不支持 |
上面大部分已支持的功能都可以在【数据展示】模块中查看,表单分析及用户行为序列目前已在我们版本的规划中。表单分析是分析一个用户从进入一个表单填写页面到表单提交的过程中各个行为的分析,每个表单项的填写率、重填率、填写时长、放弃率等都是重要的分析指标,会直接影响到整体的转化率。也能帮助开发人员及时发现和定位表单页面中的交互问题,从而提升用户体验,和重要链路中的转化率。
例如:常见的注册表单的转化,即 10 个用户进入注册页面但最后只有 7 个用户成功注册,这个功能可以有效发掘剩余 3 个注册失败的用户流失的点,找到他们是在填写哪个表单项前离开页面或是找到重填率最高的表单项进行优化。用户行为序列是从单一用户的角度去查看在我们站点上的行为轨迹,从而去分析重点用户的行为喜好。
基于公司当前的业务发展,除了上述基础功能模块外,系统中还会对应考虑一些定制化的业务能力模块。依据目前系统的能力类型,可分为用户行为分析、链路转化分析、用户体验分析等:
浑仪系统.png
那么在一个页面或者一个流程中我们可以采集到哪些有价值的数据呢?下面我们就以一个简单的流程为例来说明。
这里流程可以分为三步,首先,用户进入政采云电子卖场首页,并在搜索框中输入想要搜索的关键词,其次,点击搜索按钮后进入搜索结果页,最后,在结果页中找到了目标商品并点击进去了商品详情页查看。这是在一个电商平台中用户操作行为中较为常见的一种流程,也是一个关键流程。
案例流程.png
我们在上述的三个页面中会采集的数据有以下三种:
gbjaorgWvUkrL8zz__thumbnail.png
如上图所示,通过 Chrome 插件工具,可以在页面上直观的展示链接和按钮的点击次数(数据已脱敏)。
利用上面说到的三项埋点,我们在单个页面中可以得到用户行为相关的四种数据。
bVoH1OuCEtA66wys__thumbnail.png
再对这些数据进行加工,我们进一步可以得到:停留时长、转化率、热力图;
3Lq2AEjithQwS1JR__thumbnail.png
如下图所示,在这个漏斗中定义了三个事件。
1.png
将这三个事件串联起来,可以得到完整的漏斗分析图(数据已脱敏)。
2.png
本文只是对通用类型的数据埋点与分析系统做了下初步的能力项介绍,后续我们将针对每个踩过的坑和做过的优化产出一系列的文章,希望各位能给予意见。