1. 簡介
目標
在本程式碼研究室中,您將針對採用 Flutter 和 Cloud Firestore 的多平台行動餐廳推薦應用程式,進行應用程式內訊息實驗。
完成後,您就能設計及實作應用程式內訊息實驗,在編寫最少量的程式碼的情況下,有效提高任何 iOS 或 Android 應用程式的使用者參與度。
課程內容
- 如何在 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 Studio 或 VS 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 專案
- 在 Firebase 控制台中,按一下「新增專案」,然後將 Firebase 專案命名為「FriendlyEats」。記下 Firebase 專案的專案 ID (或按一下「編輯」圖示,設定偏好的專案 ID)。
- 確認專案已啟用 Google Analytics,然後按一下「繼續」。
- 按一下 [Create Project]。
恭喜!您剛建立第一個 Firebase 專案。您現在可以按一下專案名稱,進入控制台。
接下來,您將透過 Firebase 主控台設定及啟用必要服務。
啟用匿名驗證功能
雖然本程式碼研究室的焦點並非驗證,但在應用程式中加入某種驗證機制相當重要。您將使用匿名登入功能,也就是在使用者未收到提示的情況下,讓他們悄悄登入。
如何啟用匿名登入功能:
- 在 Firebase 控制台的左側導覽列中,找出「驗證」。
- 依序點選「驗證」和「開始使用」,然後選取「登入方式」分頁標籤 (或直接前往 Firebase 主控台)。
- 啟用「匿名」登入供應商,然後點選「儲存」。
啟用「匿名登入」功能後,應用程式就能在使用者存取應用程式時,自動為他們登入。如需更多資訊,請參閱 Android 和 iOS 的匿名驗證說明文件。
設定 Cloud Firestore
應用程式會使用 Cloud Firestore 儲存及接收餐廳資訊和評分。
以下說明如何在 Firebase 專案中設定 Cloud Firestore:
3. 行動裝置專屬 Firebase 設定
啟用 Firebase 支援功能所需的大部分程式碼變更,都已檢查至您正在使用的專案。不過,如要新增行動平台支援功能,您必須:
- 在 Firebase 專案中註冊所需平台
- 下載特定平台的設定檔,然後將其加入程式碼。
在 Flutter 應用程式的頂層目錄中,有名為 ios
和 android
的子目錄。這些目錄分別包含 iOS 和 Android 的特定平台設定檔。
設定 iOS
在 Firebase 控制台中,選取左側導覽列頂端的「專案設定」,然後點選「一般」頁面「您的應用程式」下方的 iOS 按鈕。
您應該會看到下列對話方塊:
- 您必須提供的重要值是 iOS 軟體包 ID。您可以執行下列三個步驟,取得套件 ID。
- 在指令列工具中,前往 Flutter 應用程式的頂層目錄。
- 執行
open ios/Runner.xcworkspace
指令來開啟 Xcode。
- 在 Xcode 中,按一下左側窗格中的頂層「Runner」,右側窗格會顯示「General」分頁,如圖所示。複製「Bundle Identifier」值。
- 返回 Firebase 對話方塊,將複製的「Bundle Identifier」貼到「iOS 軟體包 ID」欄位,然後按一下「Register App」。
- 繼續在 Firebase 中按照操作說明下載設定檔
GoogleService-Info.plist
。 - 返回 Xcode。請注意,Runner 有一個名為 Runner 的子資料夾 (如上圖所示)。
- 將剛下載的
GoogleService-Info.plist
檔案拖曳至該 Runner 子資料夾。 - 在 Xcode 中顯示的對話方塊中,按一下「Finish」。
- 返回 Firebase 控制台。在設定步驟中,按一下「Next」,跳過剩餘步驟,然後返回 Firebase 控制台的主頁面。
您已完成為 iOS 設定 Flutter 應用程式!
設定 Android
- 在 Firebase 控制台中,選取左側導覽列頂端的「專案設定」,然後點選「一般」頁面「您的應用程式」下方的「Android」按鈕。
您應該會看到下列對話方塊:
- 您必須提供重要的 Android 套件名稱值。您可以透過執行下列兩個步驟取得套件名稱:
- 在 Flutter 應用程式目錄中,開啟
android/app/src/main/AndroidManifest.xml
檔案。 - 在
manifest
元素中,找出package
屬性的字串值。這個值是 Android 套件名稱 (例如com.yourcompany.yourproject
)。請複製這個值。 - 在 Firebase 對話方塊中,將複製的套件名稱貼到「Android 套件名稱」欄位。
- 您不需要為這個程式碼研究室取得偵錯簽署憑證 SHA-1。請將此欄留空。
- 按一下「註冊應用程式」。
- 接著在 Firebase 中按照操作說明下載設定檔
google-services.json
。 - 前往 Flutter 應用程式目錄,然後將您剛下載的
google-services.json
檔案移至android/app
目錄。 - 返回 Firebase 控制台,略過剩餘步驟,然後返回 Firebase 控制台的主頁面。
- 所有 Gradle 設定都已提交。如果應用程式仍在執行中,請關閉並重建應用程式,讓 Gradle 安裝依附元件。
您已完成 Android 版 Flutter 應用程式的設定!
4. 在本機執行應用程式
您現在可以開始著手應用程式了!首先,請在本機執行應用程式。您現在可以在任何已設定 (且有裝置和模擬器可用) 的平台上執行應用程式。
使用下列指令,找出可用的裝置:
flutter devices
視可用的裝置而定,上述指令的輸出內容會類似以下內容:
現在,請使用下列指令在本機執行應用程式:
flutter run
您現在應該會看到 FriendlyEats 副本已連結至 Firebase 專案。
應用程式會自動連線至您的 Firebase 專案,並以匿名使用者的身分靜默登入。
5. 建立及測試第一則訊息
將 Firebase 應用程式內通訊整合至應用程式
應用程式內通訊功能的基本整合作業完全無需程式碼,只要新增依附元件即可開始使用!在 pubspec.yaml
檔案中新增下列依附元件
dependencies:
# ...
firebase_in_app_messaging: ^0.4.0
# ...
在 Firebase 控制台中撰寫訊息
您已將 FIAM 新增至應用程式,現在讓我們撰寫訊息,在應用程式首次開啟時觸發。
如要撰寫第一則訊息,請按照下列步驟操作:
- 在 Firebase 控制台的「互動」專區中,按一下「應用程式內通訊」。
- 在「應用程式內訊息」窗格中,按一下「建立第一個廣告活動」。
讓我們撰寫基本對話方塊訊息,確認整合作業是否正常運作。你可以自由自訂訊息,例如加入圖片、按鈕或變更顏色。
請務必指定要用於測試的應用程式,具體取決於您採用的整合路徑,您可能會使用 iOS、Android 或兩者。
我們想確保在應用程式開啟時觸發訊息,因此預設排程設定會在這裡運作。
排程完成後,我們就能發布訊息。點選「Review」(查看),畫面應會顯示類似下方的畫面
在應用程式中查看訊息
現在,請解除安裝並重新安裝應用程式,您應該會在開啟時看到您建立的訊息。恭喜!您剛剛傳送了第一則應用程式內訊息!在下一個步驟中,您將瞭解如何新增數據分析事件,以便根據使用者在應用程式中採取的動作,觸發應用程式內訊息。
6. 整合 Firebase Analytics 以觸發進階訊息
將 Firebase Analytics 整合至應用程式
為了瞭解使用者如何與應用程式互動,並根據使用者操作觸發應用程式內訊息,我們現在會在使用者點選餐廳時新增 Analytics 事件。
- 在
pubspec.yaml
中將 Firebase Analytics 依附元件新增至 Flutter
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
中點選餐廳資訊卡時觸發 Analytics 事件
onRestaurantPressed: (id) async {
await HomePage.analytics.logEvent(name: 'click_restaurant');
Navigator.pushNamed(context,
RestaurantPage.route,
arguments: RestaurantPageArguments(id: id));
})
編輯訊息,以便在數據分析事件觸發時顯示
有了「click_restaurant」事件後,我們可以根據該事件觸發應用程式內訊息,而非在使用者開啟應用程式時觸發。
在 Firebase 控制台中返回「應用程式內通訊訊息」頁面,然後編輯現有廣告活動
接著變更排程部分,觸發新事件的訊息
接著,我們可以按一下「review」按鈕來發布變更內容
在應用程式中測試觸發條件
此時,您應該可以使用
flutter run
點選餐廳後,您應該會看到應用程式內訊息
7. 建立 FIAM+ABT 廣告活動
先設定目標
Friendlyeats 應用程式已經很不錯,但我們需要一些評論,才能讓應用程式更實用。這些評論來自 Friendlyeats 使用者,因此我們要想辦法鼓勵使用者留下評論。
首先,讓我們定義轉換事件
我們想瞭解使用者是否會評論餐廳,因此請新增 Analytics 事件來評估這項行為。
- 如同前述,匯入 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);
}
- 接下來,我們要在
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 控制台完成這項操作,完全不需要寫程式碼!
如要編寫第一個應用程式內通訊實驗,請按照下列步驟操作:
- 在 Firebase 控制台的「互動交流」專區中,按一下「A/B 測試」。
- 按一下「建立實驗」,然後選取要進行應用程式內通訊實驗的變化版本。系統會帶您前往下方所示的實驗產生器。
為實驗命名並新增說明 (選用)。
- 接下來,您將撰寫要傳送給實驗對象的不同應用程式內訊息。我們將撰寫的第一則應用程式內訊息是「基準」,也就是實驗的控制組。我們可以將這段文字做為簡單的「請撰寫評論」訊息:
- 有了基準值後,我們現在要撰寫變化版本,也就是提供優惠券代碼的應用程式內訊息,鼓勵使用者留下評論。雖然下方預覽畫面並未完整顯示,但訊息標題為「領取優待券,留下評論!」,訊息內文則是「下次到 Burrito Cafe 用餐時,結帳時輸入優待券代碼 FRIENDLYEATS-15,即可享 15% 折扣。別忘了在使用後留下評論!」希望這能吸引部分使用者前往 Burrito Cafe!
在下一個步驟中,我們會指定應用程式並設定曝光率。這是在實驗中看到其中一個訊息的符合資格使用者 (符合指定目標/觸發條件) 所占百分比。在本例中,我們可以將這個值設為 100%,因為我們希望所有使用者都能看到控制組或優惠券變化版本。如果您想讓控制組完全不顯示應用程式內訊息,可以降低這項曝光百分比。
- 接下來,您將為實驗定義一些目標。這是我們想評估的實驗結果。我們會將這項事件設為前一個章節定義的
review_success
數據分析事件,因為我們想瞭解各種應用程式內訊息對使用者留下餐廳評論的影響。 - 在排程方面,我們會讓廣告活動立即開始,並將
click_restaurant
設為觸發條件,這樣使用者點選餐廳時,就會看到這兩則應用程式內訊息中的一則。
- 接下來,您只需檢查實驗,然後按一下「開始實驗」即可。接著,我們就可以坐等實驗資料囉!
查看即時資料收集
實驗開始後,FriendlyEats 使用者點選餐廳時,系統會隨機顯示我們撰寫的兩則應用程式內訊息,分別是基準訊息或變化版本訊息。系統會根據使用者看到的訊息,將使用者分為兩組。接著,我們可以前往 Firebase 控制台 (同樣在 A/B 測試部分),比較兩組的即時數據分析資料。資料需要一段時間才能送達,因為我們必須等待使用者實際看到應用程式內訊息,並採取相應行動。收集到足夠的資料後,結果可能會如下所示:
在這個案例中,變化版本的表現大幅優於基準值,因此我們可以選擇選取「導入變化版本」,向所有使用者放送含有優待券的應用程式內訊息。
8. 恭喜!
恭喜,您已成功建立並執行第一個應用程式內訊息實驗。您現在可以在自己的應用程式中進行實驗,並根據結果提升應用程式內訊息廣告活動的成效。
後續步驟
查看一些程式碼研究室…
延伸閱讀
我們才剛開始瞭解 Firebase 應用程式內通訊和 Firebase A/B 測試的功能。如要進一步瞭解,請參閱以下文章: