最初のアプリ内メッセージング テスト

1. はじめに

目標

この Codelab では、Flutter と Cloud Firestore を利用したマルチプラットフォームのモバイル レストランおすすめアプリで、アプリ内メッセージ テストを計測します。

完了すると、最小限のコードを記述するだけで、iOS または Android のあらゆるアプリのユーザー エンゲージメントを効果的に高めるアプリ内メッセージング テストを設計、実装できるようになります。

b284c40acc99b994.png

学習内容

  • Flutter アプリで Firebase In-App Messaging（FIAM）を使用する方法
  • アプリ内メッセージの外観をカスタマイズする方法
  • アプリ内メッセージング テストを設計してアプリに実装する方法
  • アプリ内メッセージング テストの結果を解釈する方法

この Codelab で学びたいことは次のどれですか？

このトピックは初めてなので、簡単に概要を知りたい。 このトピックについてある程度は知っているが、復習したい。プロジェクトで使用するサンプルコードを確認したい。特定の項目に関する説明を確認したい。

Firebase In-App Messaging

Firebase In-App Messaging（FIAM）を使用すると、主要なアプリ内ユーザー行動（ゲームレベルのクリア、アイテムの購入、コンテンツへの登録など）を行うように促す、ターゲットを絞り込んだコンテキスト メッセージを送信して、アプリのアクティブなユーザーと交流できます。

Firebase A/B Testing

Firebase A/B Testing（ABT）は Google オプティマイズの機能を活用しており、プロダクトとマーケティングのテストを簡単に実行、分析、スケーリングでき、アプリ操作の最適化に役立ちます。アプリの UI、機能、エンゲージメント キャンペーンの変更点をテストすることで、その変更点を広範囲にロールアウトする前に変更内容が主要な指標（収益や定着率など）に実際に大きな変化をもたらすかどうかを確認できます。

必要なもの

Flutter または Firestore についてよく知らない場合は、最初に Flutter 用の Firebase Codelab を完了してください。

この Codelab は、次のデバイスのどれを使用しても実行できます。

  • パソコンに接続され、デベロッパー モードに設定されている実機（Android または iOS）
  • iOS シミュレータ（Xcode ツールのインストールが必要）。
  • Android Emulator（Android Studio でのセットアップが必要）

上記に加えて、以下も必要になります。

  • Chrome などの任意のブラウザ。
  • 任意の IDE またはテキスト エディタ。例: Dart および Flutter プラグインで構成された Android Studio または VS Code。Flutter での使用には VS Code が推奨されます。
  • Flutter の最新の安定版（または、最先端の機能を利用したい場合はベータ版）。
  • Firebase プロジェクトの作成と管理に使用する Google アカウント（Gmail アカウントなど）。
  • この Codelab のサンプルコード。コードの取得方法については、次のステップをご覧ください。

2. セットアップする

コードを取得する

コマンドラインから GitHub リポジトリのクローンを作成します。

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

サンプルコードは friendlyeats-flutter ディレクトリに複製されます。これ以降は、次のディレクトリからコマンドを実行してください。

cd friendlyeats-flutter

次に、codelab ディレクトリに移動して、fiam-abt ブランチをチェックアウトします。

git checkout fiam-abt

このブランチには、この Codelab に必要なすべてのコードが含まれています。done フォルダには完成版が含まれています。このリポジトリの他のブランチには、マルチプラットフォーム Firestore Flutter Codelab で説明されているように、FriendlyEats アプリをビルドするためのコードが含まれています。この Codelab では、このブランチでウェブ統合を削除しました。

スターター アプリをインポートする

codelab-fiam-abt ディレクトリを開くか、お好みの IDE にインポートします。このディレクトリには Codelab のスターター コードが格納されています。コードは、レストランおすすめアプリで構成されています。この Codelab では、このアプリのユーザー向けにアプリ内メッセージング テストを実装します。

