このページは Cloud Translation API によって翻訳されました。

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

1. はじめに

目標

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

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

ラボの内容

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

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

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

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

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

Firebase コンソールで [プロジェクトを追加] をクリックし、Firebase プロジェクトに FriendlyEats という名前を付けます。Firebase プロジェクトのプロジェクト ID を覚えておいてください（または、編集アイコンをクリックして、お好みのプロジェクト ID を設定してください）。
プロジェクトで Google アナリティクスが有効になっていることを確認して、[続行] をクリックします。
[プロジェクトの作成] をクリックします。

これで完了です。最初の Firebase プロジェクトが作成されました。プロジェクト名をクリックしてコンソールに移動できます。

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

匿名認証を有効にする

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

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

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

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

Cloud Firestore を設定する

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

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

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

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

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

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

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

iOS を構成する

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

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

指定が必要な重要な値は、iOS バンドル ID です。バンドル ID を取得するには、次の 3 つの手順を実施します。

コマンドラインツールで、Flutter アプリの最上位ディレクトリに移動します。
open ios/Runner.xcworkspace コマンドを実行して Xcode を開きます。

Xcode で、左ペインの最上位にある [Runner] をクリックします。そうすると、右ペインに [General] タブが表示されます。[Bundle Identifier] の値をコピーします。

Firebase ダイアログに戻り、コピーしたバンドル ID を [iOS バンドル ID] フィールドに貼り付けて、[アプリの登録] をクリックします。

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

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

Android を構成する

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

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

指定が必要な重要な値は、Android パッケージ名 です。パッケージ名を取得するには、次の 2 つの手順を実施します。

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

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

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

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

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

flutter devices

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

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

flutter run

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

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

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

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

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

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

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

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

最初のメッセージを作成する手順は次のとおりです。

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

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

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

アプリの起動時に必ずメッセージがトリガーされるようにするため、ここではデフォルトのスケジュール設定を使用します。

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

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

アプリをアンインストールして再インストールすると、作成したメッセージが開いたときに表示されます。最初のアプリ内メッセージを送信しました。次のステップでは、ユーザーがアプリ内で行ったアクションに基づいてアプリ内メッセージをトリガーするために、アナリティクスイベントを追加する方法を学習します。

6. Firebase アナリティクスを統合して高度なメッセージトリガーを実現

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

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

pubspec.yaml の Flutter に Firebase アナリティクスの依存関係を追加する

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

home_page.dart でアナリティクスをインポートする

import 'package:firebase_analytics/firebase_analytics.dart';

Firebase アナリティクスのインスタンスを home_page.dart の HomePage クラスに追加します。

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

ユーザーが 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 コンソールで [アプリ内メッセージ] に戻り、既存のキャンペーンを編集します。

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

そこから [確認] ボタンをクリックして変更を公開できます。

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

この時点で、

flutter run

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

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

目標設定してスタート

Friendlyeats アプリはすでに素晴らしい仕上がりですが、役立つアプリにするにはレビューが必要です。レビューは Friendlyeats のユーザーから提供されるため、ユーザーがレビューを残すように促す方法を考えてみましょう。

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

ユーザーがレストランのレビューを投稿しているかどうかを確認するため、この動作を測定するアナリティクスイベントを追加しましょう。

前回と同様に Firebase アナリティクスをインポートし、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);
}

次に、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 Testing を使用すると、アプリ内メッセージをランダムにユーザーに表示し、臨床試験のようにユーザー行動への影響を測定できます。何より、コードを記述することなく、Firebase コンソールからすべて行うことができます。

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

Firebase コンソールの [エンゲージメント] セクションで、[A/B Testing] をクリックします。
[テストを作成] をクリックし、[アプリ内メッセージング] をテスト対象として選択します。テストコンポーザが開きます（下記を参照）。

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

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

ベースラインが設定できたので、バリエーションを作成します。バリエーションとは、ユーザーにクーポンコードを提示してレビューを促すアプリ内メッセージです。以下のプレビューでは完全には表示されませんが、メッセージのタイトルは「クーポンを受け取ってレビューを投稿してください」で、メッセージ本文は「次回 Burrito Cafe をご利用の際は、ご購入手続き時にクーポンコード FRIENDLYEATS-15 を使用して、ご注文を 15% 割引にしてください。後でレビューを投稿してください。」ユーザーが Burrito Cafe をチェックしてくれることを願っています。

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

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

これで、テスト内容を確認して [テストを開始] をクリックするだけです。これで、テストデータが届くのを待つだけです。

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

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

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

8. 完了

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

次のステップ

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

参考資料

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

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

A/B Testing を使用して In-App Messaging のテストを作成する