Web圈选之智能圈选

在圈选网页元素时，除了手动调整文本、链接、位置等属性之外，还可以通过自动/手动/相似三种模式来调整圈选属性。但是理解这三种模式之间的差别，需要一些HTML和xPath的知识，所以如果您对上述两个概念并不熟悉的话，就无需调整，使用默认的“自动模式”就好。介绍如下：

自动模式（智能圈选）：

在默认条件下，GrowingIO将以自动模式进行圈选。自动模式在我们内部也叫“智能圈选”，是指通过机器学习的方式来将网页内元素的xPath进行分类，并自动生成一些规则，在圈选的时候通过这些规则来筛选元素。智能圈选的目的是让用户可以更精准地圈选到想要圈的元素。

更详细一点说：当你圈选一个元素的时候，GrowingIO会获取到这个元素在当前页面上的xPath路径，并通过这一路径去数据库里筛选所匹配的事件（浏览/点击）。而问题在于，现在很多网页设计较为复杂，针对不同的用户可能会呈现不同的页面布局和结构，同一个元素在A用户打开时可能是a路径，而在B用户打开时可能就是b路径了。而在圈选时，我们只能捕捉到当时的那一个路径（比如是a路径），那么就会因为没有计算b路径的事件量而造成数据偏低。而智能圈选功能能自动识别a路径与b路径之间的关联，将它们归为一类。当你圈选时，就能自动筛选出a路径+b路径下的所有事件量，从而让数据更准确，不缺失。

智能圈选功能目前的准确率约为95%（通过机器学习，这个比例还将随着时间不断提高），也就是大部分情况下自动模式都可以满足用户的需要。当极少数情况下，自动模式不能准确地筛选元素路径时，您可以通过“手动模式”来调整。

手动模式：

当自动模式或相似模式不能满足您的需求时，您可以通过手动模式来调整xPath表达式。

在“容器选择”中可以看到当前元素的所在容器，从上到下依次为从父级容器到子级容器的标签名，例如，div、li、a、span等。点击每一个容器的小三角，可以下拉展开，看到此容器的id和class信息。每一个标签、id和class后面都有一个“✓”，点击这个勾就可以将这个标签、id或者class在xPath中进行模糊匹配。以下将举例说明。

以一个简单的文字链接为例，上图为圈选时的展开的“容器选择”部分，一共显示有三层容器，标签分别是div、div和a。如果不进行任何手动操作，那么生成的xPath就是

/div.jumbotron.text-center/div.container/a.btn.btn-default.btn-lg

就会精确匹配这个xPath路径下的元素。

当取消勾选a标签下的class属性时，如上图，筛选的xPath规则就会变成这样：

/div.jumbotron.text-center/div.container/a* 

当取消勾选某个标签时，其下的属性也会同时被模糊匹配。例如取消勾选第二层div标签，那么xPath规则就会变成这样：

/div.jumbotron.text-center/*/a.btn.btn-default.btn-lg 

相似模式：

相似模式能够自动识别网页中的相似元素，并将他们一起圈选出来。

相似的元素可以是一个列表中的序列，也可以是两个相似的容器中的相似元素。相似模式其实也是一种对xPath的模糊匹配规则，您可以从“容器选择”中看出来。