1. 前言
在介绍元素标识之前,先回顾一下之前的《可视化全埋点系列文章之功能介绍篇》,根据这篇文章我们了解到:可视化全埋点事件,是通过可视化的方式,把某些全埋点事件创建成一个重新命名的虚拟事件[1],进而从数量庞大的全埋点事件中快速筛选到我们所关心的事件[2]。
那么问题来了,如何将 SDK 触发的元素点击事件 $AppClick 和前端定义的可视化全埋点事件进行匹配?也就是说,保存了哪些配置信息,就可以唯一标识一个元素,从而筛选出这个元素触发的 $AppClick 事件?
答案是:只有准确地进行元素标识,我们才能将可视化全埋点创建的虚拟事件和元素进行匹配,从而准确筛选出这个元素触发的 $AppClick 事件。
下面,我们就来看下可视化全埋点中如何进行元素标识。
2. 什么是元素标识
2.1. 概念
所谓元素标识,也就是通过某些信息,可以唯一标识某个元素。根据概念,需要实现两点:
- 根据信息,能够筛选出所需的元素,不会遗漏;
- 根据信息,只能筛选出所需的元素,不会多查。
例如:根据某些关键信息,可以唯一定位 App 中商品详情页面的 “加入购物车” 这个按钮元素。需要保证既不会匹配成 “立即购买” 按钮,也不会匹配成商品列表或其他页面的 “加入购物车” 按钮。如图 2-1 所示:
图 2-1 商品详情页面的 “加入购物车” 按钮
2.2. 常见问题
保证元素的唯一标识,意味着在各种复杂环境,都需要保证元素的唯一匹配。在实际项目开发中,会面临一些常见问题:
2.2.1. 系统兼容
采用的元素标识方案,需要兼容不同的系统。例如:iOS14 使用的标识信息,在其他系统也能唯一标识这个元素。
2.2.2. 设备兼容
元素标识需要兼容不同的设备,设备差异对元素标识的主要影响是屏幕尺寸大小。在 iOS 上,大多数 App 开发都会采用自动布局进行屏幕适配。也就是说,可能同一个元素在 iPhone5s 显示在屏幕最底部,但是在 iPhone11 Pro Max 就可能显示在屏幕中间。对于不同的设备,需要可以使用同一套标识信息进行唯一匹配。
2.2.3. 样式改变
上文提到的唯一标识某个元素,是相对于用户交互而言的。随着 App 版本升级,元素的显示样式可能会发生变化,包括但不限于:
- 把按钮的颜色从 “红色” 改成 “蓝色”;
- 把文字内容从 “加入购物车” 改成 “添加购物车”;
- 把按钮形状从圆角改成矩形;
- 移动按钮的位置。
虽然显示样式发生了变化,但是对于当前 App 的用户而言,点击的都还是 “添加商品到购物车” 这个按钮。至于形状或颜色,用户并不关注。
用户行为采集是为了支撑业务分析,从业务的角度来看,因为这些样式变化都没有改变这个元素的业务功能(例如把一个商品添加到购物车),所以也不影响最终的分析结果。
因此,即使元素的样式变化了,之前存储的标识信息,还可以继续标识这个元素。
3. 如何进行元素标识
了解元素标识的概念和常见问题之后,我们来看下进行元素标识的方案有哪些。
3.1. Target + Action + Tag
3.1.1. 方案说明
在 iOS 开发中,针对一个元素(例如 UIButton)添加点击事件,一般的实现方法如下:
MyViewController.m
|
针对 UIButton,只有存在 target-action,才有可能触发点击事件。
一般来说,某个元素添加 target-action 创建点击事件后,这时候 target-action 是唯一确定的。另一方面,同一个页面(即 target 相同)不同元素添加点击事件对应的方法名 action 一般是不同的。
当然,如果多个不同按钮添加同一个 action,在业务开发中通常会给按钮设置 tag,并在 action 中使用 tag 区分不同元素。例如:
|