Flutter SDK 全埋点

最低支持的版本：1.4.0

1.1 完整 Demo

import 'package:rangers_applog_flutter_plugin/autotrack.dart';
...

class _MyAppState extends State<MyApp> {
    @override
    void initState() {
      RangersApplogAutoTrack().config(RangersApplogAutoTrackConfig(
        pageConfigs: [
          RangersApplogAutoTrackPageConfig<Home>(
            pageID: 'home-id',
            pageTitle: 'Home',
            pagePath: '/home-custom',
            ignore: false,
          ),
          RangersApplogAutoTrackPageConfig<Page2>(
            pageID: 'page2-id',
          ),
          RangersApplogAutoTrackPageConfig<Page3>(
            pageID: 'page3-id',
          ),
        ],
        ignoreElementKeys: [],
      )).enablePageLeave().enableLog().enable();
      super.initState();
    }
    
    ...
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        navigatorObservers: RangersApplogNavigationObserver.wrap([]),
        initialRoute: '/',
        routes: {
          '/': ((context) => Home()),
          '/page2': ((context) => Page2()),
          '/page3': ((context) => Page3()),
        },
      );
    }
}

1.2 MaterialApp 中增加 navigatorObservers

全埋点中 pageview，pageleave 是通过 NavigatorObserver 采集的，我们可以直接在 MaterialApp 中配置 RangersApplogNavigationObserver：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorObservers: [RangersApplogNavigationObserver()],
    ...
  );
}
...

也可以在已有的 navigatorObservers 列表中，通过 RangersApplogNavigationObserver.wrap 包裹：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorObservers: RangersApplogNavigationObserver.wrap([]),
    ...
  );
}
...

2.1 启用全埋点

在 App 的 initState() 中启用全埋点：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
@override
  void initState() {
    RangersApplogAutoTrack().enable();
    super.initState();
  }
  ...

2.2 全埋点开关

全埋点默认关闭，可通过以下方法打开：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().enable();

关闭全埋点：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().disable();

2.3 pageview 开关

pageview 默认开启，可用以下方法关闭：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().disablePageView();

开启 pageview：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().enablePageView();

2.4 pageleave 开关

pageleave 默认关闭，可用以下方法开启（入参为 true，或者不传）：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().enablePageLeave();

关闭 pageleave：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().disablePageLeave();

2.5 click 开关

click 默认开启，可用以下方法关闭：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().disableClick();

开启 click：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().enableClick();

2.6 设置 click 元素的自定义ID

我们通过 Key 来设置元素的自定义 ID，自定义 ID 在 click 埋点中会放在 element_manual_key 字段中一起上报，值是 Key 的 toString() 方法返回值，可以直接使用 RangersApplogElementKey。
触发 click 埋点的元素目前支持以下组件：

• GestureDetector
• InkWell
• ElevatedButton
• ListTile

对于支持列表以外的组件，则无法通过 Key 设置自定义 ID，click 埋点会触发在组件内部的 GestureDetector 上。

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
ListTile(
  key: RangersApplogElementKey('custom-key'),
  title: Text("Click Me"),
  onTap: () {}
)
...

2.7 忽略 click 元素

如果不希望统计某些元素的 click 埋点，可以通过以下办法忽略 click 元素：
通过 RangersApplogElementKey 设置 ignore：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
ListTile(
  key: RangersApplogElementKey('custom-key', ignore: true),
  title: Text("Click Me"),
  onTap: () {},
)
...

通过 ignoreElementKeys() 方法指定元素的 key：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
final customKey = RangersApplogElementKey('custom-key');

...
RangersApplogAutoTrack().ignoreElementKeys([customKey]);

...
ListTile(
  key: customKey,
  title: Text("Click Me"),
  onTap: () {},
)
...

通过 ignoreElementStringKeys() 方法指定元素 key 的 string 值，只要与 key 的 toString() 返回值匹配即可生效，这里建议使用 RangersApplogElementKey：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

...
RangersApplogAutoTrack().ignoreElementStringKeys(['custom-key']);

...
ListTile(
  key: RangersApplogElementKey('custom-key'),
  title: Text("Click Me"),
  onTap: () {},
)
...

2.8 开启日志

日志默认关闭，可通过以下方式开启：

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().enableLog();

3.1 示例

• pageConfigs：用于配置页面的参数，影响 pageview，pageleave 埋点。需要指定页面的类型，配置只对指定页面生效。
  • pageID：页面的自定义 ID，在 pageview，pageleave 埋点中会放在 page_manual_key 字段上报。
  • pageTitle：页面的标题，如果不配置，则使用 AppBar 中指定的 title，配置后优先使用配置的值。在 pageview，pageleave 埋点中会放在 page_title 字段上报。
  • pagePath：页面的路径，如果不配置，则使用 MaterialApp 中通过 routes 配置的路径，配置后优先使用配置的值。在 pageview，pageleave 埋点中会放在 page_path 字段上报。
  • ignore：默认为 false，设置为 true 后会忽略当前页面的 pageview，pageleave 埋点。
• ignoreElementKeys：忽略入参中通过 Key 指定元素的 click 埋点。
• ignoreElementStringKeys：忽略入参中通过字符串指定元素的 click 埋点，匹配方式是字符串内容必须与元素 key 的 toString() 返回值相同。
• enablePageView：默认为 true，设置为 false 后会关闭所有的 pageview 埋点。
• enablePageLeave：默认为 false，设置为 true 后会开启所有的 pageleave 埋点。
• enableClick：默认为 true，设置为 false 后会关闭所有的 click 埋点。

import 'package:rangers_applog_flutter_plugin/autotrack.dart';

RangersApplogAutoTrack().config(RangersApplogAutoTrackConfig(
  pageConfigs: [
    RangersApplogAutoTrackPageConfig<Home>(
      pageID: 'home-id',
      pageTitle: 'Home',
      pagePath: '/home-custom',
      ignore: false,
    ),
    RangersApplogAutoTrackPageConfig<Page2>(
      pageID: 'page2-id',
    ),
    RangersApplogAutoTrackPageConfig<Page3>(
      pageID: 'page3-id',
    ),
  ],
  ignoreElementKeys: [],
  ignoreElementStringKeys: [],
  enablePageView: true,
  enablePageLeave: false,
  enableClick: true,
));