前端元素定位xpath_页面埋点之一可视化埋点：基于Xpath的方案，对手动埋点的补充...

可视化埋点(框架式埋点、无痕埋点)

解决了纯手动埋点的开发成本和更新成本，通过可视化工具快速配置采集节点(圈点)，在前端自动解析配置，并根据配置上传埋点数据，比起手动埋点看起来更无痕，这里的配置数据可以设置过滤条件，避免针对所有元素(比如全埋点)，可以在调用开启自动监控API时通过设置一些特征属性，来过滤不符合条件的元素，实现只针对某些元素进行自动上报数据的需求。

比如国外比较早做可视化的是Mixpanel，国内较早支持可视化埋点的有TalkingData、诸葛IO，2017年腾讯的MTA也宣布支持可视化埋点；相比于手动埋点更新困难，埋点成本高的问题，可视化埋点优化了移动运营中数据采集的流程，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更简化，也更方便产品的迭代。

可视化埋点中多数基于Xpath的方案，XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。

比如上图中标识的位置，其中的xpath是：//*[@id="projects"]/a4/img，如果换成DOM的selector：#projects > a:nth-child(4) > img。通过这些信息可以精准定位到一个DOM节点，xpath方案分为精确路径和概略路径两种做法，精确路径从被点击的元素不断向上冒泡查找到根节点，并记录过程中每个节点的。如果用户阻止了冒泡会导致失效，概略路径是在前者的基础仅仅向上查找白名单中的节点。但是如果DOM节点有任何变化，对应的xpath数组就是被打乱，很容易影响采集。

可视化埋点配置化能力相对手动埋点更强，是对手动埋点的补充而不是代替，很多手动埋点点都可以通过好的规划和架构变为可视化埋点。