产品埋点可视化实践

原创张慧吉之家技术

2022年06月14日 10:00

关注“之家技术”，获取更多技术干货

总篇145篇 2022年第20篇

★ 目录 ★

01	项目背景
02	追根溯源
03	预期目标
04	系统设计 4.1 埋点数据聚合 4.2 App埋点拦截器 4.3 埋点信息可视化 4.4 转化率热力图
05	实现效果和收益
06	后续规划

1、项目背景

埋点作为产品优化过程中的重要手段，帮助我们还原用户使用场景，分析用户行为，为优化决策和效果验证提供支持。然而理想很丰满，现实却骨感。在日常工作中，产品运营人员经常会有这些疑问:某某功能埋点了么？某某事件的参数有哪些？某事件怎么查不到数据？上线好久了才发现埋点有问题。面对这些问题，产品运营人员往往无法亲身定位问题。当然也不是没有办法，通过Charles或Fiddler等工具进行抓包或许是个办法。但是熟练掌握这些工具对于产品和运营同学来说门槛和成本都比较高。另一方面埋点的信息一般是加密的，而且从众多请求中如何筛选埋点请求也是个耗时耗力的事情。所以产品运营同学都会求助于研发同学，只能依靠研发同学查代码才能确认问题和定位原因。而研发人员有自身的研发任务，频繁查询问题势必会影响工作效率，也未必能保证产品运营人员在第一时间可以得到想要的答案。这些问题是在各个部门普遍存在的共性问题。

2、追根溯源

解决问题之前，需要先分析清楚产生问题的原因是什么？聚焦到现有的埋点工作流程上来分析问题原因。现有流程一般是这样的:

1）运营同学向产品提出功能埋点需求；

2）产品同学拟定事件名称，向大数据申请埋点事件；

3）产品同学将Excel通过钉钉给研发同学；

4）研发同学写代码进行埋点；

5）产品运营同学通过Hive查询发现问题。然而费劲九牛二虎之力查明的原因无非是埋点的标识粘错了、少传参数了、没看到钉钉忘记埋点了。

针对这种问题，业界有没有好的解决方案呢？经过调研呢，我们发现业界把精力均集中在如何减轻埋点工作上，如：无埋点的方案和可视化埋点。这里有个区别就是可视化埋点与埋点可视化不同，我们的目标是将埋点的情况通过可视化的方式实时展现给产品运营，对于埋点正确性最有权威的莫过于运营同学和产品同学，解铃还须系铃人，把焦点放在如何赋能给产品运营同学，给他们提供一种所见即所得、简单易用的埋点查看工具。产品运营人员在使用App过程中就能实时查看埋点期望的信息和实际上报的信息，能提供给产品运营人员足够的信息帮忙他们发现和确认埋点问题。

3、预期目标

埋点可视化工具基于前端埋点拦截器和后台大数据服务，在汽车报价App工具中增加埋点可视化工具，启用后在每操作一步时，随时可以查看当前操作触发的埋点信息，以及埋点的历史趋势数据。运营和产品同学可以独立完成埋点的检视工作，减少研发同学定位埋点问题的时间，提升运营、产品、研发工作效率，具体包括如下几点。

图1 改进后的埋点工作相关角色交互流程

Ø产品运营在移动端可以查看每个操作触发的埋点事件；

Ø所见即所得，在操作App的同时就可以查看埋点信息；

Ø自动计算T-1天之前的埋点历史数据，便于分端、分版本查看埋点趋势，及时发现埋点问题；

Ø可以在移动端查看每个页面中各种事件的转化率热力图；

Ø提供安全可靠的授权机制。

4、系统设计

App埋点可视化工具基于App埋点拦截器和后台大数据服务，在汽车报价App工具中增加埋点可视化工具，启用后在每操作一步时，随时可以查看当前操作触发的埋点信息，以及埋点的历史趋势数据，及页面中各个控件的转化率热力图，具体设计如下。

图2 埋点可视化示意图

4.1埋点数据聚合

当产品同学在星河系统-事件管理中申请埋点事件后，系统自动基于Hive计算该事件的PV和UV数据，整合事件相关的事件名称、参数信息、申请日期等信息，便于在移动端调用。

4.2App埋点拦截器

App中的埋点事件数以千计，且随着版本的迭代，事件不断新增，为了最大限度减少埋点可视化对代码的侵入，笔者通过AOP方式拦截了埋点上报方法，获取埋点上报时的eventId属性和扩展属性extendinfo，而无需针对每个埋点事件进行处理。其中根据eventId属性可以从云端获取事件申请时对应的名称和期望参数，extendinfo属性代表实际上报的扩展参数，这样产品运营就很容易及时核对期望信息和实际上报信息是否一致。

