您的第一個應用內訊息實驗

一、簡介

目標

在此 Codelab 中，您將為由Flutter和Cloud Firestore提供支援的多平台行動餐廳推薦應用程式進行應用程式內訊息傳遞實驗。

完成後，您將能夠設計和實施應用程式內訊息傳遞實驗，以有效提高任何 iOS 或 Android 應用程式的使用者參與度，同時編寫最少量的程式碼。

你將學到什麼

• 如何在 Flutter 應用程式中使用 Firebase 應用程式內訊息傳遞 (FIAM)
• 如何自訂應用程式內訊息的外觀
• 如何設計應用內訊息傳遞實驗並在您的應用中實施
• 如何解釋應用內訊息傳遞實驗的結果

Firebase 應用程式內訊息傳遞

Firebase 應用程式內訊息傳遞 (FIAM) 透過向積極使用應用程式的用戶發送有針對性的上下文訊息來幫助您吸引他們，推動他們完成關鍵的應用程式內操作 - 例如通關遊戲、購買商品或訂閱內容。

Firebase A/B 測試

Firebase A/B 測試 (ABT) 由 Google Optimize 提供支持，讓您可以輕鬆運行、分析和擴展產品和行銷實驗，從而幫助您優化應用體驗。它使您能夠測試對應用程式的使用者介面、功能或參與活動的更改，看看它們是否真正對您的關鍵指標（如收入和保留率）產生影響，然後再廣泛推廣。

你需要什麼

如果您不太熟悉 Flutter 或 Firestore，請先完成Firebase for Flutter Codelab：

您可以使用以下任意設備運行此 Codelab：

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

除了上述內容之外，您還需要：

• 您選擇的瀏覽器，例如 Chrome。
• 您選擇的 IDE 或文字編輯器，例如配置了 Dart 和 Flutter 插件的Android Studio或VS Code 。建議將 VS Code 與 Flutter 結合使用。
• Flutter的最新穩定版本（如果您喜歡生活在邊緣，則為測試版）。
• Google 帳戶（例如 Gmail 帳戶），用於建立和管理 Firebase 專案。
• 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資料夾中的完整版本。此儲存庫中的其他分支包含用於建立 Friendship 應用程式的程式碼，如多平台 Firestore Flutter codelab中所示。出於本 Codelab 的目的，我們刪除了該分支中的 Web 整合。

導入入門應用程式

開啟codelab-fiam-abt目錄或將其匯入到您的首選 IDE 中。此目錄包含由餐廳推薦應用程式組成的 Codelab 的起始代碼。透過此 Codelab，您將為此應用程式的使用者進行應用程式內訊息傳遞實驗。

創建 Firebase 項目

1. 在Firebase 控制台中，按一下新增項目，然後將 Firebase 項目命名為FriendlyEats 。請記住您的 Firebase 項目的項目 ID（或按一下「編輯」圖示以設定您的首選項目 ID）。
2. 確保為該專案啟用了 Google Analytics，然後按一下繼續。
3. 點選建立項目。

恭喜！您剛剛建立了第一個 Firebase 專案。現在，您可以點擊項目名稱進入控制台。

接下來，您將逐步使用 Firebase 控制台設定和啟用必要的服務。

啟用匿名身份驗證

儘管身份驗證不是本 Codelab 的重點，但在您的應用程式中採用某種形式的身份驗證非常重要。您將使用匿名登錄，這表示使用者會在沒有提示的情況下以靜默方式登入。

若要啟用匿名登入：

1. 在 Firebase 控制台中，找到左側導覽列中的驗證。
2. 按一下身份驗證，然後按一下開始並選擇登入方法標籤（或直接前往 Firebase 控制台）。
3. 啟用匿名登入提供程序，然後按一下「儲存」 。

啟用匿名登入可讓應用程式在使用者存取應用程式時以靜默方式登入。要了解更多信息，請參閱Android和iOS的匿名身份驗證文件。

啟用 Cloud Firestore

該應用程式使用 Cloud Firestore 保存和接收餐廳資訊和評級。

若要啟用 Cloud Firestore：

1. 在 Firebase 控制台的左側導覽列中，按一下Firestore 。
2. 按一下 Cloud Firestore 窗格中的建立資料庫。

3. 選擇「以測試模式啟動」選項，閱讀有關安全規則的免責聲明後按一下「下一步」 ，然後按一下「啟用」 。

測試模式保證您在開發過程中可以自由寫入資料庫。稍後您將在此 Codelab 中使資料庫更加安全。

3. 行動裝置專用的 Firebase 配置

啟用 Firebase 支援所需的大部分程式碼變更已簽入您正在處理的專案中。但是，為了添加對行動平台的支持，您需要：

