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

导入 starter 应用

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

创建 Firebase 项目

  1. 在 Firebase 控制台中，点击添加项目，然后将 Firebase 项目命名为 KindEats。请记住您的 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

  1. 要提供的重要值是 iOS 软件包 ID。您可以通过执行以下 3 个步骤获取软件包 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.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 安装依赖项。

您已完成 Android 版 Flutter 应用的配置！

4. 在本地运行应用

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

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

flutter devices

上述命令的输出类似于如下内容，具体取决于可用的设备：

7d44d7c0837b3e8e

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

flutter run

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

该应用会自动连接到您的 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

我们来编写一个基本的模态消息，以确保集成正常运行。您可以随心所欲地自定义消息，您可以添加图片、按钮或更改颜色。

59845004afc26847

请务必定位要用于测试的应用，具体取决于您遵循的集成路径，可能是 iOS 和/或 Android。

3f1eb7a327a50265.png

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

8dc5cea0a4c79008

安排完成后，我们就可以发布消息了。点击“review”（审核），您应该会看到如下所示的内容

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

7. 创建 FIAM+ABT 活动

从目标开始

我们的 Friendlyeats 应用已经看起来非常棒了，但还需要获得一些评价才能使用它。这些评价来自 fiteats 用户，所以我们想办法鼓励用户发表评价。

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

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

  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 可享受订单八五折优惠。”记得在使用后留下评价！”这有望促使一些用户光顾墨西哥卷饼咖啡馆！

bed9182080bebb41

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

Bd96bf5798d227f1

  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 的功能。如果您想了解更多信息，请查看以下内容...

参考文档