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

初めての In-App Messaging テスト

1. はじめに

目標

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

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

ラボの内容

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

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

このトピックは初めてなので、簡単に概要を知りたい。

このトピックについてある程度は知っているが、復習したい。

プロジェクトで使用するサンプルコードを確認したい。

特定の項目に関する説明を確認したい。

Firebase In-App Messaging

Firebase In-App Messaging（FIAM）を使用すると、ゲームレベルのクリア、アイテムの購入、コンテンツの定期購入など、主要なアプリ内ユーザー行動を完了するように促す、ターゲットを絞り込んだコンテキストメッセージを送信して、アプリを使用中のユーザーを引きつけることができます。

Firebase A/B Testing

Google オプティマイズを活用した Firebase A/B Testing（ABT）では、プロダクトとマーケティングのテストを簡単に実行、分析、スケーリングできるため、アプリエクスペリエンスの最適化に役立ちます。アプリの UI、機能、エンゲージメントキャンペーンに対する変更をテストし、広範囲にリリースする前に主な指標（収益や維持率など）に実際に大きな変化があるかどうかを確認できます。

前提条件

Flutter や Firestore に慣れていない場合は、まず Firebase 向け Firebase の Codelab を修了してください。

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

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

上記に加えて、次のものも必要です。

Chrome などの任意のブラウザ。
Dart と Flutter のプラグインが構成された Android Studio や VS Code などの任意の IDE またはテキストエディタ。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 プロジェクトを作成する

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

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

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

匿名認証を有効にする

この Codelab では認証に焦点を当てませんが、アプリでなんらかの認証方法を用意することが重要です。匿名ログインを使用します。つまり、ユーザーはプロンプトを表示せずにサイレントログインを行います。

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

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

料金 6c3ebdf904459.png

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

Cloud Firestore の有効化

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

Cloud Firestore を有効にするには:

Firebase コンソールの左側のナビゲーションバーで、[Firestore] をクリックします。
Cloud Firestore ペインで [データベースを作成] をクリックします。

[テストモードで開始] オプションを選択し、セキュリティルールに関する免責条項を読み、[次へ] をクリックしてから [有効にする] をクリックします。

テストモードを使用すると、開発中にデータベースに自由に書き込むことができます。この 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 プロジェクトに接続した FriendlyEats のコピーが表示されます。

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

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

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

In-App Messaging の基本的な統合は完全にコーディング不要で、依存関係を追加するだけですぐに使用できます。pubspec.yaml ファイルに次の依存関係を追加します。

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

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

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

最初のメールを作成するには:

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

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

フォローしている統合パス（iOS、Android、またはその両方）に応じて、テストするアプリをターゲットにしてください。

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

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

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

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

6. Firebase Analytics を統合して高度なメッセージトリガー機能を実現する

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

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

pubspec.yaml で Flutter に Firebase Analytics の依存関係を追加する

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

home_page.dart に分析をインポート

import 'package:firebase_analytics/firebase_analytics.dart';

Firebase Analytics のインスタンスを 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 コンソールで In-App Message に戻り、既存のキャンペーンを編集します。

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

[レビュー]ボタンをクリックすると変更内容が公開されます

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

この時点で、

flutter run

レストランをクリックするとアプリ内メッセージや

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

目標設定から始める

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

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

ユーザーがレストランのクチコミを投稿しているかどうかを確認したいので、この行動を測定する分析イベントを追加します。

以前と同様に 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);
}

では、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 を使用すると、アプリ内メッセージの 1 つをランダムにユーザーに表示し、それがユーザー行動に及ぼす影響を臨床試験のように測定できます。何よりも、この作業は Firebase コンソールですべて行うことができ、コードは必要ありません。

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

Firebase コンソールの [エンゲージメント] セクションで [A/B Testing] をクリックします。
[テストを作成] をクリックし、In-App Messaging をテストするものを選択します。以下のように、テストの作成ツールが表示されます。

テストの名前と説明（省略可）を入力します。

次のステップでは、テストのユーザーに送信するさまざまなアプリ内メッセージを作成します。最初に作成するアプリ内メッセージは、「ベースライン」（テストのコントロール）です。次のようなシンプルな「レビューしてください」メッセージを作成できます。

ベースラインがわかったので、次はバリアントを作成します。バリアントは、ユーザーにレビューの投稿を促すクーポンコードを提供するアプリ内メッセージです。これは、以下のプレビューでは完全には表示されませんが、メッセージのタイトルは「クーポンを獲得して、レビューを書いてください」、メッセージ本文は「次回ブリトーカフェに行くとき、チェックアウト時にクーポンコード FRIENDLYEATS-15 を使用してご注文いただくと 15% 割引になります。また、レビューの投稿をお忘れなく。」これをきっかけに、ブリトーカフェに足を運んでくれるユーザーもいることでしょう。

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

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

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

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

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

この例では、パターンはベースラインから大幅に改善されたため、[パターンを展開] を選択すると、クーポンとともにアプリ内メッセージがすべてのユーザーに展開されます。

8. 完了

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

次のステップ

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

参考資料

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

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

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