FlutterのFirebaseAnalyticsでScreenViewイベントにカスタムパラメータを渡す方法

この記事は、【 Flutter Advent Calendar 2021 】のカレンダー2の14日目の記事です。

FlutterのFirebaseAnalyticsでScreenViewイベントにカスタムパラメータを渡す方法を解説します。

基本設定

まずはNavigationの際に自動的にScreenViewをトラッキングしてくれるための実装を行います。

MaterialApp部分

MaterialAppのnavigatorObserversにFirebaseAnalyticsObserverをセットします。

static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
static FirebaseAnalyticsObserver observer =
    FirebaseAnalyticsObserver(analytics: analytics);

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'SampleApp',
    navigatorObservers: [observer],
    home: HomePage(),
  );
}

各ページへのナビーゲーション部分

この場合、画面遷移する際に以下のようにRouteSettingsのnameを設定することで、自動的にFirebaseAnalyticsのsetCurrentScreenが呼ばれるようになります。

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => ProfilePage(),
    settings: RouteSettings(name: 'profile_page'),
  ),
);

内部では、ライブラリのこの部分が呼ばれています。

カスタムパラメータ

自分たちのチームではAnalyticsのデータをBigQueryに溜めて、後で様々な形で出力できるようにしているのですが、この方法ではScreenViewにカスタムパラメータを渡すことができません。
ログイン時に取得した情報を、画面遷移の際に一緒に渡したかったので、FlutterFireのFirebaseAnalyticsのobserver部分を少し改造しました。

パッケージのカスタマイズ

FlutterFireのリポジトリをForkして、
flutterfire/packages/firebase_analytics/firebase_analytics/lib/src/observer.dart
を以下のように修正します。

setCurrentScreenにはパラメータを付与できないので、screen_view_eventというイベントを独自で追加しました。

Map<String, Object?> parameters = {}; // 追加

void setParameters(Map<String, Object?> value) => parameters = value; // 追加

void _sendScreenView(PageRoute<dynamic> route) {
  final String? screenName = nameExtractor(route.settings);
  if (screenName != null) {
    parameters..addAll({'screen_name': screenName}); // 追加
    analytics.logEvent(name: 'screen_view_event', parameters: parameters); // 追加
    analytics.setCurrentScreen(screenName: screenName).catchError(
      (Object error) {
        final _onError = this._onError;
        if (_onError == null) {
          debugPrint('$FirebaseAnalyticsObserver: $error');
        } else {
          _onError(error as PlatformException);
        }
      },
      test: (Object error) => error is PlatformException,
    );
  }
}

ブランチをfirebase_analytics_9_0_3としてコミット&プッシュします。

カスタマイズしたFirebaseAnalyticsを使用する

pubspec.yamlを以下のように設定します。

firebase_analytics:
  git:
    url: https://github.com/{user_name}/flutterfire.git
    ref: firebase_analytics_9_0_3
    path: packages/firebase_analytics/firebase_analytics

カスタムパラメータの設定

ログイン時に以下のような形でカスタムパラメータを設定しておくと、以降の画面遷移の度にこれらのパラメータも付与された状態で自動的にトラッキングされます。

analyticsObserver.setParameters({'key': value});

最後に

FirebaseAnalyticsのScreenViewでカスタムパラメータを渡す方法を解説しました。
同時に、パッケージのカスタマイズも説明していますので、その辺りも参考になった人がいたら嬉しいです。

可茂IT塾ではFlutterでのアプリ開発の仕事を絶賛募集中ですので、Flutterエンジニアをお探しの際はぜひお声がけください！