您的首次 In-App Messaging 实验

1. 简介

目标

在此 Codelab 中，您将为一款由 Flutter 和 Cloud Firestore 提供支持的多平台移动餐厅推荐应用配置应用内消息实验。

完成后，您将能够设计和实现应用内消息实验，从而以最少的代码有效提升任何 iOS 或 Android 应用的用户互动度。

b284c40acc99b994.png

学习内容

  • 如何在 Flutter 应用中使用 Firebase In-App Messaging (FIAM)
  • 如何自定义应用内消息的外观
  • 如何设计应用内消息传递实验并在应用中实现该实验
  • 如何解读应用内消息传递实验的结果

您想通过此 Codelab 学习哪些内容？

我不熟悉这个主题，想好好了解一下。 我对这个主题有所了解，但想复习并深入了解一下。 我在寻找示例代码以用到我的项目中。 我在寻找有关特定内容的说明。

Firebase In-App Messaging

借助 Firebase In-App Messaging (FIAM)，您可以向应用的活跃用户发送具有针对性且合乎情境的消息来吸引他们，促使他们完成重要的应用内操作，例如打通某个游戏关卡、购买某件商品或订阅内容。

Firebase A/B Testing

Firebase A/B Testing (ABT) 以 Google 优化工具为基础，可让您轻松地运行、分析并大规模开展产品和营销实验，从而帮助您优化应用的使用体验。它使您能够测试应用界面、功能或互动性宣传活动的更改，以便在发布之前确认这些更改是否可以改善关键指标（如收入和用户留存率）。

所需条件

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

您可以使用以下任意设备运行此 Codelab：

  • 连接到计算机并设为开发者模式的实体设备（Android 或 iOS）。
  • iOS 模拟器（需要安装 Xcode 工具）。
  • Android 模拟器（需要在 Android Studio 中进行设置）。

除了上述要求之外，您还需要：

  • 您所选的浏览器（例如 Chrome）。
  • 您选择的 IDE 或文本编辑器，例如配置了 Dart 和 Flutter 插件的 Android Studio 或 VS Code。建议将 VS Code 与 Flutter 搭配使用。
  • 最新稳定版 Flutter（如果您喜欢尝试新事物，也可以使用 Beta 版）。
  • 一个 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 文件夹中的已完成版本。此代码库中的其他分支包含用于构建 FriendlyEats 应用的代码，如多平台 Firestore Flutter Codelab 中所示。在此 Codelab 中，我们已在此分支中移除了 Web 集成。

导入 starter 应用

打开 codelab-fiam-abt 目录，或将其导入首选 IDE 中。此目录包含此 Codelab 的起始代码，其中包含一个餐厅推荐应用。在此 Codelab 中，您将为该应用的用户设置一个应用内消息实验。

创建 Firebase 项目

  1. 使用您的 Google 账号登录 Firebase 控制台。
  2. 点击相应按钮以创建新项目，然后输入项目名称（例如 FriendlyEats）。
  3. 点击继续。
  4. 如果看到相关提示，请查看并接受 Firebase 条款，然后点击继续。
  5. （可选）在 Firebase 控制台中启用 AI 辅助功能（称为“Gemini in Firebase”）。
  6. 在此 Codelab 中，您需要使用 Google Analytics 才能充分利用 Firebase 产品，因此请确保 Google Analytics 选项的开关处于开启状态。按照屏幕上的说明设置 Google Analytics。
  7. 点击创建项目，等待项目完成预配，然后点击继续。

恭喜！您刚刚创建了第一个 Firebase 项目。

接下来，您将了解如何使用 Firebase 控制台配置和启用必要的服务。

启用匿名身份验证

虽然身份验证并不是此 Codelab 的重点，但您的应用中一定要有某种形式的身份验证。您将使用匿名登录，这意味着用户会静默登录，不会收到任何提示。

如需启用匿名登录，请执行以下操作：

  1. 在 Firebase 控制台中，在左侧导航栏中找到身份验证。
  2. 点击身份验证，然后点击开始，并选择登录方法标签页（或直接转到 Firebase 控制台）。
  3. 启用匿名登录服务提供方，然后点击保存。

fee6c3ebdf904459.png

通过启用匿名登录，该应用可以在用户访问应用时让其静默登录。如需了解详情，请参阅 Android 和 iOS 的匿名身份验证文档。

设置 Cloud Firestore

该应用使用 Cloud Firestore 保存并接收餐馆信息和评分。

以下是在 Firebase 项目中设置 Cloud Firestore 的方法：

  1. 在 Firebase 控制台的左侧面板中，展开构建，然后选择 Firestore 数据库。
  2. 点击创建数据库。
  3. 将数据库 ID 保留为 (default)。
  4. 为数据库选择一个位置，然后点击下一步。
    对于真实应用，您需要选择靠近用户的位置。
  5. 点击以测试模式开始。阅读有关安全规则的免责声明。
    在本 Codelab 的后面部分，您将添加安全规则来保护您的数据。在没有为数据库添加安全规则的情况下，请不要公开分发或公开应用。
  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 对话框，将复制的软件包标识符粘贴到 iOS 软件包 ID 字段中，然后点击注册应用。
  1. 还是在 Firebase 中，按照说明下载配置文件 GoogleService-Info.plist。
  2. 返回 Xcode。请注意，Runner 也有一个名为 Runner 的子文件夹（如上一张图所示）。
  3. 将您刚刚下载的 GoogleService-Info.plist 文件拖到该 Runner 子文件夹中。
  4. 在 Xcode 中显示的对话框中，点击 Finish。
  5. 返回 Firebase 控制台。在设置步骤中，点击下一步，跳过其余的步骤，然后返回 Firebase 控制台的主页面。

