目录
一、什么是可视化埋点
常规的项目，埋点的需要前端人员和后端人员共同操作，在需要捕捉的代码处，前端放入一个链接埋点代码，而后端则需要对这个链接的埋点做相应的接收接口，来获取埋点数据。
而可视化埋点的方式是，在前端项目中写上一个SDK引用，SDK里面有什么？
里面包含两个东西
1、圈选、点选（即标记页面元素）的逻辑代码
这段代码主要是应用于，当前页面被运营或者非开发者使用时，对页面进行埋点标记的，通过圈选或者点击选择的方式，获取该元素的Xpath路径，而该路径则存储在埋点数据库中，并带上项目的一些业务参数，例如 该页面元素的系统、菜单、埋点的名称、触发的方式等。
标记元素的方式做法是，在一个埋点管理页中使用iframe嵌套需要埋点的页面（可以想象成一个大DIV里嵌套一个小点DIV），在埋点管理页上，附带上各种相关的工具，例如：圈选、点选、埋点元素渲染，删除埋点、埋点数据列表等，围绕着被埋点的页面开发出一些简单易用可视化操作工具。
说到iframe，就需要两个页面之间互相通信了，常规子消息到父消息，同域名的情况是没问题，但不同域名的情况，就存在跨域的问题，还包括了cookie跨域，两个页面之间交互通信这时就只能使用一个函数来处理了 postMessage()，将Xpath作为参数，再加上一些自己的业务参数，就可以实现像 不同的两个嵌套页面，看起来就像一个页面那般丝滑。
2、捕获监听标记的元素的逻辑代码
在SDK初始化的时候，里面就加一个请求来获取埋点数据库中，该页面的所有埋点元素Xpath路径。在onClick等操作事件的时候，通过获取到Dom元素，可以拿到Xpah的路径，此时就监听到元素被点击了。
二、遇到的坑
1、标记元素兼容性难
开始只做了一个圈选来标记，但不同项目不同的前端代码结构、不同的CSS布局，圈选获取坐标点的方式兼容性很难得到满足。后续为了弥补圈选的缺点，增加点选（右键，左键大多功能冲突），两者才基本满足标记元素的操作，但还是会存在问题，个别系统代码会禁用一些监听事件，导致标记失效、失灵。
2、监听难
如果说监听一个按钮，点了就触发，那没什么问题。但按钮里面如果有其它的元素（例如：图标、span标签），那点击的就是里面的元素了。埋点数据库记录的Xpath路径跟他们可没什么关系。导致监听失败。这里也有非常大兼容问题。需要真正根据实际上遇到的操作去做兼容去优化。
三、优点
1、方便了测试人员和运营人员。
2、埋点的变更是即时的，不需要更新系统代码。
3、可视化操作，小白也知道怎么弄，不需要懂代码。
后续再将一些流程仔细梳理下。。。。
圈选的做法参考：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
