如何在您的 NativeScript 移动应用中添加 Firebase Analytics
观看我们的网络研讨会 录音 “NativeScript on Fire(base) 🔥”
我们都知道，当您想尽快发布您的移动应用时，那种渴望的感觉。您已经花了几个月的时间开发它，测试它，它看起来不错，您的 另一半 甚至很喜欢它。您和您的已发布应用之间唯一的阻碍是更多工作。但是，为您的应用添加 Analytics 是一项值得投资的努力。只需半小时的工作，您就会知道用户需要什么，如何满足他们的需求，以及在哪里投资您宝贵的开发时间。
先决条件
在您新创建的项目中，您 需要 导航到项目设置并添加 iOS 和 Android 应用程序。对于 iOS 中的 Bundle ID 或 Android 中的 Package name，请使用您的 NativeScript 应用程序 package.json 中设置的 applicationId 属性的值。结果，您应该拥有 GoogleServices-Info.plist 和 google-services.json 文件。 这些文件包含 Firebase SDK 使用的配置属性，以便将用户与您的 Analytics 项目的交互正确关联起来。 您可以安全地跳过有关如何添加 Firebase SDK 以及如何添加初始化代码 到您的应用程序的说明，因为此设置将由插件处理。 以下是 iOS 的处理流程（Android 的处理流程非常 相似）
设置
第一步，您需要安装 nativescript-plugin-firebase 插件。按照 安装步骤 进行操作，这些步骤由 Eddy Vebruggen（此出色插件的作者）提供。您需要将 GoogleServices-Info.plist 文件放在 App_Resources/iOS 文件夹中，并将 google-services.json 文件放在 App_Resources/Android 文件夹中。安装插件完成后，将在项目的根目录中添加一个额外的文件 firebase.nativescript.json。 在安装过程中，您需要回答有关您计划使用 Firebase 插件的哪些部分的几个问题。输出是 firebase.nativescript.json 文件，该文件应该与以下内容类似
{
"using_ios": true,
"using_android": true,
"firestore": false,
"realtimedb": false,
"remote_config": false,
"messaging": false,
"crashlytics": true,
"crash_reporting": false,
"storage": false,
"facebook_auth": false,
"google_auth": false,
"admob": false,
"invites": false,
"dynamic_links": false,
"ml_kit": false
}
注意：您永远不应该将 GoogleServices-Info.plist 和 google-services.json 文件提交到公共存储库。它们包含您的秘密信息，如果它们没有得到妥善保护，其他人将能够利用您的帐户中的数据。理想情况下，它们应该由您的 CI 基础设施在构建时插入生产构建中。
下一步是初始化应用程序中的插件。最合适的位置是您 Angular 应用程序的 **根组件**，如 启动连接说明 中所述。它就像下面一样简单
app.component.ts
import * as firebase from "nativescript-plugin-firebase";
…
ngOnInit(): void {
firebase.init({
}).then(
instance => {
console.log("firebase.init done");
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
};
如果您使用的是 {N} Core Framework，您可以使用应用程序的启动事件 并附加到它
app.js
application.on(application.launchEvent, (args) => {
firebase.init({
}).then(
instance => {
console.log("firebase.init done");
},
error => {
console.log(`firebase.init error: ${error}`);
}
);
};
});
安装完成后，运行 tns run 命令。当您的应用程序在您的设备上启动时， 您应该在 Analytics 仪表板的“过去 30 分钟内的用户”磁贴中看到一些变化。 另一个 迹象 表明车轮开始转动的是，一旦注册了第一个数据，iOS 和 Android 项目旁边的红色圆点将 消失
完成所有这些操作后，您已经领先于游戏，并且将拥有比 Android 和 iOS 开发者控制台中公开的更多洞察力。Firebase 将开始为您跟踪一些开箱即用的事件，例如：first_open、screen_view 和 session_start（可以在 文档 中找到包含自动跟踪事件的完整列表）。它还将报告有关您的用户的一些人口统计信息 - 他们位于哪个国家/地区、性别、年龄、兴趣、他们使用什么设备以及其他信息。此外，您的用户将自动报告为新用户或回头客。这将让您更好地了解您的受众、他们的兴趣，并调整您的应用程序，使其更具吸引力。您可以使用 setUserProperty 方法轻松为您的用户添加其他信息，并进一步将您的用户群细分为不同的细分市场。
跟踪页面浏览量
虽然 Firebase 会自动跟踪名为“screen_view”的事件，但由于 NativeScript 的架构，它们不会非常有用。所有用户的参与度都将在 Android 的单个 Activity 或 iOS 的单个 ViewController 中报告。因此，为了更好地了解如何使用我们的应用程序，我们需要实现一个自定义事件，并向其中添加一些属性。
出于本文的目的，我将此类事件称为“页面浏览量”。此术语可能非常含糊，具体取决于您的应用程序的具体情况，它可能意味着不同的东西。此外，我们不仅要跟踪页面的浏览量，还要跟踪浏览的是哪个页面，这样我们就可以分析哪些页面最有帮助。
所有这些都可以使用 nativescript-plugin-firebase 插件公开的 API 轻松实现。analytics 对象提供了 logEvent 方法，该方法将完全执行我们需要的操作。这是一个示例代码段
import * as firebase from "nativescript-plugin-firebase";
...
firebase.analytics.logEvent({
key: "page_view",
parameters: [
{
key: "page_id",
value: “Home”
}
// 这里可以添加其他参数
]
});
这将记录一个名为“page_view”的事件，其中包含一个名为“page_id”的参数，其值为“Home”。 一种方法是在每个组件初始化时添加手动调用。这将是一项非常繁琐且容易出错的任务，我们可以做得比这更好。让我们利用 Angular 路由器公开的事件，并在那里记录事件，如下所示
app.component.ts
this.router.events
.pipe(filter((event: any) => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {
firebase.analytics.logEvent({
key: "page_view",
parameters: [{
key: "page_id",
value: event.urlAfterRedirects
}]
});
});
注意: 如果你正在使用 {N} Core Framework，你可以使用 navigatedTo 事件并实现类似的逻辑。
这将使用 URL 作为 page_id 值。在大多数情况下，它将很好地展示访问了哪些 URL 以及访问频率。当然，如果你的 URL 模式不合适，你可以根据自己的需要调整它。
一个需要注意的地方是，你需要在开始使用参数之前在 Firebase 控制台中注册它。为此，在 Firebase 控制台中打开你的项目，打开“事件”屏幕，点击“page_view”事件，然后有一个“添加事件参数”按钮。从那里，添加你想要跟踪的参数——在本例中是‘page_id’。
此时，你将知道你的应用程序哪些部分最有帮助。通过添加这个功能，你将拥有用户及其与移动应用程序交互方式的完整地图。以下是 Firebase 控制台中可能出现的情况
跟踪转化率
根据你的应用程序的用途，你可能需要跟踪不同的转化率。默认情况下，有一些事件，如 ecommerce_purchase 和 in_app_purchase。你可以自由地将任何现有的事件标记为转化率，具体取决于用户的流程和业务逻辑。为此，只需导航到转化率屏幕并按照“新建转化率事件”向导进行操作。
此外，你可以创建漏斗来跟踪你的转化率完成情况，并确定用户旅程中需要改进的地方。这同样很容易实现，只需从漏斗屏幕操作。
作为非常简化的示例，我准备了一个 示例应用程序。在主页上，有两个按钮——“添加到购物车”和“购买”。“购买”按钮将使用 Firebase 视为转化率的内置键之一（称为“ecommerce_purchase”）记录新的事件。另一个按钮“添加到购物车”将记录一个名为“add_to_cart”的新事件，我可以从 Firebase 控制台中将其标记为转化率。这样，我可以轻松地构建一个漏斗来跟踪我的转化率，例如“first_open” -> “add_to_cart” -> “ecommerce_purchase”。这将让我了解应该在哪里改进用户体验和转化率。以下是完成这些步骤后漏斗可能出现的情况
显然，现在我的虚拟漏斗中有一些问题，我需要解决它 🙂
故障排除
从你的应用程序记录的事件不会立即显示在 Firebase 控制台中。数据可能需要长达 24 小时才能可用。根据我的经验，至少需要几个小时。这可能会使调试变得困难，因为你必须等待很长时间才能测试你的更改。
幸运的是，Firebase 控制台中有一个名为“DebugView”的视图。你需要为你的应用程序或设备启用它，启用后，你的设备上的事件将在报告后立即可见。对于 Android，只需运行 adb shell setprop debug.firebase.analytics.app <包名，例如：org.nativescript.nativescriptanalyticssample> 即可。对于 iOS，你需要在 XCode 中打开你的项目，并在启动时添加 -FIRDebugEnabled 参数。有关如何实现此操作的更多信息可以在 Firebase 文档 中找到。
总结
总之，添加 Analytics 很简单，可以让你更聪明，可以为你节省时间和金钱，绝对没有理由不开始使用它。Firebase 免费提供出色的功能，但还有其他出色的 Analytics 服务，你可以探索。你需要做的最困难的事情是思考——你的应用程序成功的意义是什么，以及如何衡量它。实际的测量现在很简单。
资源
- Firebase 中 Analytics 功能的完整文档： https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/ANALYTICS.md
- NativeScript 示例应用程序中的 Analytics： https://github.com/etabakov/nativescript-analytics-sample
- Firebase Analytics 文档： https://firebase.google.com/docs/analytics/