您的 Flutter 应用已针对 iOS 配置完毕！

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. 此 Codelab 不需要使用调试签名证书 SHA-1。将此项留空即可。
  5. 点击注册应用。
  6. 还是在 Firebase 中，按照说明下载配置文件 google-services.json。
  7. 前往 Flutter 应用目录，将您刚刚下载的 google-services.json 文件移至 android/app 目录中。
  8. 返回 Firebase 控制台，跳过其余的步骤，然后返回 Firebase 控制台的主页面。
  9. 所有 Gradle 配置均已签入。如果您的应用仍在运行，请将其关闭并重新构建，以允许 Gradle 安装依赖项。

您的 Flutter 应用已针对 Android 配置完毕！

4. 在本地运行应用

您已准备好实际处理应用了！首先，在本地运行应用。现在，您可以在任何已配置（并且您拥有设备和模拟器）的平台上运行应用。

使用以下命令了解有哪些设备可用：

flutter devices

上述命令的输出类似于如下所示，具体取决于有哪些设备可用：

7d44d7c0837b3e8e.png

现在，使用以下命令在本地运行应用：

flutter run

现在，您应该会看到，FriendlyEats 的副本已连接到您的 Firebase 项目。

该应用会自动连接到您的 Firebase 项目，并使您以匿名用户身份静默登录。

5. 创建并测试您的第一条消息

将 Firebase In-App Messaging 集成到应用中

In-App Messaging 的基本集成完全无需编码，您只需添加依赖项即可开始使用！将以下依赖项添加到您的 pubspec.yaml 文件中

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

在 Firebase 控制台中撰写消息

现在，您已将 FIAM 添加到应用中，接下来我们来撰写一条在应用首次打开时触发的消息。

如需撰写您的第一条消息，请执行以下操作：

  1. 在 Firebase 控制台的吸引部分中，点击 In-App Messaging。
  2. 在“In-App Messaging”窗格中，点击制作首个宣传活动。

4fec02395f89f2a8.png

用于撰写基本模态消息，以确保集成正常运行。您可以随意自定义消息，例如添加图片、按钮或更改颜色。

59845004afc26847.png

请务必以您要测试的应用为目标，根据您遵循的集成路径，您可能需要同时定位 iOS 和 Android 应用，也可能只需要定位其中一个。

3f1eb7a327a50265.png

我们希望确保在应用打开时触发消息，因此默认的调度配置在此处适用。

8dc5cea0a4c79008.png

安排好发布时间后，我们就可以发布消息了。点击“查看”，您应该会看到类似以下内容

5bbc987bf63d1f48.png

在应用中查看消息

现在，卸载并重新安装应用，您应该会在打开应用时看到您创建的消息。恭喜，您刚刚发送了首条应用内消息！在下一步中，您将学习如何添加分析事件，以便根据用户在应用中执行的操作触发应用内消息。

6. 集成 Firebase Analytics 以实现高级消息触发

将 Firebase Analytics 集成到应用中

为了了解用户与我们应用的互动情况，并根据用户的操作触发应用内消息，我们现在将添加一个 Analytics 事件，用于在用户点击餐厅时触发。

  1. 在 pubspec.yaml 中向 Flutter 添加 Firebase Analytics 依赖项
dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...
  1. 在 home_page.dart 中导入分析
import 'package:firebase_analytics/firebase_analytics.dart';
  1. 在 home_page.dart 中向 HomePage 类添加 Firebase Analytics 的实例
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 中点击餐馆卡片时，触发一个 Google Analytics 事件
onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

修改消息以在发生 Google Analytics 事件时触发

现在我们有了“click_restaurant”事件，接下来我们基于该事件（而不是在用户打开应用时）触发应用内消息。

在 Firebase 控制台中，返回到“应用内消息”，然后修改现有宣传活动

d1fdc539dfcc6375.png

现在，更改调度部分以触发来自新活动的讯息

8e12d8f1f8f166dd.png

然后，我们可以点击“查看”按钮来发布更改

4f7d6bd2960b3ef7.png

在应用中测试触发器

此时，您应该能够运行应用，并

flutter run

点击餐厅后，您应该会看到应用内消息

a11febda5526263.png

7. 制作 FIAM+ABT 广告系列

从目标开始

Friendlyeats 应用看起来已经很棒了，但要让它发挥作用，我们需要添加一些评价。这些评价将来自 Friendlyeats 用户，因此我们需要想办法鼓励用户发表评价。

首先，我们来定义转化事件

由于我们想了解用户是否在评价餐厅，因此添加一个分析事件来衡量此行为。

  1. 像之前一样导入 Firebase Analytics，并在 restaurant_page.dart 中向 RestaurantPage 添加 Analytics 实例
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 Testing。
  2. 点击创建实验，然后选择要针对 In-App Messaging 开展实验。这样一来，您将进入如下所示的实验编辑器。

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 Testing”部分下）查看并比较这两个组的实时分析数据。由于我们需要等待用户实际看到应用内消息并采取相应行动，因此数据需要一段时间才能显示。在收集到足够的数据后，您的结果可能如下所示：

8fa8a0edcd8a8ad4.png

在这种情况下，变体比基准有了显著改进，因此我们可以选择推出变体，然后向所有用户推出包含优惠券的应用内消息。

8. 恭喜

恭喜，您已成功创建并运行了第一个应用内消息实验。现在，您可以在自己的应用中开展实验，并根据实验结果来提高应用内消息广告系列的效果。

后续操作

查看其中一些 Codelab...

深入阅读

我们只是初步了解了 Firebase In-App Messaging 和 Firebase A/B Testing 的功能。如果您想了解详情，请参阅以下内容…

参考文档