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

Question

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

我想查看我们的用户（现在是我）正在访问的路线。我遵循了 firebase_analytics and I checked their example app, too. I enabled debugging for Analytics as described in the Debug View docs

中的设置步骤

不幸的是，我在“分析调试”视图中收到的仅有两种屏幕浏览量 (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，它们确实暗示事情应该 "just work"。我最好的猜测是它对我来说效果不佳，因为我没有在我的任何路线 *.

上使用 RouteSettings

万一 FirebaseAnalyticsObserver 无法工作或无法申请您的应用程序，在过去几个月的开发中，下一种方法对我来说效果很好。

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

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

作为第一次尝试，我在小部件构造函数中这样做了，但是效果不佳并且错误地计算了事件：如果您弹出或推送路由，将调用堆栈中的所有小部件构造函数，即使只有顶部路线确实符合 "the current screen".

为了解决这个问题，我们需要使用 RouteAware class 并且只设置当前屏幕以防它是顶级路由：我们的路由被添加到堆栈或之前的顶级路由突然出现，我们到达了路线。

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

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 来跟踪屏幕（以及将枚举转换为屏幕名称的函数）。我使用枚举能够轻松跟踪所有路由，重构路由名称。使用这些枚举和函数，我可以对所有可能的值进行单元测试并强制执行一致的命名：没有意外的空格或特殊字符，没有不一致的大小写。可能还有其他更好的方法来确定屏幕 class 值，但我采用了这种方法。

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 中添加屏幕名称和 class 覆盖值。然后，找到正在构建路线的州，添加 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),
      );
  // ...
}

Answer 2

如果您在 screen_view 的 firebase_screen_class 参数中看到 "Flutter" 事件，这意味着你已经正确配置了它。

您应该在 firebase_screen 参数中找到您期望的值，而不是 firebase_screen_class。

还值得检查 firebase_previous_screen 参数以查看在该参数之前打开的屏幕是什么。

Answer 3

您可以将 firebase 分析 navigation observer 添加到您的 MatetialApp 的 navigatorObservers，如下所示：

class MyApp extends StatelessWidget {
  FirebaseAnalytics analytics = FirebaseAnalytics();
...

MaterialApp(
  home: MyAppHome(),
  navigatorObservers: [
    FirebaseAnalyticsObserver(analytics: analytics),
  ],
);

注意！

如果这是您第一次将分析集成到您的应用程序中，您的分析将需要 大约一天 才能显示在您的仪表板中。

立即查看结果

要立即查看调试结果，运行在您的终端上执行上述命令并检查您在 firebase analytic debugView 上的分析（如上图所示）：

adb shell setprop debug.firebase.analytics.app [your_app_package_name]

尽情享受吧！

Answer 4

我遇到这个问题有一段时间了，只是能够解决它

我的问题是我没有正确传递 MaterialPageRoute 中的设置

return MaterialPageRoute(
      settings: RouteSettings(
        name: routeName,
      ),
      builder: (_) => viewToShow);
}

我按照 FilledStack 上的教程进行操作，在看到示例代码后能够解决我的问题

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

How do I track Flutter screens in Firebase analytics?

firebase

flutter

firebase-analytics

注意！

立即查看结果