NativeScript 与可视化用户洞察 - UXCam 和 Smartlook

如果您想深入了解用户在移动应用程序中的行为，包括可视化会话录制捕获，那么 UXCam 和 Smartlook 是不错的选择。两者都提供充足的免费试用版，您可以评估哪个适合您的应用程序。

UXCam 设置与 StackBlitz 演示

我们可以参考此 StackBlitz 演示：https://stackblitz.com/edit/nativescript-with-uxcam?file=src%2Fmain.ts

注册免费试用版以获取应用程序密钥

在 https://uxcam.com 上注册后，您将收到一个应用程序密钥，我们将使用它来设置 NativeScript 的 UXCam。

在应用程序启动时启动 UXCam

我们希望它记录整个用户会话，因此最好在 app.ts 或 main.ts（即引导文件）中初始化 UXCam。以 NativeScript for Angular 项目为例

import {
  platformNativeScript,
  runNativeScriptAngularApp,
} from '@nativescript/angular';
import { Application } from '@nativescript/core';
import { NSUXCam } from 'nativescript-uxcam';
import { AppModule } from './app/app.module';

// Setup UXCam
NSUXCam.optIntoSchematicRecordings();

Application.on(Application.launchEvent, () => {
  const blur = {
    type: 3,
    hideGestures: true,
    blurRadius: 20,
  };

  const config = {
    userAppKey: '<your-app-key>',
    occlusions: [blur],
  };
  NSUXCam.startWithConfiguration(config);
});

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

这将确保 UXCam 在应用程序启动时启动。

识别您的用户

我们现在可以通过适当的时间使用唯一 ID 来识别我们的用户

import { NSUXCam } from 'nativescript-uxcam';

NSUXCam.setUserIdentity('123456-abcdef');

这通常会在您的应用程序对用户进行身份验证后完成。

从 UXCam 仪表板查看会话

我们现在可以在仪表板上看到我们的用户会话。UXCam 提供了许多很酷的功能，例如模糊不同的视图以保护隐私，以及启用控制台日志，以便从您探索的仪表板中查看。

您可以在此处找到有关 API 的更多信息：https://github.com/uxcam/nativescript-uxcam/blob/main/README.md

---

Smartlook 设置与 StackBlitz 演示

我们可以参考此 StackBlitz 演示，该演示具有简单的设置：https://stackblitz.com/edit/nativescript-with-smartlook?file=src%2Fmain.ts

注册免费试用版以获取项目密钥

在 https://www.smartlook.com 上注册后，您将收到一个项目密钥，我们将使用它来设置 NativeScript 的 Smartlook。

在应用程序启动时启动 Smartlook

我们希望它记录整个用户会话，因此最好在 app.ts 或 main.ts（即引导文件）中初始化 Smartlook。以 NativeScript for Angular 项目为例

import {
  platformNativeScript,
  runNativeScriptAngularApp,
} from '@nativescript/angular';
import { Application } from '@nativescript/core';
import { Smartlook } from '@nstudio/nativescript-smartlook';
import { AppModule } from './app/app.module';

Application.on(Application.launchEvent, () => {
  Smartlook.start('<your-project-key>');
});

runNativeScriptAngularApp({
  appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

这将确保 Smartlook 在应用程序启动时启动。

识别您的用户

我们现在可以通过适当的时间使用唯一 ID 来识别我们的用户

import { Smartlook } from '@nstudio/nativescript-smartlook';

Smartlook.setUser('123456-abcdef', 'NativeScript')

这通常会在您的应用程序对用户进行身份验证后完成。

从 Smartlook 仪表板查看会话

我们现在可以在仪表板上看到我们的用户会话。Smartlook 提供了许多很酷的功能，例如模糊不同的视图以保护隐私，以及启用网络检查器以查看会话中的 http 流量。

您可以在此处找到有关 API 的更多信息：https://npmjs.net.cn/package/@nstudio/nativescript-smartlook