无规则采集器列表算法(“无埋点圈选”之整体架构Hybrid关系H5)
优采云 发布时间: 2022-02-20 07:29无规则采集器列表算法(“无埋点圈选”之整体架构Hybrid关系H5)
前段时间，团队做了一个项目，叫“无埋点圈选”。目的是无需为应用程序中的特殊按钮或事件编写埋点。”点，然后在app端配置下拉方式获取埋点信息，实现埋点数据的自动传输。
工作过程
圈选的主要步骤是
以及 data采集 时的步骤是
需要注意的是，Native部分的控件是由app SDK处理的，而webview中的页面则是由app SDK将特定的js注入到webview中，然后由js负责处理。
整体架构混合关系
H5与SDK部分的关系如下：
1
2
3
4
5
6
7
8
发起请求
SDK ------------> 注入js (根据功能场景注入下面不同的js文件)
getViewportTree
圈选js -------------------> 得到页面可视结构 (由SDK主动调用js bridge)
*敏*感*词*点击事件，事件过滤，调用SDK
采集js --------------------------------> 由SDK处理日志发送
其中，“circle js”只负责分析当前页面的视觉结构，并将结果传递给SDK端。而“采集js”只负责*敏*感*词*当前页面事件，根据跟踪点配置过滤出有效的跟踪点事件，发送给SDK端（SDK负责处理日志发送）
圈出零件以获得视觉结构
树遍历算法
1
TO be continue
效果图
结构化数据表示
视觉结构取自 DOM 文档。本质上还是用XPath来表示文档中某个DOM节点的路径，比如BODY[0]/DIV[0]#main/DIV[1]/A[0]#查询
为了方便与其他终端进行数据交互，这里使用统一的JSON结构来表示任意控件元素的路径，包括Native中的部分和webview中的部分。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
path: [
{
p: 'UIWebView', // 路径上的path节点类型
i: '0', // 节点index，相对于"同类型"控件
t: 'UIWebView' // 控件继承的系统控件类型
}
],
type: 'UIWebView', // 系统控件类型
url: 'http://m.ctrip.com/html5/', // 只有webview时才有url字段
value: '', // SDK端从控件属性取出来
frame: { // 相对于当前屏幕左上角，四舍五入
x: 0,
y: 100,
w: 320,
h: 480
},
child: [
{
// H5中的路径表示法与 Native 保持一致，由于H5中不会存在父元素不可圈选而子元素可圈选的情况
// 因此 H5 的文档数据中，每个节点的 path 数组里都只有1项
path: [
{
p: 'BODY', // H5中即 tagName （**从BODY开始**）
i: '0', // 同类 tagName 在父节点中的 index
t: 'BODY' // H5中只有使用自定义标签（如 ）时，t 和 p 才不同
}
],
type: 'BODY' // 同 path 数组中最后一项的 t
value: '', // H5中约定：详见“获取节点content”
frame: { // 相对于当前webview左上角（webview有可能不撑满手机屏幕）
x: 10, // 注： 可能设有 margin
y: 10,
w: 300,
h: 460
},
child: [
{
path: [
{
p: 'DIV',
i: '0',
t: 'DIV',
d: 'mainContainer' // 元素有id时存在此字段
}
],
type: 'DIV',
value: '',
frame: {...}
child: [...]
}
]
}
]
}
获取节点内容
节点内容是一个DOM节点的内容副本，不能用innerText来概括，但要根据节点类型取不同的属性
如果有 title alt 属性，则使用它的值作为内容值。如果元素具有 contenteditable 属性（作为可编辑元素），则不要获取内容。如果元素没有子元素（结束叶子节点），如果元素还有子元素，直接取innerText。，取所有文本节点（也是它的子节点，并且nodeType==3）上面过程不满足，返回一个空字符串采集部分事件捕获
下面主要记录实现H5页面的数据采集时，触摸事件遇到的坑。
安卓IOS
使用 touchend 跳转客户网页
*敏*感*词*点击事件
OK（只要用户没有故意阻止touchend中的事件preventDefault）
抓不住
*敏*感*词*触摸事件
好的
抓不住
在客户网页中使用正常的点击跳转
*敏*感*词*点击事件
好的
好的
*敏*感*词*触摸事件
好的
不能排除safari双击放大，第一次双击还是会触发匹配过程
在客户页面中使用快速点击跳转
*敏*感*词*点击事件
好的
好的
*敏*感*词*触摸事件
好的
也不能很好地处理双击问题
几种现象
妥协
路径匹配算法
H5页面上可能有很多[Buried Points]元素路径被圈出来了。遍历每条圈出的路径并对其进行评分的算法（最多1轮循环）用于找到最佳匹配规则，以确保最多1个圈选被触发事件。
1
TO be continue
坏案例
下面主要记录下开发过程中发现的一些特殊情况以及相应的处理措施。
案例阶段状态备注
float父元素的折叠直接过滤
圆圈
固定的
暂时不直接过滤高度为0的节点，在区域裁剪中也加入了溢出判断。
轮播banner不能圈出（要看轮播的具体实现）
圆圈
待办的
可以圈出，但只能是当前帧的图片。如果图像填满了整个轮播容器，它将无法环绕整个轮播。.
如果通过
