您的第一個應用程式內通訊實驗

1. 簡介

目標

在本程式碼研究室中，您將為多平台行動餐廳推薦應用程式 (採用 Flutter 和 Cloud Firestore) 進行應用程式內訊息實驗。

完成後，您就能設計及導入應用程式內訊息實驗，以最少的程式碼，有效提升任何 iOS 或 Android 應用程式的使用者參與度。

b284c40acc99b994.png

課程內容

  • 如何在 Flutter 應用程式中使用 Firebase 應用程式內通訊 (FIAM)
  • 如何自訂應用程式內訊息的外觀
  • 如何設計應用程式內通訊實驗，並在應用程式中導入
  • 如何解讀應用程式內通訊實驗的結果

您想從本程式碼研究室學到什麼？

我對這個主題不熟悉，希望獲得全面性的介紹。 我對這個主題略有瞭解，但想複習一下。 我想尋找可在專案中使用的程式碼範例。 我想瞭解特定主題。

Firebase 應用程式內通訊

Firebase 應用程式內通訊功能 (FIAM) 可以協助您透過以下方式，與密集使用應用程式的使用者互動：傳送指定目標且符合情境的訊息給使用者，促使他們完成關鍵的應用程式內動作，例如破解遊戲關卡、購買商品或訂閱內容。

Firebase A/B 測試

Firebase A/B 測試 (ABT) 採用 Google 最佳化工具，可讓您輕鬆執行、分析及擴充產品與行銷實驗，進而將應用程式體驗最佳化。透過這項功能，你可以測試對應用程式使用者介面、功能或參與度廣告活動所做的變更，以在廣泛推出之前，瞭解變更是否確實能對關鍵指標 (例如收益和留存率) 發揮效用。

軟硬體需求

如果您不熟悉 Flutter 或 Firestore，請先完成「Firebase for Flutter」程式碼研究室：

您可以使用下列任一裝置執行本程式碼研究室：

  • 連線至電腦並設為開發人員模式的實體裝置 (Android 或 iOS)。
  • iOS 模擬器。(需要安裝 Xcode 工具)。
  • Android 模擬器。(需要在 Android Studio 中設定)。

除了上述條件，你還需要：

  • 你選擇的瀏覽器，例如 Chrome。
  • 您選擇的 IDE 或文字編輯器，例如已設定 Dart 和 Flutter 外掛程式的 Android Studio 或 VS Code。建議搭配 Flutter 使用 VS Code。
  • 最新穩定版 Flutter (或 Beta 版，如果您喜歡走在尖端)。
  • 用於建立及管理 Firebase 專案的 Google 帳戶 (例如 Gmail 帳戶)。
  • 程式碼研究室的範例程式碼。請參閱下一個步驟，瞭解如何取得驗證碼。

2. 做好準備

取得程式碼

從指令列複製 GitHub 存放區：

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

程式碼範例會複製到 friendlyeats-flutter 目錄。從現在起，請務必從這個目錄執行指令：

cd friendlyeats-flutter

然後切換至程式碼研究室目錄，並查看 fiam-abt 分支版本：

git checkout fiam-abt

這個分支包含本程式碼研究室所需的所有程式碼，包括 done 資料夾中的完成版本。這個存放區中的其他分支版本包含用於建構 FriendlyEats 應用程式的程式碼，如多平台 Firestore Flutter 程式碼研究室所示。為配合本程式碼研究室，我們已在這個分支版本中移除網頁整合功能。

匯入範例應用程式

在想用的 IDE 中開啟或匯入 codelab-fiam-abt 目錄。這個目錄包含程式碼研究室的起始程式碼，其中包含餐廳推薦應用程式。在本程式碼研究室中，您將為這個應用程式的使用者進行應用程式內訊息實驗。

