Flutter 集成友盟统计

发布日期:2019年12月30日本文同步发表于公众号:

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

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 行是重点。

打完收功。