可视化全埋点系列文章之元素标识篇

1. 前言

在介绍元素标识之前，先回顾一下之前的《可视化全埋点系列文章之功能介绍篇》，根据这篇文章我们了解到：可视化全埋点事件，是通过可视化的方式，把某些全埋点事件创建成一个重新命名的虚拟事件[1]，进而从数量庞大的全埋点事件中快速筛选到我们所关心的事件[2]。

那么问题来了，如何将 SDK 触发的元素点击事件 $AppClick 和前端定义的可视化全埋点事件进行匹配？也就是说，保存了哪些配置信息，就可以唯一标识一个元素，从而筛选出这个元素触发的 $AppClick 事件？

答案是：只有准确地进行元素标识，我们才能将可视化全埋点创建的虚拟事件和元素进行匹配，从而准确筛选出这个元素触发的 $AppClick 事件。

下面，我们就来看下可视化全埋点中如何进行元素标识。

2. 什么是元素标识

2.1. 概念

所谓元素标识，也就是通过某些信息，可以唯一标识某个元素。根据概念，需要实现两点：

1. 根据信息，能够筛选出所需的元素，不会遗漏；
2. 根据信息，只能筛选出所需的元素，不会多查。

例如：根据某些关键信息，可以唯一定位 App 中商品详情页面的 “加入购物车” 这个按钮元素。需要保证既不会匹配成 “立即购买” 按钮，也不会匹配成商品列表或其他页面的 “加入购物车” 按钮。如图 2-1 所示：

图 2-1 商品详情页面的 “加入购物车” 按钮

 

2.2. 常见问题

保证元素的唯一标识，意味着在各种复杂环境，都需要保证元素的唯一匹配。在实际项目开发中，会面临一些常见问题：

2.2.1. 系统兼容

采用的元素标识方案，需要兼容不同的系统。例如：iOS14 使用的标识信息，在其他系统也能唯一标识这个元素。

2.2.2. 设备兼容

元素标识需要兼容不同的设备，设备差异对元素标识的主要影响是屏幕尺寸大小。在 iOS 上，大多数 App 开发都会采用自动布局进行屏幕适配。也就是说，可能同一个元素在 iPhone5s 显示在屏幕最底部，但是在 iPhone11 Pro Max 就可能显示在屏幕中间。对于不同的设备，需要可以使用同一套标识信息进行唯一匹配。

2.2.3. 样式改变

上文提到的唯一标识某个元素，是相对于用户交互而言的。随着 App 版本升级，元素的显示样式可能会发生变化，包括但不限于：

1. 把按钮的颜色从 “红色” 改成 “蓝色”；
2. 把文字内容从 “加入购物车” 改成 “添加购物车”；
3. 把按钮形状从圆角改成矩形；
4. 移动按钮的位置。

虽然显示样式发生了变化，但是对于当前 App 的用户而言，点击的都还是 “添加商品到购物车” 这个按钮。至于形状或颜色，用户并不关注。

用户行为采集是为了支撑业务分析，从业务的角度来看，因为这些样式变化都没有改变这个元素的业务功能（例如把一个商品添加到购物车），所以也不影响最终的分析结果。

因此，即使元素的样式变化了，之前存储的标识信息，还可以继续标识这个元素。

3. 如何进行元素标识

了解元素标识的概念和常见问题之后，我们来看下进行元素标识的方案有哪些。

3.1. Target + Action + Tag

3.1.1. 方案说明

在 iOS 开发中，针对一个元素（例如 UIButton）添加点击事件，一般的实现方法如下：

MyViewController.m

- (void)viewDidLoad {     [super viewDidLoad];     // 省略其他逻辑     [self.myButton addTarget:self action:@selector(onButtonClick:) forControlEvents:UIControlEventTouchUpInside]; } - (IBAction)onButtonClick:(UIButton *)sender {     // 按钮点击的业务实现 }

针对 UIButton，只有存在 target-action，才有可能触发点击事件。

一般来说，某个元素添加 target-action 创建点击事件后，这时候 target-action 是唯一确定的。另一方面，同一个页面（即 target 相同）不同元素添加点击事件对应的方法名 action 一般是不同的。

当然，如果多个不同按钮添加同一个 action，在业务开发中通常会给按钮设置 tag，并在 action 中使用 tag 区分不同元素。例如：

- (IBAction)onButtonClick:(UIButton *)sender {     if (sender.tag == 1) {         // 按钮 1 点击     } else if (sender.tag == 2) {