基于UI Observer实现UI组件埋点

组件埋点基本介绍

组件埋点是一种在前端开发中常用的数据采集方法，它通过在页面中的组件（例如按钮、输入框、下拉框等）上添加跟踪代码，来收集用户的操作行为数据。这些数据可以帮助开发人员分析用户的使用习惯、行为路径等信息，从而优化产品的设计和功能。

组件埋点的实现方式通常包括以下几个步骤：

1. 确定需要收集的数据类型和指标，例如点击次数、输入内容、页面停留时间等。
2. 在页面中的组件上添加跟踪代码，通常是在组件的事件处理函数中调用一个统一的数据采集函数。
3. 将采集到的数据发送到后端服务器进行存储和分析。
4. 对采集到的数据进行分析和处理，以便于开发人员进行产品优化和改进。

本文主要介绍如何在鸿蒙中实现埋点数据的收集，上报展示数据方式为反显到屏幕中，如下图所示，可根据实际进行调整

常见场景实现

按钮点击：全局监听用户在页面中触发的点击事件。

点击事件分为手势事件和click事件，通过UIObserver.on('willClick')方法注册点击事件和手势事件监听，后续页面中所有的onClick与gesture都可以监听到，这个监听在同一个UIContext下是全局生效的；在用户触发点击操作后，会回调返回当前点击元素的FrameNode对象和event事件对象，通过FrameNode可以获取到当前组件的相关信息，如ID、父子节点、组件大小等等，详情请见官网文档FrameNode。用户可根据自己实际需要获取对应信息上报，当前案例仅获取ID与相对屏幕的位置为例子。

下面代码中registerClickAndGestureListener可以同时注册手势监听与点击事件监听，非必填参数callBack用于处理用户一些自定义埋点逻辑，会在回调函数中带出当前的事件对象event和触发该事件的FrameNode节点，具体请看下面实现：

import { FrameNode, uiObserver, UIObserver } from '@kit.ArkUI';
import { ClickEventListenerCallback, GestureEventListen