手机APP嵌入开启可视化功能的SDK,通过WebSocket的方式和服务器、前端进行相互通信,SDK会定时收到服务器下发的页面请求;然后会上报页面快照和界面因子信息到服务器,服务器收到信息后会根据界面因子信息对页面的每个元素进行分析,根据控件的类型来标记哪些页面元素是可以被埋点的,最后将可埋点信息交给前端渲染,此时,前端Web页面上展示就的就是可以埋点的页面。
埋点人员在渲染出来的前端Web页面上进行框选,标记事件属性等进行埋点。前端Web页面会将对应的埋点信息传递给服务器保存,SDK则会通过策略定时从服务器获取埋点信息。
WebSocket通信
由于埋点过程中需要设备APP与前端埋点Web页面进行长时间的连接,并且连接期间双方需要进行互相通信,所以就需要一种高效的支持双向通信的协议来支持这种场景。WebSocket是用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术,它基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。
在具体的连接过程中,其实前端Web页面和SDK与服务器的连接都是基于WebSocket的,并且这两个连接最终会建立一个一对一的对应关系。易观在埋点的过程中规定,同一个版本的APP只允许一台设备进行连接埋点。
数据埋点过程
数据埋点过程是通过Http协议来实现的。服务器提供相关的埋点查询新增修改删除的接口。埋点人员通过浏览器在具体的埋点Web页面对埋点元素进行框选,继而填写对应的事件名称,然后点击相应的新增修改删除按钮即可。
用户编辑的所有的埋点信息最终都会保存到MySQL数据库中。用户最新的快照信息会保存在Redis中一段时间,供用户修改埋点的时候调用。用户编辑完所有的埋点后点击部署按钮,所有的埋点就会实时生效,其他设备上的APP就会获取到部署后的埋点信息。