web-dev-qa-db-ja.com

Firebase AnalyticsでFlutter画面を追跡するにはどうすればよいですか?

Flutterアプリを持っていますが、FlutterでFirebase向けGoogleアナリティクスをテストしています。

ユーザー(今のところ私)がアクセスしているルートを確認したかったのです。 firebase_analytics と私は彼らのサンプルアプリもチェックしました。 Debug View docs の説明に従ってAnalyticsのデバッグを有効にしました

残念ながら、2種類の画面ビュー(firebase_screen_class)アナリティクスのデバッグビューで受け取るのは、FlutterMainActivityです。

/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)],
    );
  }
}
10
Vince Varga

この正確な使用例は、Firebase Analyticsのドキュメントの Track Screenviews セクションにあります。

手動で画面を追跡することは、ゲームなど、追跡したい画面ごとにアプリが個別の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ソリューションがある場合は、コメントでお知らせください。

上記の解決策は(間違いなく十分にテストされていない)機能しない可能性があります。1つの改善点は、これらのクラスで RouteAware を使用することです。

12
Vince Varga