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

Question

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

我想看看我们的用户（现在是我）正在访问的路线。我按照设置步骤进行操作firebase_analytics，我也检查了他们的示例应用程序。如调试视图文档中所述，我启用了Google Analytics（分析）调试

不幸的是，firebase_screen_class我在Analytics Debug视图中仅收到两种屏幕视图（）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

您可以添加一个 firebase 分析导航观察者：

要使用它，请将其添加到导航器的 navigatorObservers 中，例如，如果您使用的是 MaterialApp：

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

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

笔记！

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

为了看到调试结果马上，在终端上运行上述命令和结帐上火力解析DebugView中您的分析（如在顶部的图中所示）。：

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

享受！

Answer 2

确切的用例位于“ 跟踪屏幕视图”部分下的Firebase Analytics文档中。

如果您的应用未对您希望跟踪的每个屏幕（例如在游戏中）使用单独的UIViewController或Activity，则手动跟踪屏幕很有用。

Flutter就是这种情况，因为Flutter负责屏幕更新，因此无法让Firebase Analytics自动跟踪屏幕。

您需要确保路由可以访问的实例，FirebaseAnalytics然后手动设置屏幕名称（我按照注释中的建议在窗口小部件构造函数中进行了设置，但是也可能有更好的方法）。

analytics.setCurrentScreen(screenName: 'Example1');

（可选）为简化此操作，我添加了一个抽象类

abstract class AnalyticsScreen {
  String get screenName;
  // FirebaseAnalytics constructor reuses a single instance, so it's ok to call like this
  void setCurrentScreen() =>
      FirebaseAnalytics().setCurrentScreen(screenName: screenName);
}

那么我可以在路由中使用此类作为混合类，例如在StatefulWidgets中

class Example extends StatefulWidget with AnalyticsScreen {
  @override
  get screenName => 'example';

  @override
  _ExampleState createState() => _ExampleState();

  Example() {
    setCurrentScreen();
  }
}

好处是您可以使用setCurrentScreen()并且不会忘记屏幕名称，但缺点是，您仍然必须记住调用setCurrentScreen小部件的构造函数...如果您对此有更惯用的Dart解决方案，请允许我在评论中知道。

上面的解决方案可能（不能很好地测试它以致不能肯定地说）不起作用，其中一种改进是可以RouteAware在这些类中使用。