基于Google扩展实现严选主站埋点可视化分析

1. 背景

2. 需求分析 

  本次需求实现的大前提很重要，是不能影响正常的用户交互行为和点击行为，当用户不想查看这些可视化分析数据时候，主站页面跟普通用户看到的页面没有任何差异。当用户想查看可视化分析数据的时候，可以一键查看。具体的需求包括两大部分：

  第一部分需求是total-view，是指对于每个主站页面（商品详情页，首页，活动页，类目页，主题页，品牌商页面等等主站页面），能够自动展示该页面用户pv、uv、浏览时长、跳失率等众多指标，这些指标的获得需要根据该页面的埋点类型event_action、埋点参数parameters、埋点名称event_name获取。同时这些指标用户可以选择前台展示或隐藏。示例效果图如下：

   

  第二部分需求是click-view，是指对于每个主站页面中的每个坑位或可点击区域，该区域能够添加较为明显的背景色，并在区域的几何中心展示实时pv指标。如果用户鼠标停留在该区域一定时长后，浮框显示该区域pv、uv、引导转换、商品排行等众多数据，鼠标移开则隐藏浮框。示例效果图如下，淡红色背景色是坑位区域（颜色可配置），区域中心的红色数字表示实时pv。

  基于上述两个需求，可以发现，插件向主站注入的代码不仅要完成构建容器来展示与神相（浮框内的数据指标）相关的工作，还要完成分析主站代码，注入插件css标示坑位，获取并添加、更新实时pv指标、控制插件开关和插件工作环境等工作。

  上述job由插件job管理模块统一管理，各job的具体工作内容如下：

• 位置记录job，记录用户在页面上的点击行为信息，包括点击位置的x、y坐标，点击元素。这些信息会作为坑位识别与绘制job的输入之一。
• 预定义click-view查询job。通过审查主站页面元素信息，会发现主站已经预定义了一些常规埋点信息，如下图所示：

      如上图所示，Kenneth Cole制造商的埋点信息在生成页面的时候，已经预先以>预定义click-view查询job可以在页面加载完成后，遍历dom树，获取到所有预定义click-view埋点信息，并将这些信息交给坑位识别与绘制job，将这些区域绘制出来。

• 用户点击click-view监听job，该job主要对http请求进行监听，过滤出click类型的埋点请求，根据位置记录job提供的信息，可以得到哪个页面元素埋了click类型埋点请求，并将这些信息添加到实时pv定时更新job维护的集合中。
• 实时pv定时更新job，该job维护了一个集合set，这个set中的每一项是页面埋点的元素及该元素对应的埋点信息。因此，整个set存放的是当前页面已发现的所有具有埋点信息的页面元素及对应的埋点信息。
• 坑位识别与绘制job，主要根据“实时pv定时更新job”维护的set中的埋点元素，计算和识别应该添加背景色的实际页面元素。因为DOM结构的嵌套关系和事件冒泡的原因，用户可能点击包含set中的页面元素时，发送的埋点信息是一致的，因此该job主要负责找到尽可能大的区域，满足点击该区域内任意位置发送的埋点信息都是一致的。
• 指标容器管理job。该job主要负责“坑位识别与绘制job”绘制完一个页面区域后，添加事件监听，并提供一个click-view指标查看的单例容器，当用户行为满足触发容器显示的条件时，“指标容器管理job”获取当前区域的埋点信息，并将埋点信息传递给容器中，由容器调用神相完成指标的展示。 

  下图是整个系统的架构图：

• 插件控制模块主要用于监测页面url，基于规则，控制插件的可用性和是否注入content-script。
• 插件控制模块可以读取插件缓存，控制插件开关，控制插件使用环境（测试环境或线上环境），也能决定插件的可用性。该模块的实现需要background和popup-js两部分代码的配合工作才能实现。注意到，popup页面主要负责插件的用户设置工作。
• 页面请求控制模块主要用于监听页面http请求并过滤，只对页面埋点请求进行特殊处理。页面请求控制模块会基于插件控制和插件缓存决定是否将过滤到的请求通过消息管理模块发送给插件job管理模块。
• 消息的流动是单向的，插件job管理模块只需要监听底层发送给它的消息，并进行消息分类处理。因此插件job管理模块只需要关心如何处理消息。
• 插件job管理模块，主要管理各job正常工作，各job之间的依赖关系在本章开头已经做了详细介绍。job管理模块也是不同插件项目的核心所在，这个模块也是插件的主要业务模块。
• 最顶层模块是用来展示页面指标的神相模块，该模块内容依赖于指标容器提供的url，神相通过解析url拿到必需的埋点信息，根据埋点信息请求神相后端，获取相应的指标。   

5. 规划

  1） 当前神相可视化出来的页面实时pv区域的别景色都是一种颜色，后期可以根据pv的不同，使用不同深浅的颜色，这样更能明显的体现出用户访问的热区。

  2）将需要用户点击才能计算埋点区域的埋点信息（称为计算埋点区域）记录在后端，这样随着用户的使用，后端会增量地存储每个页面的计算埋点区域，这样当新用户使用神相插件的时候，能够看到所有更多的click-view坑位区域信息，而不仅有预定义的click-view坑位区域。