firebase - 如何在 Firebase 分析中跟踪 Flutter 屏幕？

Question

我有一个 Flutter 应用，我正在 Flutter 上测试 Google Analytics for Firebase。

我想看看我们的用户(好吧，现在是我)正在访问的路线。我按照 firebase_analytics 中的设置步骤进行操作我也检查了他们的示例应用程序。我启用了 Analytics 的调试，如 Debug View docs 中所述。

不幸的是，我在 Analytics Debug View 中收到的唯一两种屏幕 View (firebase_screen_class) 是 Flutter和 MainActivity .

我希望看到 /example-1 , /example-2和 /welcome某处，但我没有。

这是我在 Flutter 中运行的应用程序

class App extends StatelessWidget {
  final FirebaseAnalytics analytics = FirebaseAnalytics();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: <String, WidgetBuilder>{
        '/example-1': (_) => Example1(),
        '/example-2': (_) => Example2(),
        '/welcome': (_) => Welcome(),
      },
      home: Welcome(),
      navigatorObservers: [FirebaseAnalyticsObserver(analytics: analytics)],
    );
  }
}

Answer 1

这个确切的用例在 Track Screenviews 下的 Firebase Analytics 文档中。部分。

Manually tracking screens is useful if your app does not use a separate UIViewController or Activity for each screen you may wish to track, such as in a game.

这正是 Flutter 的情况，因为 Flutter 负责屏幕更新:大多数简单的 Flutter 应用程序运行一个单独的 FlutterActivity/FlutterAppDelegate 并负责自行渲染不同的屏幕，因此让 Firebase Analytics 自动跟踪屏幕不会带来预期的效果。

就我过去的经验而言，FirebaseAnalyticsObserver 并不是很有帮助，但是，我也向您推荐 check their docs again ，他们确实暗示事情应该“正常工作”。我最好的猜测是它对我来说效果不佳，因为我没有在我的任何路线 * 上使用 RouteSettings。。 p>

如果 FirebaseAnalyticsObserver 无法工作或不适用于您的应用，那么在过去几个月的开发过程中，下一种方法对我来说效果很好。

如果您调用 setCurrentScreen，您可以随时使用 FirebaseAnalytics 设置当前屏幕带有屏幕名称的方法:

import 'package:firebase_analytics/firebase_analytics.dart';
// Somewhere in your widgets...
FirebaseAnalytics().setCurrentScreen(screenName: 'Example1');

作为第一次尝试，我在小部件构造函数中这样做了，但这不会很好地工作并且会错误地计算事件:如果您弹出或推送路由，堆栈中的所有小部件构造函数都将被调用，即使实际上只有顶部路由符合“当前屏幕”的条件。

要解决这个问题，我们需要使用 RouteAware class 并且仅在它是顶部路由的情况下设置当前屏幕:要么我们的路由被添加到堆栈中，要么之前的顶部路由被弹出并且我们到达了路由。

RouteAware 带有样板代码，我们不想在所有屏幕上重复该样板代码。即使对于小型应用程序，您也有几十个不同的屏幕，所以我创建了 RouteAwareAnalytics 混合:

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/widgets.dart';

// A Navigator observer that notifies RouteAwares of changes to state of their Route
final routeObserver = RouteObserver<PageRoute>();

mixin RouteAwareAnalytics<T extends StatefulWidget> on State<T>
    implements RouteAware {
  AnalyticsRoute get route;

  @override
  void didChangeDependencies() {
    routeObserver.subscribe(this, ModalRoute.of(context));
    super.didChangeDependencies();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPop() {}

  @override
  void didPopNext() {
    // Called when the top route has been popped off,
    // and the current route shows up.
    _setCurrentScreen(route);
  }

  @override
  void didPush() {
    // Called when the current route has been pushed.
    _setCurrentScreen(route);
  }

  @override
  void didPushNext() {}

  Future<void> _setCurrentScreen(AnalyticsRoute analyticsRoute) {
    print('Setting current screen to $analyticsRoute');
    return FirebaseAnalytics().setCurrentScreen(
      screenName: screenName(analyticsRoute),
      screenClassOverride: screenClass(analyticsRoute),
    );
  }
}

我创建了一个 enum 来跟踪屏幕(以及将枚举转换为屏幕名称的函数)。我使用枚举能够轻松跟踪所有路由，重构路由名称。使用这些枚举和函数，我可以对所有可能的值进行单元测试并强制执行一致的命名:没有意外空格或特殊字符，没有不一致的大小写。可能还有其他更好的方法来确定屏幕类值，但我采用了这种方法。

enum AnalyticsRoute { example }

String screenClass(AnalyticsRoute route) {
  switch (route) {
    case AnalyticsRoute.example:
      return 'ExampleRoute';
  }
  throw ArgumentError.notNull('route');
}

String screenName(AnalyticsRoute route) {
  switch (route) {
    case AnalyticsRoute.example:
      return '/example';
  }
  throw ArgumentError.notNull('route');
}

初始设置的下一步是将 routeObserver 注册为 MaterialApp 的 navigatorObserver:

MaterialApp(
  // ...
  navigatorObservers: [
    routeObserver,
    // FirebaseAnalyticsObserver(analytics: FirebaseAnalytics()),
  ],
);

最后，我们可以添加我们第一个跟踪的示例路线。将 with RouteAwareAnalytics 添加到您的状态并覆盖 get route。

class ExampleRoute extends StatefulWidget {
  @override
  _ExampleRouteState createState() => _ExampleRouteState();
}

class _ExampleRouteState extends State<ExampleRoute> with RouteAwareAnalytics{
  @override
  Widget build(BuildContext context) => Text('Example');

  @override
  AnalyticsRoute get route => AnalyticsRoute.example;
}

每次添加新路由时，您都可以毫不费力地这样做:首先，添加一个新的枚举值，然后 Dart 编译器会指导您接下来添加什么:添加屏幕名称和类覆盖它们各自的 switch-case 中的值。然后，找到正在构建路由的州，添加 with RouteAwareAnalytics，并添加 route getter。

* 我没有使用RouteSettings的原因是我更喜欢Simon Lightfoot's approach使用键入的参数而不是设置提供的 Object 参数:

class ExampleRoute extends StatefulWidget {
  const ExampleRoute._({@required this.integer, Key key}) : super(key: key);
  // All types of members are supported, but I used int as example
  final int integer;
  static Route<void> route({@required int integer}) =>
      MaterialPageRoute(
        // I could add the settings here, though, it wouldn't enforce good types
        builder: (_) => ExampleRoute._(integer: integer),
      );
  // ...
}