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エンジニアをお探しの際はぜひお声がけください!

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More