返回博客首页
← 所有文章

在您的 NativeScript 应用中添加分析

2015年9月11日 — 作者 Sebastian Witalec
Telerik Analytics 是 Telerik 平台 的组件之一，它允许您衡量用户如何与您的应用程序交互。
它为您提供对以下方面的洞察：
  • 用户的环境数据（硬件规格、地理位置、操作系统版本）
  • 哪些功能被使用以及使用频率
  • 某些功能使用哪些值
  • 操作完成或用户执行某个操作需要多长时间
  • 应用程序中引发的异常

Analytics Dashboard View
需要记住的一件重要事情是，Analytics 不会自动分析您的应用，而更像是一种工具，让您在不打扰客户的情况下提出问题并获得答案。

在本文中，我们将使用 Telerik AppBuilder 创建一个 NativeScript 应用，并将其连接到 Telerik 平台 Analytics 项目。
请注意，我们在 AppBuilder 中执行的所有操作都可以在 命令行界面 中完成。

设置

步骤 1 - 登录到 Telerik 平台。

如果您还没有帐户，可以创建一个 30 天的试用版，这应该足以尝试 Analytics 组件。

步骤 2 - 在 Telerik 平台中创建一个 NativeScript 应用。

  1. 按下+ 创建应用按钮。
  2. 选择原生应用和从空白应用开始。
  3. 输入TapChallengeApp作为应用名称。
  4. 按下创建应用按钮。
  5. 按下创建 AppBuilder 原生项目按钮或按下+ 创建项目按钮并选择AppBuilder 原生项目。
  6. 选择NativeScript HelloWorld (JavaScript)。
  7. 输入TapChallenge作为项目名称。
  8. 按下创建项目按钮。

Creating App

步骤 3 - 创建 Analytics 项目。

从 TapChallengeApp 应用
  1. 按下创建 Analytics 项目按钮或+ 创建项目并选择Analytics 项目。
  2. 选择NativeScript。
  3. 输入TapChallengeAnalytics作为项目名称。
  4. 按下创建项目按钮。
从 TapChallengeAnalytics 项目
  1. 在屏幕左侧菜单中选择SDK选项。您可能需要展开侧边菜单才能找到或按下火箭符号。
  2. 下载NativeScript SDK。这是使 {N} 能够与 Analytics 通信的模块。

请注意生成的代码片段，其中已包含此 Analytics 产品 ID，它使 SDK 能够将您的分析数据发送到正确的位置。复制产品 ID，因为我们稍后会使用它。

步骤 4 - 将 Analytics SDK 添加到项目中。

返回TapChallenge AppBuilder 项目（只需点击右上角的 TapChallengeApp，然后选择 TapChallege）。

  1. 右键点击app文件夹并选择+ 添加->从归档文件。
  2. 提供您在上一步中下载的 zip 文件。
  3. 按下上传然后是。
这应该会在 app 文件夹中添加一些内容
  • NativeScriptMonitor 文件夹 - 包含允许与 Analytics 项目通信的对象
  • README.md - 包含有关如何使用 SDK 的说明
  • 在 tns_modules -> platform-ext 内部 - 为监视器提供环境信息

Add Analytics Plugin

提示：保持两个项目打开

最好在两个单独的选项卡中打开两个项目，因为系统会要求您在TapChallenge（AppBuilder 项目）和TapChallengeAnalytics（Analytics 项目）之间切换。

如果您丢失了其中任何一个，只需右键点击TapChallengeApp（在左上角）并选择在新选项卡中打开它。一旦TapChallengeApp打开，您可以切换到您需要使用的任何项目。

HelloWorld 应用的分析

{N} Hello World 应用已经包含一个按钮和一个计数器，每次点击按钮时，计数器从 42 倒数到 0。<剧透> 一旦达到 0，用户会看到以下消息：“Hoorraaay！您解锁了 NativeScript 点击器成就！” </剧透>
我们将在此功能周围添加分析，以了解哪些事情是可能的。

代码时间

添加监视器

现在所有项目都已到位，并且我们已导入 Analytics 模块，我们就可以开始编写代码了。

切换到TapChallenge选项卡。
打开app->app.js并将以下代码粘贴到application.start()之前。
这会向您的应用添加一个监视器对象，使您可以捕获应用使用情况分析。

