Flutter 集成友盟统计

Flutter 开发的 App 实现埋点，如果需要集成友盟统计，使用这个插件： umeng_analytics_plugin (https://pub.dev/packages/umeng_analytics_plugin)

toc

• 0、前期准备
• 1、安装 umeng_analytics_plugin
• 2、初始化
• 3、上报数据
• 4、自动收集页面事件

0、前期准备

到 https://www.umeng.com/ 注册友盟账号，并在移动统计模块，注册两个 App，一个安卓一个 iOS。友盟将一个 App 的安卓版和 iOS 版当做两个 App 来看待。注册后，得到两个 App Key，复制下来。

1、安装 umeng_analytics_plugin

打开 Flutter App 的 pubspec.yaml 文件，在 dependencies 里加入 umeng_analytics_plugin：

dependencies:
  umeng_analytics_plugin: ^1.0.1

今天是 2019 年 12 月 30 日，umeng_analytics_plugin 的最新版是 1.0.1。

2、初始化

在 App 的初始化代码里，调用 umeng_analytics_plugin 的初始化方法：

await UMengAnalyticsPlugin.init(
    androidKey: '5dfc5b91cb23d26df0000a90',
    iosKey: '5dfc5c034ca35748d1000c4c',
);

初始化很简单，只需要传入在第 0 步申请的安卓和 iOS 两个 app key。如果需要修改更多参数，请参考 umeng_analytics_plugin 文档，不过一般不用改。

3、上报数据

插件提供了三个方法，分别是进入页面，离开页面和自定义事件。调用方法如下：

UMengAnalyticsPlugin.pageStart('page');
UMengAnalyticsPlugin.pageEnd('page’);
UMengAnalyticsPlugin.event(‘event’, label: ‘label');

4、自动收集页面事件

如果每个页面都要手工调用，累死了。所以这里设置一种自动收集的方式。自动收集的原理就是监听 Navigator 的 push 和 pop 动作并上报。同时，你也能发现，如果是程序自己控制的页面转换，则需要手工处理了。

在构造 MaterialApp 时，使用 AppAnalysis 类监听导航

MaterialApp(
    ...
    onGenerateRoute: Router.generateRoute,
    navigatorObservers: [AppAnalysis()],
    ...
)

第四行是重点。

AppAnalysis 类参考实现代码

class AppAnalysis extends NavigatorObserver {
    @override
    void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
        if (route.settings.name != null) {
            UMengAnalyticsPlugin.pageStart(route.settings.name);
        }
    }

    @override
    void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
        if (route.settings.name != null) {
            UMengAnalyticsPlugin.pageEnd(route.settings.name);
        }
    }
}

使用上述方式，记得设置 route name，否则 route.settings.name 取出为空，参考 router.dart 文件：

class RouteNames {
    static const String INDEX = '';
    static const String LOGIN = 'login';
}

class Router {
    static Route<dynamic> generateRoute(RouteSettings settings) {
        switch (settings.name) {
            case RouteNames.LOGIN:
                return MaterialPageRoute(
                    settings: RouteSettings(name: RouteNames.LOGIN),
                    builder: (context) => LoginView(),
                );
            default:
                return MaterialPageRoute(
                    settings: RouteSettings(name: RouteNames.INDEX),
                    builder: (context) => IndexView(),
                );
            }
    }
}

第 11 行是重点。

打完收功。