建立 Firebase 專案

  1. 使用 Google 帳戶登入 Firebase 控制台。
  2. 按一下按鈕建立新專案，然後輸入專案名稱 (例如 FriendlyEats)。
  3. 按一下「繼續」。
  4. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
  5. (選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)。
  6. 在本程式碼研究室中，您需要 Google Analytics 才能充分運用 Firebase 產品，因此請開啟 Google Analytics 選項的切換按鈕。按照畫面上的指示設定 Google Analytics。
  7. 按一下「建立專案」，等待專案佈建完成，然後按一下「繼續」。

恭喜！您已建立第一個 Firebase 專案。

接著，您將逐步瞭解如何使用 Firebase 控制台設定及啟用必要服務。

啟用匿名驗證

雖然本程式碼研究室的重點不是驗證，但應用程式中必須有某種形式的驗證。您將使用匿名登入，也就是讓使用者在未收到提示的情況下，以無聲方式登入。

如要啟用匿名登入功能，請按照下列步驟操作：

  1. 在 Firebase 控制台中，找出左側導覽列中的「驗證」。
  2. 依序點選「Authentication」->「Get started」->「Sign-in method」分頁標籤 (或直接前往 Firebase 主控台)。
  3. 啟用「Anonymous」登入供應商，然後按一下「Save」。

fee6c3ebdf904459.png

啟用「匿名登入」後，應用程式就能在使用者存取應用程式時，自動登入帳戶。如要瞭解詳情，請參閱 Android 和 iOS 的匿名驗證說明文件。

設定 Cloud Firestore

應用程式會使用 Cloud Firestore 儲存及接收餐廳資訊和評分。

如要在 Firebase 專案中設定 Cloud Firestore，請按照下列步驟操作：

  1. 在 Firebase 控制台的左側面板中，展開「Build」，然後選取「Firestore database」。
  2. 按一下 [Create database] (建立資料庫)。
  3. 將「資料庫 ID」保留為 (default)。
  4. 選取資料庫位置，然後按一下「下一步」。
    如果是實際應用程式，請選擇離使用者較近的位置。
  5. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續步驟中，您將新增安全性規則，確保資料安全。請勿在未為資料庫新增安全性規則的情況下，公開發布或公開應用程式。
  6. 點選「建立」。

3. 行動專用 Firebase 設定

啟用 Firebase 支援功能所需的大部分程式碼變更，都已簽入您正在處理的專案。不過，如要新增行動平台支援功能，請按照下列步驟操作：

  • 在 Firebase 專案中註冊所需平台
  • 下載平台專屬的設定檔，並將其新增至程式碼。

在 Flutter 應用程式的頂層目錄中，有兩個子目錄分別稱為 ios 和 android。這些目錄分別存放 iOS 和 Android 的平台專屬設定檔。

a35458e5c0dd0acf.png 設定 iOS

在 Firebase 控制台中，選取左側導覽列頂端的「專案設定」，然後在「一般」頁面中，按一下「您的應用程式」下方的 iOS 按鈕。

您應該會看到下列對話方塊：

c42139f18fb9a2ee.png

  1. 請務必提供 iOS 軟體包 ID。執行接下來的三個步驟，即可取得套件 ID。
  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.png設定 Android

  1. 在 Firebase 控制台中，選取左側導覽列頂端的「專案設定」，然後在「一般」頁面中，按一下「您的應用程式」下方的「Android」按鈕。

您應該會看到下列對話方塊：8254fc299e82f528.png

  1. 請務必提供Android 套件名稱。執行下列兩個步驟即可取得套件名稱：
  1. 在 Flutter 應用程式目錄中，開啟 android/app/src/main/AndroidManifest.xml 檔案。
  2. 在 manifest 元素中，找出 package 屬性的字串值。這個值是 Android 套件名稱 (類似 com.yourcompany.yourproject)。請複製這個值。
  3. 在 Firebase 對話方塊中，將複製的套件名稱貼到「Android 套件名稱」欄位。
  4. 您不需要這個程式碼研究室的偵錯簽署憑證 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

現在您應該會看到 FriendlyEats 的副本，並已連結至 Firebase 專案。

應用程式會自動連線至 Firebase 專案，並以匿名使用者身分登入。

