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

image

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

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

基本設定

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

MaterialApp部分

MaterialAppnavigatorObserversFirebaseAnalyticsObserverをセットします。

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


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

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

この場合、画面遷移する際に以下のようにRouteSettingsnameを設定することで、自動的に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エンジニアをお探しの際はぜひお声がけください!

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日開催のアプリ開発講座の参加者募集中!!

11月5日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More