You need to enable JavaScript to run this app.
导航
Flutter SDK 全埋点
最近更新时间:2024.05.29 16:21:47首次发布时间:2023.04.13 11:18:16

1. 接入全埋点

最低支持的版本: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. 使用全埋点

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 配置(可选)

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,
));