您的首个 In-App Messaging 实验

1. 简介

目标

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

完成后，您将能够设计和实现应用内消息实验，以便有效提升任何 iOS 或 Android 应用的用户互动度，同时尽可能减少代码量。

b284c40acc99b994

学习内容

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

您想通过此 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 文件夹中的完整版本。如多平台 Firestore Flutter Codelab 中所示，此代码库中的其他分支包含用于构建 FRIENDEats 应用的代码。在此 Codelab 中，我们移除了此分支中的 Web 集成。

导入 starter 应用

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

创建 Firebase 项目

  1. 在 Firebase 控制台中，点击添加项目，然后将 Firebase 项目命名为 FreeEats。记住 Firebase 项目的 ID（或点击修改图标，设置首选项目 ID）。
  2. 确保已为该项目启用 Google Analytics（分析），然后点击继续。
  3. 点击 Create project。

恭喜！您刚刚创建了您的第一个 Firebase 项目。现在，您可以点击项目名称进入控制台。

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

启用匿名身份验证

虽然身份验证不是此 Codelab 的重点，但请务必在您的应用中进行某种形式的身份验证。您将使用匿名登录，这意味着用户无需收到提示便静默登录。

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

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

fee6c3ebdf904459

启用匿名登录后，当用户访问该应用时，该应用便可让用户静默登录。要了解详情，请参阅适用于 Android 和 iOS 的匿名身份验证文档。

启用 Cloud Firestore

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

如需启用 Cloud Firestore，请执行以下操作：

  1. 在 Firebase 控制台的左侧导航栏中，点击 Firestore。
  2. 点击 Cloud Firestore 窗格中的创建数据库。

57e83568e05c7710

  1. 选择以测试模式开始选项，在阅读有关安全规则的免责声明后点击下一步，然后点击启用。

测试模式可确保您在开发过程中可以随意向数据库写入数据。稍后您将在此 Codelab 中提高数据库的安全性。

daef1061fc25acc7.png

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

  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配置 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

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

flutter run

现在，您应该会看到您的 FreeEats 副本，它已关联到您的 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 窗格中的 Create your first campaign（创建首个宣传活动）。

4fec02395f89f2a8

让我们编写一条基本的模态消息，以确保集成正常运行。您可以随意用任何方式自定义消息 - 您可以添加图片、按钮或更改颜色。

59845004afc26847

请务必定位到要用于测试的应用，具体取决于您使用的集成路径，可能是 iOS、Android 或两者兼有。

3f1eb7a327a50265

我们希望确保消息在应用打开时触发，因此默认的时间安排配置将在此处发挥作用。

8dc5cea0a4c79008

完成调度后，我们就可以发布消息了。点击“查看”，您应该会看到类似如下所示的内容

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 中的餐厅卡片时触发分析事件
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

在这里，我们可以点击“审核”按钮发布更改

4f7d6bd2960b3ef7.png

在应用中测试触发器

此时，您应该能够使用

flutter run

当您点击某家餐馆时，应该会看到您的应用内消息

A11febda5526263

7. 制作 FIAM+ABT 活动

从目标开始

我们的 Friendseats 应用已经很棒了，但为了让它能够发挥效用，我们需要一些评价。这些评论将由 Friendseats 用户负责，因此我们想办法鼓励用户发表评价。

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

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

  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 测试

至此，我们已经知道了如何创建 In-App Messaging 宣传活动，接下来应该考虑通过这些宣传活动在应用内鼓励用户的行为。对于 FriendsEats 计划，我们希望更多用户留下评价，以便使该应用更加实用！我们可以通过以下几种方式鼓励使用应用内消息。一种是通过简单的应用内消息，告诉用户应该为餐馆提供评价，从而帮助改进 FriendsEats 应用。另一种方法是，使用应用内消息为提供评价提供某种激励，例如向指定餐厅提供优惠券或折扣代码。

这两种方法都会增加用户在 FriendsEats 上对餐厅发表评价的频率，就目前而言，提供优惠券似乎会产生更大的影响。但是，提供此优惠券会促使用户撰写评价的可能性有多大？一开始，优惠券的成本是否物有所值？为了确定这一点，我们将运行 In-App Messaging 实验！我们可以使用 Firebase A/B Testing 向用户随机显示一条应用内消息，并衡量这对用户行为的影响，就像临床试验一样。最重要的是，这完全可以通过 Firebase 控制台完成，无需任何代码！

要编写您的首个应用内消息实验，请执行以下操作：

  1. 在 Firebase 控制台的互动部分，点击 A/B Testing。
  2. 点击创建实验，然后选择您要针对 In-App Messaging 进行实验。此操作会将您转到如下所示的实验编辑器。

a792dfd4f82fee9c.png

为实验命名，您还可以选择添加说明。

  1. 下一步是撰写要向实验中的用户发送的不同应用内消息。我们要撰写的第一条应用内消息是“基准”，即实验的对照组。我们可以将这条消息设为简单的“请审核”消息：

50e3eb946c56501a

  1. 现在，我们已经有了基准，接下来要撰写变体，即向用户提供优惠券代码以鼓励他们发表评价的应用内消息。这未在下面的预览图中完整显示，但消息标题为“带着优惠券，留下评价！”，并且邮件正文为“下次去墨西哥卷饼咖啡馆时，请在结账时使用优惠券代码 FRIENDLYEATS-15，享受订单八五折优惠。别忘了留下评价！”这有望吸引部分用户前往墨西哥卷饼咖啡馆！

bed9182080bebb41.png

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

bd96bf5798d227f1.png

  1. 接下来，您需要为实验定义一些目标。这是我们想要衡量的实验的结果。我们要将此事件设置为在上一部分中定义的 review_success 分析事件，因为我们希望了解不同的应用内消息对撰写餐厅评价的用户有何影响。eb89d3b9f89ab43b
  2. 对于时间安排，我们将让广告系列立即开始投放，并将 click_restaurant 设置为触发条件，以便用户在点击某家餐馆时看到两条应用内消息中的一条。

c57be430d41bfcad.png

  1. 现在，接下来要做的就是查看实验，然后点击启动实验。然后，我们可以静待实验数据传入！

566af8bace30c67.png

实时查看数据收集情况

现在，我们已经启动了实验，对于用户点击餐厅，FreeEats 用户将随机看到我们编写的两条应用内消息之一，即 baseline 消息或 variant 消息。这会根据用户看到的消息将其分为两组。然后，我们可以在 Firebase 控制台（同样位于“A/B Testing”部分下）比较两组的实时分析数据。需要一些时间才能导入数据，因为我们需要等待用户真正看到应用内消息，并采取相应的行动。获得足够的数据后，结果可能如下所示：

8fa8a0edcd8a8ad4.png

在本示例中，变体在基准基础上有了显著改进，因此我们可以选择发布变体，然后向所有用户发布包含优惠券的应用内消息。

8. 恭喜

恭喜！您已成功创建并运行您的首个应用内消息实验。现在，您可以在自己的应用中运行实验，并利用实验结果提升应用内消息宣传活动的效果。

后续操作

查看其中一些 Codelab...

深入阅读

我们刚刚初步了解了 Firebase In-App Messaging 和 Firebase A/B Testing 的用法。如果您想了解更多内容，请查看这些内容...

参考文档