application.on(application.launchEvent, function (e) {
    var NativeScriptMonitor = require('./NativeScriptMonitor').Monitor;
    var monitor = new NativeScriptMonitor({
        productId: '在此处输入您的产品密钥',
        version: '1.2.3'
    });
    monitor.start();
 
    global.monitor = monitor;
});
 
application.on(application.exitEvent, function (args) {
    monitor.stop();
});

 
使用您从 TapChallengeAnalytics -> SDK -> 代码示例中复制的 productId 更新productId。

现在您应该能够构建应用并在您的设备上测试它。
如果应用运行，我们就可以开始了。

如果应用崩溃，您可能错过了其中一个步骤。确保
  • application.start() 是 app.js 中的最后一行代码。
  • productId 已填充您的 Analytics productId。
  • NativeScriptMonitor 和 tns_modules/platform_ext 文件夹位于app文件夹内（您可以查看上面的 gif 以供参考）。如果您错误地将它们放在了其他地方，您可以快速将其拖放到正确的位置。

 
即使我们还没有做太多，Analytics 项目也应该很快包含有关您的设备、位置和应用版本的一些数据。只需等待 5 分钟即可更新。
切换到TapChallengeAnalytics选项卡，启用实时模式（请参阅以下说明）并准备惊叹吧：）。

在 Analytics 中查看实时数据

请注意，默认情况下，报表显示过去四天内的数据。这排除了当前日期。这意味着默认设置不会显示您最近的交互。
要更改此设置，请点击日期（左上角）并选择实时模式。这将允许您查看当前的使用情况。
在查看数据时，请记住，设备上记录的内容与项目中显示的内容之间始终存在几分钟的延迟。

Analytics Enable Live Mode

使用情况报表

Analytics 项目的此部分是一个通用报表，它为您提供有关谁、在哪里以及使用什么设备使用您的应用的信息。

Analytics Portal Preview

​
功能跟踪

现在是时候开始提问了。查看哪些功能被使用最多、使用频率以及如何使用。

这就像调用monitor.trackFeature("featureName");一样简单。

因此，首先让我们记录点击事件。
切换到TapChallenge选项卡并打开app->main-view-model.js。
将以下代码添加到文件顶部
var monitor = global.monitor;

然后在 tapAction 函数的第一行添加
var monitor = global.monitor;

从现在开始，每次用户点击按钮时，此信息都会记录在您的 Analytics 项目中。

为了更深入地了解用户模式，我们可以捕获有多少人开始、到达中间并完成 42 次点击挑战。

只需在第一个trackFeature调用后添加以下代码

switch (this.counter) {
    case 42:
        monitor.trackFeature("challenge.started");
        break;
    case 22:
        monitor.trackFeature("challenge.midway");
        break;
    case 1:
        monitor.trackFeature("challenge.completed");
        break;
}

重新部署应用以使更改生效（我假设您正在 使用 LiveSync 来帮助您完成此操作）。然后运行几次。

切换到TapChallengeAnalytics选项卡。转到功能报表->功能使用并查看报表（您可能仍然需要等待大约 5 分钟才能开始看到结果）。

Feature Use Stats

功能值跟踪

下一步，我们可以使用值增强功能跟踪，以了解事件发生的条件。

这非常简单，只需调用monitor.trackFeatureValue("featureName", value);即可。