• 在 Firebase 專案上註冊所需的平台
• 下載特定於平台的配置文件，並將其添加到程式碼中。

在 Flutter 應用程式的頂級目錄中，有一個名為ios和android的子目錄。這些目錄分別保存 iOS 和 Android 平台特定的設定檔。

配置 iOS

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

您應該會看到以下對話框：

1. 需要提供的重要值是iOS 捆綁包 ID。您可以透過執行接下來的三個步驟來取得捆綁包 ID。

2. 在命令列工具中，前往 Flutter 應用程式的頂層目錄。
3. 運行命令open ios/Runner.xcworkspace開啟 Xcode。

4. 在 Xcode 中，按一下左窗格中的頂層Runner ，以在右窗格中顯示General選項卡，如圖所示。複製捆綁包標識符值。

5. 返回 Firebase 對話框，將複製的捆綁包標識符貼上到iOS 捆綁包 ID欄位中，然後按一下Register App 。

6. 繼續在 Firebase 中，按照說明下載設定檔GoogleService-Info.plist 。
7. 返回到 Xcode。請注意， Runner有一個也稱為Runner 的子資料夾（如上圖）。
8. 將GoogleService-Info.plist檔案（您剛剛下載的）拖曳到該Runner 子資料夾中。
9. 在 Xcode 中出現的對話方塊中，按一下「完成」 。
10. 返回 Firebase 控制台。在設定步驟中，按一下Next ，跳過剩餘步驟，然後返回 Firebase 控制台主頁。

您已完成 iOS 版 Flutter 應用程式的配置！

設定安卓

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

您應該會看到以下對話框：

2. 要提供的重要值是Android 套件名稱。執行以下兩個步驟即可取得套件名稱：

3. 在 Flutter 應用程式目錄中，開啟檔案android/app/src/main/AndroidManifest.xml 。
4. 在manifest元素中，找到package屬性的字串值。該值是 Android 套件名稱（類似com.yourcompany.yourproject ）。複製該值。
5. 在 Firebase 對話方塊中，將複製的套件名稱貼到Android 套件名稱欄位中。
6. 您不需要此 Codelab 的偵錯簽章憑證 SHA-1 。將此留空。
7. 點擊註冊應用程式。
8. 繼續在 Firebase 中，按照說明下載設定檔google-services.json 。
9. 前往您的 Flutter 應用程式目錄，並將google-services.json檔案（您剛剛下載的）移至android/app目錄中。
10. 返回 Firebase 控制台，跳過剩餘步驟，然後返回 Firebase 控制台主頁。
11. 所有 Gradle 配置均已簽入。如果您的應用程式仍在運行，請關閉並重建它，以允許 gradle 安裝依賴項。

您已完成 Android 版 Flutter 應用程式的設定！

4. 在本地運行您的應用程式

您已準備好真正開始開發您的應用程式了！首先，在本地運行應用程式。現在您可以在您配置的任何平台（並且您有可用的設備和模擬器）中運行該應用程式。

使用以下命令發現哪些設備可用：

flutter devices

根據可用的設備，上述命令的輸出如下所示：

現在，使用以下命令在本地運行該應用程式：

flutter run

現在，您應該會看到連接到您的 Firebase 專案的FriendlyEats 副本。

該應用程式會自動連線到您的 Firebase 項目，並以匿名使用者的身分讓您靜默登入。

5. 建立並測試您的第一條訊息

將 Firebase 應用程式內訊息傳遞整合到您的應用程式中

應用程式內訊息傳遞基本整合是完全無程式碼的，您所需要做的就是添加依賴項，然後您就可以開始了！將以下相依性新增至您的pubspec.yaml檔案中

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

在 Firebase 控制台中撰寫訊息

現在您已將 FIAM 新增至您的應用程式中，讓我們編寫一條訊息，該訊息將在您的應用程式首次開啟時觸發。

要撰寫您的第一則訊息：

1. 在 Firebase 控制台的Engage部分中，點擊應用程式內訊息。
2. 按一下「應用程式內訊息傳遞」窗格中的「建立您的第一個行銷活動」 。

讓我們編寫一個基本的模態訊息以確保整合正常運作。您可以隨意以任何您喜歡的方式自訂訊息 - 您可以新增圖像、按鈕或更改顏色。

請務必針對您要測試的應用程序，具體取決於您所遵循的整合路徑（您可能擁有 iOS、Android 或兩者）。

我們希望確保在應用程式開啟時觸發訊息，因此預設的調度配置將在此處起作用。

一旦安排完成，我們就可以發布訊息。點擊“查看”，您應該會看到類似以下內容

在您的應用程式中查看訊息

