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

1. 簡介

目標

在本程式碼研究室中,您將針對採用 FlutterCloud Firestore 的多平台行動餐廳推薦應用程式,進行應用程式內訊息實驗。

完成後,您就能設計及實作應用程式內訊息實驗,在編寫最少量的程式碼的情況下,有效提高任何 iOS 或 Android 應用程式的使用者參與度。

b284c40acc99b994.png

課程內容

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

您想在本程式碼研究室中學習哪些內容?

我對這個主題不熟悉,希望能獲得完整的概略說明。 我對這個主題略知一二,但想複習一下。我想找專案中可用的程式碼範例。我想瞭解特定內容。

Firebase 應用程式內通訊

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

Firebase A/B 測試

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

需求條件

如果您不熟悉 Flutter 或 Firestore,請先完成「Flutter 版 Firebase」程式碼研究室:

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

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

除了上述項目外,您還需要:

  • 你偏好的瀏覽器,例如 Chrome。
  • 您選擇的 IDE 或文字編輯器,例如 Android StudioVS Code (已設定 Dart 和 Flutter 外掛程式)。建議您搭配使用 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 程式碼研究室所示。為了方便您在本程式碼研究室中進行操作,我們已移除這個分支中的網頁整合功能。

匯入範例應用程式

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

建立 Firebase 專案

  1. Firebase 控制台中,按一下「新增專案」,然後將 Firebase 專案命名為「FriendlyEats」。記下 Firebase 專案的專案 ID (或按一下「編輯」圖示,設定偏好的專案 ID)。
  2. 確認專案已啟用 Google Analytics,然後按一下「繼續」
  3. 按一下 [Create Project]

恭喜!您剛建立第一個 Firebase 專案。您現在可以按一下專案名稱,進入控制台。

接下來,您將透過 Firebase 主控台設定及啟用必要服務。

啟用匿名驗證功能

雖然本程式碼研究室的焦點並非驗證,但在應用程式中加入某種驗證機制相當重要。您將使用匿名登入功能,也就是在使用者未收到提示的情況下,讓他們悄悄登入。

如何啟用匿名登入功能:

  1. 在 Firebase 控制台的左側導覽列中,找出「驗證」
  2. 依序點選「驗證」和「開始使用」,然後選取「登入方式」分頁標籤 (或直接前往 Firebase 主控台)。
  3. 啟用「匿名」登入供應商,然後點選「儲存」

fee6c3ebdf904459.png

啟用「匿名登入」功能後,應用程式就能在使用者存取應用程式時,自動為他們登入。如需更多資訊,請參閱 AndroidiOS 的匿名驗證說明文件。

設定 Cloud Firestore

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

以下說明如何在 Firebase 專案中設定 Cloud Firestore:

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

3. 行動裝置專屬 Firebase 設定

啟用 Firebase 支援功能所需的大部分程式碼變更,都已檢查至您正在使用的專案。不過,如要新增行動平台支援功能,您必須:

  • 在 Firebase 專案中註冊所需平台
  • 下載特定平台的設定檔,然後將其加入程式碼。

在 Flutter 應用程式的頂層目錄中,有名為 iosandroid 的子目錄。這些目錄分別包含 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 對話方塊,將複製的「Bundle Identifier」貼到「iOS 軟體包 ID」欄位,然後按一下「Register App」
  1. 繼續在 Firebase 中按照操作說明下載設定檔 GoogleService-Info.plist
  2. 返回 Xcode。請注意,Runner 有一個名為 Runner 的子資料夾 (如上圖所示)。
  3. 將剛下載的 GoogleService-Info.plist 檔案拖曳至該 Runner 子資料夾。
  4. 在 Xcode 中顯示的對話方塊中,按一下「Finish」
  5. 返回 Firebase 控制台。在設定步驟中,按一下「Next」,跳過剩餘步驟,然後返回 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 控制台的「互動」專區中,按一下「應用程式內通訊」
  2. 在「應用程式內訊息」窗格中,按一下「建立第一個廣告活動」

4fec02395f89f2a8.png

讓我們撰寫基本對話方塊訊息,確認整合作業是否正常運作。你可以自由自訂訊息,例如加入圖片、按鈕或變更顏色。

59845004afc26847.png

請務必指定要用於測試的應用程式,具體取決於您採用的整合路徑,您可能會使用 iOS、Android 或兩者。

3f1eb7a327a50265.png

我們想確保在應用程式開啟時觸發訊息,因此預設排程設定會在這裡運作。

8dc5cea0a4c79008.png

排程完成後,我們就能發布訊息。點選「Review」(查看),畫面應會顯示類似下方的畫面

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. 將 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();
}
  1. 當使用者在 home_page.dart 中點選餐廳資訊卡時觸發 Analytics 事件
onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

編輯訊息,以便在數據分析事件觸發時顯示

有了「click_restaurant」事件後,我們可以根據該事件觸發應用程式內訊息,而非在使用者開啟應用程式時觸發。

在 Firebase 控制台中返回「應用程式內通訊訊息」頁面,然後編輯現有廣告活動

d1fdc539dfcc6375.png

接著變更排程部分,觸發新事件的訊息

8e12d8f1f8f166dd.png

接著,我們可以按一下「review」按鈕來發布變更內容

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,即可享 15% 折扣。別忘了在使用後留下評論!」希望這能吸引部分使用者前往 Burrito Cafe!

bed9182080bebb41.png

在下一個步驟中,我們會指定應用程式並設定曝光率。這是在實驗中看到其中一個訊息的符合資格使用者 (符合指定目標/觸發條件) 所占百分比。在本例中,我們可以將這個值設為 100%,因為我們希望所有使用者都能看到控制組或優惠券變化版本。如果您想讓控制組完全不顯示應用程式內訊息,可以降低這項曝光百分比。

bd96bf5798d227f1.png

  1. 接下來,您將為實驗定義一些目標。這是我們想評估的實驗結果。我們會將這項事件設為前一個章節定義的 review_success 數據分析事件,因為我們想瞭解各種應用程式內訊息對使用者留下餐廳評論的影響。eb89d3b9f89ab43b.png
  2. 在排程方面,我們會讓廣告活動立即開始,並將 click_restaurant 設為觸發條件,這樣使用者點選餐廳時,就會看到這兩則應用程式內訊息中的一則。

c57be430d41bfcad.png

  1. 接下來,您只需檢查實驗,然後按一下「開始實驗」即可。接著,我們就可以坐等實驗資料囉!

566af8bace30c67.png

查看即時資料收集

實驗開始後,FriendlyEats 使用者點選餐廳時,系統會隨機顯示我們撰寫的兩則應用程式內訊息,分別是基準訊息或變化版本訊息。系統會根據使用者看到的訊息,將使用者分為兩組。接著,我們可以前往 Firebase 控制台 (同樣在 A/B 測試部分),比較兩組的即時數據分析資料。資料需要一段時間才能送達,因為我們必須等待使用者實際看到應用程式內訊息,並採取相應行動。收集到足夠的資料後,結果可能會如下所示:

8fa8a0edcd8a8ad4.png

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

8. 恭喜!

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

後續步驟

查看一些程式碼研究室…

延伸閱讀

我們才剛開始瞭解 Firebase 應用程式內通訊和 Firebase A/B 測試的功能。如要進一步瞭解,請參閱以下文章:

參考文件