5. 建立及測試第一則訊息

將 Firebase 應用程式內通訊整合到應用程式中

應用程式內通訊功能的基本整合完全不需要程式碼，只要新增依附元件即可！在 pubspec.yaml 檔案中加入以下依附元件

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

在 Firebase 控制台中撰寫訊息

您已在應用程式中加入 FIAM，現在來撰寫訊息，在應用程式首次開啟時觸發。

如要撰寫第一封郵件，請按照下列步驟操作：

  1. 在 Firebase 控制台的「Engage」專區中，按一下「In-App Messaging」。
  2. 在「應用程式內訊息」窗格中，按一下「建立第一個廣告活動」。

4fec02395f89f2a8.png

讓我們撰寫基本模式訊息，確保整合作業正常運作。歡迎隨意自訂訊息，例如新增圖片、按鈕或變更顏色。

59845004afc26847.png

請務必指定要測試的應用程式，視您採用的整合路徑而定，應用程式可能適用於 iOS、Android 或兩者。

3f1eb7a327a50265.png

我們希望在應用程式開啟時觸發訊息，因此預設排程設定適用於此處。

8dc5cea0a4c79008.png

排定時間後，我們就可以發布訊息。按一下「查看」，畫面應如下所示

5bbc987bf63d1f48.png

在應用程式中查看訊息

現在，請解除安裝並重新安裝應用程式，開啟時應該會看到您建立的訊息。恭喜，您已傳送第一則應用程式內訊息！在下一個步驟中，您將瞭解如何新增數據分析事件，以便根據使用者在應用程式中採取的動作，觸發應用程式內訊息。

6. 整合 Firebase Analytics，觸發進階訊息

將 Firebase Analytics 整合到應用程式中

為了瞭解使用者與應用程式的互動方式，並根據使用者的動作觸發應用程式內訊息，我們現在要新增 Analytics 事件，記錄使用者點選餐廳的動作。

  1. 在 pubspec.yaml 中將 Firebase Analytics 依附元件新增至 Flutter
dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...
  1. 在 home_page.dart 中匯入數據分析
import 'package:firebase_analytics/firebase_analytics.dart';
  1. 在 home_page.dart 中將 Firebase Analytics 執行個體新增至 HomePage 類別
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 中的餐廳資訊卡時，觸發 Analytics 事件
onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

編輯訊息，在 Analytics 事件觸發時顯示

現在我們有「click_restaurant」事件，因此可以根據該事件觸發應用程式內訊息，而不是在使用者開啟應用程式時觸發。

在 Firebase 控制台中返回「應用程式內通訊訊息」，然後編輯現有宣傳活動

d1fdc539dfcc6375.png

現在請變更排程部分，從新事件觸發訊息

8e12d8f1f8f166dd.png

然後按一下「查看」按鈕，發布變更

4f7d6bd2960b3ef7.png

在應用程式中測試觸發條件

此時，您應該可以執行應用程式，

flutter run

點選餐廳時，您應該會看到應用程式內訊息

a11febda5526263.png

7. 建立 FIAM+ABT 廣告活動

先設定一個目標

Friendlyeats 應用程式目前看起來很棒，但要有評論才實用。這些評論來自 Friendlyeats 使用者，因此請想辦法鼓勵使用者留下評論。

首先，請定義轉換事件

由於我們想瞭解使用者是否會查看餐廳，因此請新增 Analytics 事件來評估這項行為。

  1. 如常匯入 Firebase Analytics，並在 restaurant_page.dart 中將 Analytics 執行個體新增至 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 留下評論，讓這個應用程式更加實用！我們可以透過應用程式內訊息，鼓勵使用者採取行動。第一種方式是透過簡單的應用程式內訊息，告知使用者應為餐廳撰寫評論，協助改善 FriendlyEats 應用程式。另一種方式是透過應用程式內訊息，提供某種獎勵來鼓勵使用者撰寫評論，例如特定餐廳的優待券或折扣代碼。