現在，卸載並重新安裝您的應用程序，您應該會在打開時看到您創建的訊息。恭喜，您剛剛發送了第一條應用程式內訊息！在下一步中，您將學習如何新增分析事件，以便根據使用者在應用程式中執行的操作觸發應用程式內訊息。

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

將Firebase Analytics 整合到您的應用程式中

為了了解用戶如何與我們的應用程式交互，並根據他們的操作觸發應用程式內訊息，我們現在將為用戶點擊餐廳時添加一個分析事件。

1. 在pubspec.yaml中將 Firebase Analytics 相依性新增至 Flutter

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

2. 在home_page.dart中導入分析

import 'package:firebase_analytics/firebase_analytics.dart';

3. 將 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();
}

4. 當使用者點擊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 用戶，所以讓我們找到一些方法來鼓勵用戶留下評論。

首先讓我們定義我們的轉換事件

由於我們想了解用戶是否正在評論餐廳，因此我們可以添加一個分析事件來衡量這種行為。

1. 像之前一樣導入 Firebase Analytics，並將 Analytics 實例新增至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);
}

2. 現在，當我們在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 控制台的Engage部分中，按一下A/B 測試。
2. 按一下「建立實驗」 ，然後選擇您想要進行「應用程式內訊息傳遞」實驗。這將帶您進入如下所示的實驗作曲家。

為您的實驗命名和可選描述。

4. 下一步是編寫要在實驗中發送給使用者的不同應用程式內訊息。我們要編寫的第一個應用內訊息是“基線”，或者是我們實驗的控制。我們可以將其作為簡單的“請進行評論”訊息：

5. 現在我們有了基線，我們現在將編寫一個變體，即應用程式內訊息，為用戶提供優惠券代碼以鼓勵他們留下評論。這在下面的預覽中並不完全可見，但訊息標題是“領取優惠券，留下評論！”，訊息正文是“下次您在 Burrito Cafe，請使用優惠券代碼 FRIENDLYEATS-15，地址：結帳時可享15% 的折扣。並記得在付款後留下評論！」。這有望激勵一些用戶去看看墨西哥捲餅咖啡館！

在下一步中，我們將定位我們的應用程式並設定曝光度。這是將在實驗中看到其中一條訊息的合格用戶（滿足定位/觸發條件的用戶）的百分比。在此範例中，我們可以將其設定為 100%，因為我們希望所有用戶都能看到基準或我們的優惠券變體。如果您想要一個完全不顯示應用程式內訊息的對照組，您可以降低此曝光百分比。

7. 接下來，您將為實驗定義一些目標。這是我們想要測量的實驗的結果。我們將其設定為我們在上一節中定義的review_success分析事件，因為我們希望看到不同的應用程式內訊息對使用者留下餐廳評論的影響。
8. 為了安排時間，我們將讓活動立即開始，並將click_restaurant設定為觸發條件，以便用戶在點擊餐廳時看到兩個應用程式內訊息之一。

9. 現在，剩下的就是檢查我們的實驗，然後點擊“開始實驗” 。然後我們就可以坐下來等待實驗數據的到來了！

即時查看數據採集情況

現在我們已經開始實驗，FriendlyEats 用戶在點擊餐廳時將隨機看到我們編寫的兩個應用程式內訊息之一，即基線訊息或變體訊息。這將根據用戶看到的訊息將他們分為兩組。然後，我們可以查看 Firebase 控制台（再次在 A/B 測試部分下）來比較兩組的即時分析資料。資料輸入需要一些時間，因為我們需要等待使用者實際看到應用程式內訊息並採取相應行動。獲得足夠的數據後，您的結果可能如下所示：

在這種情況下，該變體在基線上有了顯著改進，因此我們可以選擇選擇「推出變體」 ，然後向所有用戶推出帶有優惠券的應用程式內訊息。

8. 恭喜

恭喜，您已成功建立並執行第一個應用程式內訊息傳遞實驗。現在，您可以在自己的應用程式中執行實驗，並使用結果使您的應用程式內訊息傳遞活動更加有效。

下一步是什麼？

看看其中一些代碼實驗室...

• 多平台 Firestore Flutter
• 將 Firebase 遠端設定實驗新增至 Android 應用

進一步閱讀

我們剛剛觸及了 Firebase 應用程式內訊息傳遞和 Firebase A/B 測試的皮毛。如果您想了解更多信息，請查看這些...

• 使用 A/B 測試建立訊息傳遞實驗
• 使用 A/B 測試建立遠端設定實驗
• 探索 Firebase 應用程式內訊息傳遞的用例
• 自訂您的 Firebase 應用程式內訊息傳遞訊息

參考文檔

• 透過 A/B 測試建立應用程式內訊息傳遞實驗