Firebase プロジェクトを作成する

  1. Google アカウントを使用して Firebase コンソールにログインします。
  2. ボタンをクリックして新しいプロジェクトを作成し、プロジェクト名（例: FriendlyEats）を入力します。
  3. [続行] をクリックします。
  4. Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。
  5. （省略可）Firebase コンソールで AI アシスタンス（「Gemini in Firebase」）を有効にします。
  6. この Codelab では、Firebase プロダクトを最適に利用するために Google アナリティクスが必要となるため、Google アナリティクスのオプションの切り替えをオンのままにします。画面上の手順に沿って Google アナリティクスを設定します。
  7. [プロジェクトを作成] をクリックし、プロジェクトのプロビジョニングが完了するまで待ってから、[続行] をクリックします。

これで完了です。これで、最初の Firebase プロジェクトが作成されました。

次に、Firebase コンソールを使用して、必要なサービスを構成し、有効にする手順を実施します。

匿名認証を有効にする

認証はこの Codelab の主要なトピックではありませんが、アプリではなんらかの形の認証を行うことが重要です。ここでは、匿名ログイン（プロンプトが表示されず、ユーザーが自動的にログインする）を使用します。

匿名ログインを有効にするには:

  1. Firebase コンソールの左側のナビゲーション バーで、[認証] を見つけます。
  2. [認証] をクリックし、[始める] をクリックして、[ログイン方法] タブを選択します（または、Firebase コンソールに直接移動します）。
  3. [匿名] ログイン プロバイダを有効にし、[保存] をクリックします。

fee6c3ebdf904459.png

匿名ログインを有効にすると、ユーザーはアプリにアクセスしたときに、アプリに自動的にログインできるようになります。詳しくは、Android と iOS の匿名認証のドキュメントをご覧ください。

Cloud Firestore を設定する

このアプリは、Cloud Firestore を使用してレストランの情報と評価を受信し、保存します。

Firebase プロジェクトで Cloud Firestore を設定する方法は次のとおりです。

  1. Firebase コンソールの左側のパネルで [ビルド] を展開し、[Firestore データベース] を選択します。
  2. [データベースを作成] をクリックします。
  3. [データベース ID] は (default) に設定したままにします。
  4. データベースの場所を選択し、[次へ] をクリックします。
    実際のアプリでは、ユーザーに近い場所を選択します。
  5. [テストモードで開始] をクリックします。セキュリティ ルールに関する免責条項を確認します。
    この Codelab の後半で、データを保護するためのセキュリティ ルールを追加します。データベースのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。
  6. [作成] をクリックします。

3. モバイル固有の Firebase 構成

Firebase サポートを有効にするために必要なコード変更のほとんどは、作業中のプロジェクトにすでにチェックインされています。ただし、モバイル プラットフォームのサポートを追加するには、次のことを行う必要があります。

  • 目的のプラットフォームを Firebase プロジェクトに登録する
  • プラットフォーム固有の構成ファイルをダウンロードしてコードに追加する。

Flutter アプリの最上位ディレクトリには、ios と android というサブディレクトリがあります。それぞれのディレクトリには、iOS と Android 用のプラットフォーム固有の構成ファイルが格納されています。

a35458e5c0dd0acf.png iOS を構成する

Firebase コンソールの左側のナビゲーション バーの上部で、[プロジェクトの設定] を選択し、[全般] ページの [アプリ] の下の [iOS] ボタンをクリックします。

次のダイアログが表示されます。

c42139f18fb9a2ee.png

  1. 指定が必要な重要な値は、iOS バンドル ID です。バンドル ID を取得するには、次の 3 つの手順を実施します。
  1. コマンドライン ツールで、Flutter アプリの最上位ディレクトリに移動します。
  2. open ios/Runner.xcworkspace コマンドを実行して Xcode を開きます。
  1. Xcode で、左ペインの最上位にある [Runner] をクリックします。そうすると、右ペインに [General] タブが表示されます。[Bundle Identifier] の値をコピーします。

9733e26be329f329.png

  1. Firebase ダイアログに戻り、コピーしたバンドル ID を [iOS バンドル ID] フィールドに貼り付けて、[アプリの登録] をクリックします。
  1. 引き続き Firebase 内で、指示に沿って構成ファイル GoogleService-Info.plist をダウンロードします。
  2. Xcode に戻ります。[Runner] に [Runner] というサブフォルダがあることに注目してください（上記の画像を参照）。
  3. 先ほどダウンロードした GoogleService-Info.plist ファイルを [Runner] サブフォルダにドラッグします。
  4. Xcode にダイアログが表示されるので、[Finish] をクリックします。
  5. Firebase コンソールに戻ります。セットアップ手順で [次へ] をクリックし、残りの手順をスキップして Firebase コンソールのメインページに戻ります。

これで、iOS 向け Flutter アプリを構成する作業は完了です。

84e0b3199bef6d8a.pngAndroid を構成する

  1. Firebase コンソールの左側のナビゲーション バーの上部で、[プロジェクトの設定] を選択し、[全般] ページの [アプリ] の下の [Android] ボタンをクリックします。

以下のダイアログが表示されます。 8254fc299e82f528.png

  1. 指定が必要な重要な値は、Android パッケージ名です。パッケージ名を取得するには、次の 2 つの手順を実施します。
  1. Flutter アプリのディレクトリで、ファイル android/app/src/main/AndroidManifest.xml を開きます。
  2. manifest 要素内にある package 属性の文字列値を確認します。この値が Android パッケージ名です（例: com.yourcompany.yourproject）。この値をコピーします。
  3. Firebase のダイアログで、コピーしたパッケージ名を [Android パッケージ名] フィールドに貼り付けます。
  4. この Codelab では、[デバッグ用の署名証明書 SHA-1] の指定は不要です。このフィールドは空白のままにします。
  5. [アプリを登録] をクリックします。
  6. 引き続き Firebase 内で、指示に沿って構成ファイル google-services.json をダウンロードします。
  7. Flutter アプリのディレクトリに移動し、先ほどダウンロードした google-services.json ファイルを android/app ディレクトリに移動します。
  8. Firebase コンソールに戻り、残りの手順をスキップして、Firebase コンソールのメインページに戻ります。
  9. すべての Gradle 構成がチェックインされています。アプリがまだ実行中の場合は、Gradle で依存関係をインストールできるように、アプリを閉じて再ビルドします。

これで、Android 向け Flutter アプリを構成する作業は完了です。

4. アプリをローカルで実行する

アプリで実際に作業を開始する準備が整いました。最初に、ローカルでアプリを実行します。構成した任意のプラットフォーム（デバイスとエミュレータが使用可能なもの）でアプリを実行できます。

次のコマンドを実行すると、使用可能なデバイスがわかります。

flutter devices

どのデバイスを使用できるかに応じて、上記のコマンドの出力は次のようになります。

7d44d7c0837b3e8e.png

次のコマンドを使用して、アプリをローカルで実行します。

flutter run

これで、Firebase プロジェクトに接続された FriendlyEat のコピーが表示されるはずです。

アプリは自動的に Firebase プロジェクトに接続され、ユーザーは匿名ユーザーとして自動的にログインします。

5. 最初のメッセージを作成してテストする

Firebase In-App Messaging をアプリに統合する

アプリ内メッセージングの基本的な統合は完全にコードレスです。依存関係を追加するだけで、すぐに使用できます。pubspec.yaml ファイルに次の依存関係を追加します。

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Firebase コンソールでメッセージを作成する

アプリに FIAM を追加したので、アプリが初めて開かれたときにトリガーされるメッセージを作成しましょう。

最初のメッセージを作成するには:

  1. Firebase コンソールの [エンゲージメント] セクションで、[アプリ内メッセージング] をクリックします。
  2. [アプリ内メッセージング] ペインで [最初のキャンペーンを作成] をクリックします。

4fec02395f89f2a8.png

統合が機能していることを確認するために、基本的なモーダル メッセージを作成してみましょう。メッセージは自由にカスタマイズできます。画像やボタンを追加したり、色を変更したりできます。

59845004afc26847.png

テストするアプリをターゲットに設定してください。統合パスによっては、iOS、Android、または両方をターゲットに設定できます。

3f1eb7a327a50265.png

アプリが開いたときにメッセージがトリガーされるようにしたいので、ここではデフォルトのスケジューリング構成が機能します。

8dc5cea0a4c79008.png