图3 触发事件列表

图4 事件详情

4.3埋点信息可视化

产品运营同学在使用App过程中可以随时随地查看埋点信息，任何有权限的人员在需要时，启用埋点悬浮窗开关。启用后和正常使用App过程一样，按需点击悬浮窗开关即可查看埋点数据；每个操作触发的所有埋点事件和参数都可以实时一目了然，如图3和图4所示，通过实时展示埋点期望信息和实际上报信息便于及时发现埋点的问题；在App端可以很很方便地对比多端、多版本埋点趋势，如图5所示，通过分版本对比数据就可以确认埋点信息在新版本中是否有问题，通过分端对比就可以发现Android和IOS端两端是否正常。还能很直观的看到一定时间内某个埋点的趋势，为产品和运营人员决策和产品优化提供了依据。

4.4转化率热力图

热力图以特殊高亮的形式显示访客热衷的页面区域即用户点击的越多颜色越深，能够帮助产品运营同学准确地分辨用户喜欢感兴趣的内容。热力图是一种了解用户需求时非常直观高效的工具。当访客进入落地页面后，热力图可以呈现出用户的行为，比如点击内容、点击人数、转化率等。然而制作各个功能界面热力图的成本较高，也就决定了只能以一定周期制作，造成了数据相对滞后的局面。笔者将界面内每个控件的UV数据和转化率数据展示出来并自动附加到功能界面上，产品运营在操作App时就可以实时的看到当前版本中各功能的访问人数及转化率。

转化率热力图实现的重点是将同一个页面中的PV和Click事件筛选出来，并将埋点事件和控件绑定关联起来。通过埋点SDK中的窗体名称属性来关联同一页面的所有事件，并且窗体名称使用曝光PV页面的类名，对于Android，一般使用的就是Activity名称或Fragment名称，对于IOS就是Controller名称。Android端通过android:contentdescription属性来绑定控件对应的埋点事件（也可以通过定义统一的基类属性，由于改造成本大，笔者未采用此种方案），对于IOS端可以通过动态扩展系统基类来绑定。移动端访问界面时如果需要显示转化率热力图，则根据窗体名称和版本号从云端获取相关埋点数据，通过反射自动匹配事件名称对应的控件，根据指标值赋予不同的色值，以半透明的颜色覆盖，这样就可以直观的看到每个功能控件对应得到转化率数据，大大的节省了运营人员制作转化率热力图的成本。

图5 事件历史趋势

图6 转化率热力图

5、实现效果和收益

产品埋点可视化工具已经上线近半年，经过实际使用主要有四个方面的价值。

1）提升运营、产品和研发人员工作效率

产品运营同学在使用App过程中可以随时随地查看埋点信息，减少了研发同学定位埋点问题的时间，按需自动生成转化率热力图，再也不用因为转化率热力图制作成本高而烦恼，大大提升了大家的工作效率。

2）所见即所得，简便易用

在使用App过程中，按需点击悬浮窗开关即可查看埋点数据，实时一目了然。

3）多维度信息辅助及时发现埋点问题

通过实时展示埋点期望信息和实际上报信息便于及时发现埋点的问题；在App端支持很方便地对比多端、多版本埋点趋势，通过分版本对比数据就可以确认埋点信息在新版本中是否有问题，通过分端对比就可以发现Android和IOS端两端是否正常。

4）发现埋点问题提前到测试环节

研发测试同学在测试环节就可以直观的对比埋点期望信息和实际上报信息是否一致，更早的发现问题，避免上线后发现带来损失。

总体来说产品埋点可视化工具使得产品运营同学在数据分析时如虎添翼，数据分析效率提升2倍以上。

另一方面由于埋点可视化工具简单易用，研发和测试同学在测试环节很容易发现问题，埋点问题减少了80%。

6、后续规划

后续我们将继续扩展App埋点可视化工具，将产品运营同学经常关注的指标和信息以直观简便的形式展现出来。同时鉴于埋点可视化工具的实用价值将理念扩展到H5页面中，结合H5的生命周期和渲染原理，提供H5版埋点可视化功能。

作者简介

汽车之家

经销商技术部-移动App团队

张慧吉

汽车报价App技术负责人，在保质保量完成研发任务同时，研发了广告智能截图系统、PhoneBus远程真机平台，不断尝试技术创新创造业务价值。

阅读更多：

▼ 关注「之家技术」，获取更多技术干货 ▼

继续滑动看下一个