您的首个 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 优化工具为基础，可让您轻松地运行、分析并大规模开展产品和营销实验，从而帮助您改进应用。借助 A/B Testing，您可以测试对应用界面、功能或互动广告系列的更改，以便在广泛发布之前确认这些更改是否确实使关键指标（如收入和用户留存率）有所改观。

所需条件

如果您不熟悉 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 版）。
  • 一个用于创建和管理 Firebase 项目的 Google 账号（例如 Gmail 账号）。
  • 此 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. 在 Firebase 控制台中，点击添加项目，然后将 Firebase 项目命名为 FriendlyEats。请记住您的 Firebase 项目 ID（也可以点击修改图标设置自己偏好的项目 ID）。
  2. 确保为项目启用了 Google Analytics，然后点击继续。
  3. 点击 Create project。

恭喜！您刚刚创建了第一个 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 集成到您的应用中

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

  1. 在 pubspec.yaml 中将 Firebase Analytics 依赖项添加到 Flutter
dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...
  1. 在 home_page.dart 中导入 Google Analytics
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 中的餐厅卡片时触发 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 控制台中，返回“In-App Messaging”，然后修改现有广告系列

d1fdc539dfcc6375.png

现在，更改“安排”部分，以便通过新活动触发消息

8e12d8f1f8f166dd.png

然后，点击“评价”按钮即可发布更改

4f7d6bd2960b3ef7.png

在应用中测试触发器

此时，您应该能够使用以下命令运行应用

flutter run

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

a11febda5526263.png

7. 制作 FIAM+ABT 广告系列

从目标着手

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

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

由于我们希望了解用户是否在评价餐厅，因此我们可以添加一个 Google Analytics 事件来衡量此行为。

  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);
}
  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 Testing 向用户随机显示我们的某条应用内消息，并衡量这对用户行为的影响，就像进行临床试验一样。最重要的是，您可以完全通过 Firebase 控制台完成此操作，无需编写任何代码！

如需编写您的第一个应用内消息传递实验，请执行以下操作：

  1. 在 Firebase 控制台的互动部分，点击 A/B Testing。
  2. 点击创建实验，然后选择要试验的In-App Messaging。这会将您带到如下所示的实验作曲家。

a792dfd4f82fee9c.png

为实验命名并添加说明（可选）。

  1. 在下一步中，您需要撰写要在实验中向用户发送的不同应用内消息。我们将撰写的第一条应用内消息是“基准组”，即实验的对照组。我们可以将其作为简单的“请进行评价”消息：

50e3eb946c56501a.png

  1. 现在，我们已经有了基准组，接下来将编写一个变体，即提供优惠券代码的应用内消息，以鼓励用户留下评价。以下预览中未完整显示，但消息标题为“领取优惠券，留下评价！”，消息正文为“下次光顾 Burrito Cafe 时，结账时使用优惠券代码 FRIENDLYEATS-15，即可享受 85 折优惠。记得在使用后留下评价！”希望这能激励一些用户前往 Burrito Cafe！

bed9182080bebb41.png

在下一步中，我们将定位到应用并设置曝光度。这是符合条件的用户（即满足定位条件/触发条件的用户）中会看到实验中某条消息的用户所占的百分比。在本例中，我们可以将其设置为 100%，因为我们希望所有用户都看到基准组或优惠券变体。如果您希望对照组完全不显示任何应用内消息，可以降低此曝光百分比。

bd96bf5798d227f1.png

  1. 接下来，您将为实验定义一些目标。这是我们想要衡量的实验结果。我们将其设置为我们在上一部分定义的 review_success Google Analytics 事件，因为我们希望了解不同的应用内消息对用户留下餐厅评价的影响。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 的部分功能。如需了解详情，请参阅以下内容...

参考文档