Flutter SDK - 跟踪屏幕和视图

关于使用 Flutter 跟踪器跟踪屏幕和视图的详细信息

Flutter SDK ⁠-⁠ 跟踪屏幕和视图

启用 analytics(默认启用)后,跟踪器会自动捕获点击、滑动、视口变化和输入事件。屏幕和单个视图则通过两个导出的组件(widget)上报。

将 ORNavigatorObserver 添加到应用的导航器中,以记录路由切换:

import 'package:openreplay/openreplay.dart';

MaterialApp(
  navigatorObservers: [ORNavigatorObserver()],
  // ...
)

push、pop、replace 和 remove 操作都会被上报。路由以 route.settings.name 命名;未命名的路由会回退为其在栈中的位置(route/2),因此使用命名路由可以让时间线更易读。

用 ORTrackedView 包裹任意组件,即可将其作为一个具名的、可观察的视图上报。它在挂载和卸载时都会发出可见性事件,其名称会用作落在其内部的触摸事件的标签。

  • screenName: String — 屏幕或功能标题
  • viewName: String — 被跟踪视图的名称
import 'package:openreplay/openreplay.dart';

ORTrackedView(
  screenName: 'Checkout',
  viewName: 'Pay button',
  child: ElevatedButton(onPressed: _pay, child: const Text('Pay')),
)

点击和滑动通过指针路由器(pointer router)的全局路由捕获,因此跟踪器可以看到每一个指针事件,而无需参与手势竞技场(gesture arena)的竞争——它不会吞掉你的应用所需的点击。移动距离超过 10 个逻辑像素的指针会被记录为带有主方向的滑动,更短的则记录为点击。

触摸标签来自对指针下方文本的命中测试,或来自外层的 ORTrackedView。

如果你对此流程有任何疑问,欢迎通过我们的 Slack 联系我们,或者查看我们的论坛。