让我们首先捕获有关何时使用应用的信息。
切换到TapChallenge选项卡并打开main-view-model.js。
在function HelloWorldModel() {内部添加以下代码

var d = new Date();
var hour = d.getHours();
monitor.trackFeatureValue("favourite.Hour", hour);


它应该如下所示

function HelloWorldModel() {
    _super.call(this);
    this.counter = 42;
    this.set("message", this.counter + " taps left");
 
    var d = new Date();
    var hour = d.getHours();
    monitor.trackFeatureValue("favourite.Hour", hour);
}
    

重新部署应用程序并运行几次。为了获得不同的值，您可以更改设备上的时间或通过代码更改小时。

配置功能值报告

切换到**TapChallengeAnalytics**选项卡。转到**功能报告 -> 功能值**。

默认情况下，基于值的报告不会显示任何统计信息。您必须通过配置间隔来配置它们。

展开**favourite.Hour**报告。点击**配置**。在左侧的文本框中输入3，然后点击**添加**。对6、9、12、15、18和21执行相同的操作。完成后，点击**设置间隔**生成一个全新的报告。

Feature Value Configuration

 

时间跟踪

最后一种技术是基于时间的特征跟踪。它可以用于衡量流程完成所需的时间，或者用户响应或完成任务所需的时间。

时间跟踪由两个函数调用组成：**monitor.trackFeatureStart("featureName");** 和 **monitor.trackFeatureStop("featureName");**

切换到TapChallenge选项卡。

让我们更新**main-view-model.js**中的switch语句，以衡量用户完成挑战所需的时间。

switch (this.counter) {
    case 42:
        monitor.trackFeature("challenge.started");
        monitor.trackFeatureStart("userSpeed.challengeComplete");
        break;
    case 22:
        monitor.trackFeature("challenge.midway");
        break;
    case 1:
        monitor.trackFeature("challenge.completed");
        monitor.trackFeatureStop("userSpeed.challengeComplete");
        break;
}


重新部署应用程序并尝试完成挑战几次。

配置功能计时报告

切换到**TapChallengeAnalytics**选项卡。转到**功能报告 -> 功能计时**。

就像基于值的报告一样，您必须配置间隔才能查看结果。
请注意，默认单位是毫秒，因此要创建5、15和30秒的间隔，我们需要输入5000、15000和30000。

我们还可以更改报告中显示的单位。
点击Menu Button并选择设置。
为了以秒为单位显示我们的报告，我们需要将**比例**更改为**0.001**并将单位名称更改为**sec**。

Feature Timing Configuration

 

点符号

Telerik Analytics使用点符号，它使您可以完全控制Analytics仪表板的类别、组和结构。

您可以将功能组合在多个级别，例如Menu.Save.PDF + Menu.Save.JPG，然后在每个级别查看结果。

为功能跟踪标签想出合适的名称可能很棘手。但是，就像一个好的函数名称一样，想出一些有意义且易于理解的内容非常重要。

异常跟踪

拼图的最后一块是异常跟踪。在我看来，仅此一项功能就值得在您的移动应用程序中设置Analytics。

想象一下，必须从位于不同城市（甚至国家/地区）的某人的智能设备中获取错误报告。您是否会将错误保存到日志文件中，然后向某人解释如何找到该文件并将其通过电子邮件发送给您？虽然这种方法可能适用于一些小型桌面应用程序，但对于移动应用程序来说，这是一个大大的**错误！**

但不要绝望。使用Analytics捕获异常信息非常简单。
只需在可能失败的代码周围添加try和catch子句（老实说，即使您没有使用分析，也应该这样做:P）。当发生异常时，只需调用**monitor.trackException(exceptionObject, "your message");**

切换到TapChallenge选项卡。

为了进行测试，在tapAction函数的底部添加以下代码（仍然位于老式的**main-view-model.js**中）。运行应用程序并疯狂点击，直到点击次数超过42次。

if (this.counter < 0) {
    alert("too many clicks");
    try {
        throw new Error("Too many clicks");
    } catch (ex) {
        monitor.trackException(ex, "Failed while clicking");
    }
}


切换到**TapChallengeAnalytics**选项卡。转到**开发者报告 -> 异常**。

点击**案例**列中的**1**。这将带您到显示异常详细信息的屏幕。在这里，您可以看到堆栈跟踪和其他信息，例如此异常发生的次数、在多少个不同版本中发生以及受影响的用户数量。
这对于确定问题所在非常有用（例如，**异常数量=300**和**受影响用户=200**，这意味着这是一个影响许多人的问题）。

Exception Overview

跟踪未捕获的错误

作为奖励，您可以使用Analytics报告所有未处理的错误。
最好的方法是将异常跟踪添加到应用程序未捕获错误事件。

切换到**TapChallenge**选项卡。打开app.js并在**application.start();**之前粘贴以下代码。

application.on(application.uncaughtErrorEvent, function (args) {
    var exception;
     
    if (args.android)
        exception = args.android;
    else if (args.ios)
        exception = args.ios;
  
    monitor.trackException(exception, "Uncaught exception");
});


现在您的应用程序应该能够报告即使是意外错误。

注意

在{N} 1.2中，**未捕获错误事件**仅适用于iOS。它将在1.3版本中为Android启用。
我们已在master中实现了它。如果您喜欢在早餐前看一些C++，可以去看看。