スケジュール設定が完了したら、メッセージを公開できます。[確認] をクリックすると、次のような画面が表示されます。

5bbc987bf63d1f48.png

アプリでメッセージを表示する

アプリをアンインストールして再インストールすると、作成したメッセージがアプリを開いたときに表示されます。おめでとうございます。これで、初めてのアプリ内メッセージを送信できました。次のステップでは、ユーザーがアプリ内で行った操作に基づいてアプリ内メッセージをトリガーするために、分析イベントを追加する方法について説明します。

6. 高度なメッセージ トリガー用に Firebase 向け Google アナリティクスを統合する

Firebase 向け Google アナリティクスをアプリに統合する

ユーザーがアプリをどのように利用しているかを把握し、ユーザーの操作に基づいてアプリ内メッセージをトリガーするために、ユーザーがレストランをクリックしたときに発生するアナリティクス イベントを追加します。

  1. pubspec.yaml で Flutter に Firebase 向け Google アナリティクスの依存関係を追加します。
dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...
  1. home_page.dart で分析をインポートする
import 'package:firebase_analytics/firebase_analytics.dart';
  1. home_page.dart の HomePage クラスに Firebase 向け Google アナリティクスのインスタンスを追加します。
class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
  1. ユーザーが home_page.dart でレストラン カードをクリックしたときにアナリティクス イベントをトリガー
onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

アナリティクス イベントでトリガーするようにメッセージを編集する

イベント「click_restaurant」ができたので、ユーザーがアプリを開いたときではなく、このイベントに基づいてアプリ内メッセージをトリガーしましょう。

Firebase コンソールで [In-App Message] に戻り、既存のキャンペーンを編集します。

d1fdc539dfcc6375.png

次に、スケジュール設定セクションを変更して、新しいイベントからメッセージをトリガーします。

8e12d8f1f8f166dd.png

[レビュー] ボタンをクリックして、変更を公開します。

4f7d6bd2960b3ef7.png

アプリでトリガーをテストする

この時点で、次のコマンドでアプリを実行できるようになります。

flutter run

レストランをクリックすると、アプリ内メッセージが表示されます。

a11febda5526263.png

7. FIAM+ABT キャンペーンを作成する

目標を設定してスタート

Friendlyeats アプリはすでに素晴らしいものになっていますが、有用なものにするにはレビューが必要です。これらは Friendlyeats ユーザーから提供されるため、ユーザーがレビューを残すよう促す方法を見つけましょう。

まず、コンバージョン イベントを定義しましょう。

ユーザーがレストランをレビューしているかどうかを確認したいので、この動作を測定するための分析イベントを追加しましょう。

  1. 以前と同様に Firebase 向け Google アナリティクスをインポートし、restaurant_page.dart で RestaurantPage にアナリティクスのインスタンスを追加します。
class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}
  1. 次に、restaurant_page.dart でレビューを保存したときに _onCreateReviewPressed でイベントをトリガーしましょう。
 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Firebase コンソールで A/B テストを設定する

アプリ内メッセージング キャンペーンの作成方法を理解したところで、これらのキャンペーンを通じてアプリでどのような行動を促したいかを検討しましょう。FriendlyEats では、より多くのユーザーにレビューを投稿していただき、アプリの利便性を高めたいと考えています。アプリ内メッセージを使用して、この行動を促す方法はいくつかあります。1 つは、FriendlyEats アプリの改善に役立つようにレストランのレビューを投稿してほしいことをユーザーに伝えるシンプルなアプリ内メッセージです。もう 1 つは、アプリ内メッセージを使用して、特定のレストランのクーポンや割引コードなど、レビューを投稿するインセンティブを提供する方法です。

どちらの方法でも、FriendlyEats でレストランのレビューを投稿するユーザーの頻度を増やすことができますが、この場合はクーポンを提供した方がより大きな効果が得られそうです。しかし、このクーポンを提供することで、ユーザーがレビューを投稿する可能性はどれくらい高まるでしょうか？そもそも、クーポンの費用に見合う価値があるのか？これを判断するために、アプリ内メッセージング テストを実施します。Firebase A/B テストを使用すると、アプリ内メッセージのいずれかをユーザーにランダムに表示し、ユーザーの行動に与える影響を測定できます。これは臨床試験のようなものです。しかも、この作業はすべて Firebase コンソールから行えるため、コードは必要ありません。

