Firebase Remote Configで挑むWeb版A/Bテスト実装：AI活用とフリッカー対策(Project1-8)

前回の記事で【RemoteConfig】と【Analytics】の実装を行いました。
今回は、その２つの機能を連携させた、A/Bテストの実装を行っていく記事になっています。

本日行いたい事：

【Remote Config】と【Analytics】を連携させた、A/Bテストの実装

参考にしたドキュメントサイト：Remote Config と Analytics の連携

---

Remote Config ×Analyticsの連携について

主にAnalytics ではオーディエンスとユーザー プロパティを使用して、柔軟かつ正確にユーザーベースのセグメントに応じてアプリをカスタマイズする事ができます。

これによってアプリのユーザーについての理解が深まり、ユーザーのニーズにすばやく対応できます。

連携の上での２つの注意点：ウェブはA/Bテスト機能が使えない＋Googleの制限アリ

注意１：ウェブアプリでは、A/Bテスト機能は使えない。

現状の Firebase A/B Testing 機能（実験セクション）は、ネイティブアプリ（iOS/Android）向けに最適化されており、Webアプリは正式サポート対象外で選択できない。

しかしRemote Config の「条件」機能 を使えば、Webでも擬似的に、かつ十分に強力な A/B テスト が可能です。

注意２： 以下のユーザー プロパティ名は、Google によって確保されているため使用できません。

• 年齢
• 性別
• 興味 / 関心

これらの許可されていないプロパティのいずれかを含むオーディエンスを作成した場合、そのオーディエンスを使用して条件を作成することはできません。

この注意点２つを守って「Remote Config×Analytics での A/B テスト（条件分岐）」を実装していきます。

---

まず連携前の準備フェーズ：パラメータ値と条件の作成と追加。

---

Remote Configでの準備と手順：パラメータ値の作成と条件を作成して追加します。

• Remote Config パラメータの作成 ：AIが値を取得できるように、空の箱を用意します。
  • パラメータキー (Key): 例:start_button_label
  • データ型: 文字列 (String)
  • デフォルト値: スタート
  • 説明（任意）: スタートボタンの表示テキスト
  • 「保存」 を押し、右上の 「変更を公開」 をクリック。
• 条件の作成：今回のポイントとなってくるシステム。
  • 名前：例:Start_Label_Test_Group
  • 適応する条件：ユーザー(ランダム％）/1~50%
  • 「条件を作成」を押し、右上の 「変更を公開」 をクリック。
• 作成した条件をパラメータに追加する。
  • 既存パラメータから「編集」をクリック
  • パラメータ下部にある「＋新たに追加」をクリック
  • 選択肢の中から「条件値」を選択し、先程「②で作成した条件の名前: Start_Label_Test_Group」を選択
  • テストしたい値(Value)を入力し追加。
  • 「保存」 を押し、右上の 「変更を公開」 をクリック。

Analytics の確認 (念のため)

1. Firebase Console > Analytics > Dashboard を開く。
2. データが表示されていることを確認。
   • これで「イベント」を受け取る準備は完了です。

---

【実装フェーズ】Remote Config×Analytics連携をAIエージェントに依頼する

---

【作成後の重要な項目】実際に動作するのか確認する。

実装が完了したら、以下の手順で動作確認を行います。ここは毎回重要なフェーズです！

①シークレットタブを活用した簡単なチェック。

準備：開発中アプリのリンクアクセスを許可する。

• 「リンクアイコン」をクリックする。
• 「Make Preview Public」をクリックし有効化
• アイコンが「ネットワーク」のアイコンに変化するのを確認。

シークレットタブを作成する。検証ツール：Google Chrome

• Google Chromeの「新しいタブ」を開く
• アドレスバーの右端にある「…」をクリック
• メニューが表示されるので、その中の「新しいシークレット ウィンドウ」を選択。
• 「新しいシークレット ウィンドウ」タブが開くので、そのアドレスバーに先程「有効化」したアイコンから「URL」をコピー又は「QRコード」を使って検索を行う。
• 開発中のアプリが開くのでアプリを実行する。
• Firebase Realtime Analyticsのページを開いて確認する。

成功すると１の数値が読み込まれます。

なぜ【Firebase Realtime Analytics】なのか？：

文字通りリアルタイムで使用を表示する事ができ、通常のFirebase Analyticsダッシュボードでは表示までにラグが起こる事(24H~48H程)があるからです。

---

②今回確認したい事：イベントが発生したのか？

1. ボタンラベルの確認: 見た目の確認
   • アプリを開き、ボタンが「スタート」（Consoleで設定したデフォルト値）になっているか？又は条件で設定した値になっているか？確認。
2. イベント発火の確認: timer_startイベントの確認
   • ボタンを押してタイマーを開始する。
   • （少し時間が経ってから）Firebase Realtime Analytics の「DebugView」または「リアルタイム」で (今回のイベント名timer_start) イベントが来ているか見る。

③テストコードを使った確認方法

AIエージェントにテストコードを挿入してもらい以下の方法でテストを実施しました。

【テスト方法】

1. AIエージェントへ「テストコードでの収集検証テストを行いたい旨」を伝えテストコードを依頼
2. ブラウザでデベロッパーコンソールを開きます（Chromeの場合、右クリック > 「F12/検証」 > 「Console」タブ）。
3. アプリの「計測開始」ボタンをクリックします。
4. コンソールに作成したメッセージが表示されれば、アプリからAnalyticsへのイベント送信は成功しています。
5.  もしも、データが集計されない場合は、Firebase側の反映遅延や外部要因である可能性が高くなります。

「Flicker（フリッカー / ちらつき）」 と呼ばれるUXの課題

実装に成功したのは、良かったですがフリッカー現象によって非表示文字が一瞬現れてしまう事が発生しました。

これは、「過去のキャッシュ（前の記憶）」 と 「最新のフェッチ（今の現実）」 のタイムラグが原因とのことで、見栄えが非常に悪いので、データ取得が終わるまでボタンを表示しない「読み込み中…」のタイミングを作る事で解消しました。

ボタンの表示は「読込中…」→「最終的なラベル」の1回しか変わらなくなり、ちらつきが解消されました。これで、問題であったことを確実に切り分けることでき見栄えも変わらないものになりました。

---

テストを行う際、条件は0~50%のランダムにしましたが、リロードで変わりますか？

いいえ、基本的には変わりません。

Firebase はブラウザごとに「Installation ID」という固有IDを割り当てます。 あなたが一度「50%以下のグループ（A）」に割り当てられたら、クッキーやデータを削除しない限り、何度リロードしてもずっと「A」です。

---

まとめ：

今回は、【Remote Config】と【Analytics】を連携させた、A/Bテストの実装を行っていきました。

webアプリでは、FirebaseのA/Bテスト機能は現状使えないですが条件機能を使って実装する事が可能になる事を示せたと思います。これによってより詳細な測定をすることができマーケティングの質が向上すると思います。

次回は、セッション４(UI/UX)の調整です！

ここでより使いやすい且つ毎日使いたくなるアプリを目指してAIと共にバイブコーディングしていきます。

Firebaseはとても興味深い機能があって且つ初心者でも使いやすいと感じているので私のような個人開発者は助かっています。

ここから学習して使ってもらえる良いプロダクトを生み出せるように行っていきたいと思います！

ここまで読んでいただきありがとうございました。またお会いしましょう！Tomoyaでした。