這兩種做法都能提高使用者在 FriendlyEats 上提供餐廳評論的頻率，但提供優待券似乎能帶來更強大的影響。但提供這張優待券後，使用者撰寫評論的意願會提高多少？優待券的成本是否划算？為此，我們將執行應用程式內通訊實驗！我們可以透過 Firebase A/B 測試，隨機向使用者顯示其中一則應用程式內訊息，並評估這對使用者行為的影響，就像進行臨床試驗一樣。最棒的是，這項操作完全可以在 Firebase 控制台中完成，不需要任何程式碼！

如要撰寫第一個應用程式內通訊實驗，請按照下列步驟操作：

  1. 在 Firebase 控制台的「參與」專區中，按一下「A/B 測試」。
  2. 按一下「建立實驗」，然後選取要實驗「應用程式內通訊」。畫面會顯示如下所示的實驗撰寫工具。

a792dfd4f82fee9c.png

為實驗命名並視需要新增說明。

  1. 下一步是撰寫要傳送給實驗使用者的不同應用程式內訊息。我們撰寫的第一則應用程式內訊息是「基準」，也就是實驗的控制組。我們可以將這則訊息簡化為「請撰寫評論」：

50e3eb946c56501a.png

  1. 現在我們有了基準，接下來要撰寫變體，也就是在應用程式內顯示訊息，提供優待券代碼給使用者，鼓勵他們留下評論。下方預覽畫面無法完整顯示，但訊息標題是「領取優待券，留下評論！」，訊息內文是「下次前往 Burrito Cafe 時，結帳時使用優待券代碼 FRIENDLYEATS-15，即可享有 85 折優惠。別忘了在完成後留下評論！」。希望這能吸引部分使用者前往 Burrito Cafe！

bed9182080bebb41.png

在下一個步驟中，我們會指定應用程式並設定曝光度。這是指符合資格 (符合指定目標/觸發條件) 的使用者中，有多少比例會看到實驗中的其中一則訊息。在這個範例中，我們希望所有使用者看到基準或優待券變體，因此可以將這個值設為 100%。如要建立完全不顯示應用程式內訊息的控制組，可以降低曝光百分比。

bd96bf5798d227f1.png

  1. 接著，您將為實驗定義一些目標。這是我們想評估的實驗結果。我們會將此設為上一節中定義的 review_success Analytics 事件，因為我們想瞭解不同應用程式內訊息對使用者留下餐廳評論的影響。eb89d3b9f89ab43b.png
  2. 排程方面，我們會讓廣告活動立即開始放送，並將 click_restaurant 設為觸發條件，這樣使用者點選餐廳時，就會看到其中一則應用程式內訊息。

c57be430d41bfcad.png

  1. 現在只要檢查實驗，然後按下「開始實驗」即可。接著，我們就可以放鬆等待實驗資料傳入！

566af8bace30c67.png

即時查看資料收集作業

實驗開始後，FriendlyEats 使用者點選餐廳時，會隨機看到我們撰寫的其中一則應用程式內訊息，也就是基準訊息或變體訊息。這樣一來，系統就會根據使用者看到的訊息，將他們分成兩組。接著，我們可以在 Firebase 控制台 (同樣位於「A/B 測試」部分下方) 中，比較兩組的即時數據分析資料。我們需要等待使用者實際看到應用程式內訊息並採取行動，因此資料需要一段時間才會匯入。收集到足夠資料後，結果可能如下所示：

8fa8a0edcd8a8ad4.png

在這個案例中，變化版本大幅優於基準，因此我們可以選擇「導入變化版本」，向所有使用者放送含有優待券的應用程式內訊息。

8. 恭喜

恭喜，您已成功建立並執行第一個應用程式內訊息實驗。您現在可以在自己的應用程式中進行實驗，並根據結果提升應用程式內訊息廣告活動的成效。

後續步驟

查看一些程式碼研究室…

延伸閱讀

我們只是初步瞭解 Firebase 應用程式內通訊和 Firebase A/B 測試的功能。如要瞭解詳情，請參閱下列文章：

參考文件