最初のアプリ内メッセージング テストを作成するには:

  1. Firebase コンソールの [エンゲージメント] セクションで、[A/B Testing] をクリックします。
  2. [テストを作成] をクリックし、[アプリ内メッセージング] をテスト対象として選択します。以下に示すテスト コンポーザーが表示されます。

a792dfd4f82fee9c.png

テストに名前を付け、必要に応じて説明を入力します。

  1. 次のステップでは、テストに参加するユーザーに送信するさまざまなアプリ内メッセージを作成します。最初に作成するアプリ内メッセージは「ベースライン」、つまりテストのコントロールです。「レビューをお願いします」というシンプルなメッセージを作成できます。

50e3eb946c56501a.png

  1. ベースラインができたので、バリエーションを作成します。これは、ユーザーにレビューを投稿してもらうためにクーポン コードを提供するアプリ内メッセージです。以下のプレビューでは完全に表示されていませんが、メッセージのタイトルは「クーポンをゲットして、レビューを残そう！」、メッセージの本文は「次回 Burrito Cafe に来店する際に、お会計時にクーポン コード FRIENDLYEATS-15 を使用すると、注文が 15% 割引になります。後でレビューを残すことを忘れないでください。」この投稿が、一部のユーザーにブリトー カフェを訪れるきっかけになれば幸いです。

bed9182080bebb41.png

次のステップでは、アプリをターゲットにして、Exposure を設定します。これは、テストのメッセージのいずれかを表示する対象ユーザー（ターゲティング条件/トリガー条件を満たすユーザー）の割合です。この例では、すべてのユーザーにベースラインまたはクーポン バリエーションのいずれかを表示したいので、100% に設定します。アプリ内メッセージをまったく表示しないコントロール グループを設定する場合は、この表示率を減らすことができます。

bd96bf5798d227f1.png

  1. 次に、テストの目標を定義します。これは、測定するテストの結果です。さまざまなアプリ内メッセージがレストランのレビューを残すユーザーに与える影響を確認したいので、前のセクションで定義した review_success アナリティクス イベントとして設定します。eb89d3b9f89ab43b.png
  2. スケジュール設定では、キャンペーンをすぐに開始し、click_restaurant をトリガー条件として設定します。これにより、ユーザーがレストランをクリックすると、2 つのアプリ内メッセージのいずれかが表示されます。

c57be430d41bfcad.png

  1. あとは、テストを確認して [テストを開始] をクリックするだけです。あとは、テストのデータが届くのを待つだけです。

566af8bace30c67.png

リアルタイムでデータ収集を確認する

テストを開始すると、FriendlyEats のユーザーがレストランをクリックしたときに、作成した 2 つのアプリ内メッセージのいずれかがランダムに表示されます。ベースライン メッセージか、バリエーション メッセージのいずれかです。これにより、ユーザーに表示されたメッセージに基づいて、ユーザーが 2 つのグループに分けられます。Firebase コンソール（[A/B Testing] セクション）で、両方のグループのリアルタイムのアナリティクス データを比較できます。ユーザーがアプリ内メッセージを実際に見て、それに応じて行動するのを待つ必要があるため、データが届くまでには時間がかかります。十分なデータが収集された後の結果は、次のようになります。

8fa8a0edcd8a8ad4.png

この場合、バリエーションはベースラインを大幅に上回ったため、[バリエーションをロールアウト] を選択して、クーポン付きのアプリ内メッセージをすべてのユーザーにロールアウトできます。

8. 完了

これで、初めてのアプリ内メッセージング テストを作成して実行できました。これで、独自のアプリでテストを実施し、その結果を使用してアプリ内メッセージ キャンペーンの効果を高めることができます。

次のステップ

以下の Codelab をご覧ください。

参考資料

Firebase In-App Messaging と Firebase A/B Testing でできることは、ほんの一部しかご紹介していません。詳細については、以下をご覧ください。

リファレンス ドキュメント