NativeScript with visual user insights - UXCam and Smartlook

When looking for insights into user behavior with your mobile apps including visual session recording capture, UXCam and Smartlook are great options. Both provide adequate free trials to evaluate which will work well for your app.

UXCam Setup with StackBlitz Demo

We can refer to this StackBlitz demo: https://stackblitz.com/edit/nativescript-with-uxcam?file=src%2Fmain.ts

Register Free Trial for App Key

Upon registering at https://uxcam.com, you will receive an App Key which we'll use to setup UXCam with NativeScript.

Start UXCam when Application boots

We want it to record entire user sessions so it's best to initialize UXCam in app.ts or main.ts (aka, the bootstrap file). Using a NativeScript for Angular project as an example:

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),
});

This will ensure UXCam is started when the app boots.

Identify your user

We can now identify our user by a unique id at an appropriate time:

import { NSUXCam } from 'nativescript-uxcam';

NSUXCam.setUserIdentity('123456-abcdef');

This would ordinarily be done after your app authenticates a user.

Viewing sessions from the UXCam Dashboard

We can now see our user sessions on the dashboard. There are a lot of neat options UXCam provides like blurring different views for privacy and enabling console logs to be viewable from the dashboard you can explore.

You can find more information on the API here: https://github.com/uxcam/nativescript-uxcam/blob/main/README.md

---

Smartlook Setup with StackBlitz Demo

We can refer to this StackBlitz demo with the simple setup: https://stackblitz.com/edit/nativescript-with-smartlook?file=src%2Fmain.ts

Register Free Trial for Project Key

Upon registering at https://www.smartlook.com, you will receive a Project Key which we'll use to setup Smartlook with NativeScript.

Start Smartlook when Application boots

We want it to record entire user sessions so it's best to initialize Smartlook in app.ts or main.ts (aka, the bootstrap file). Using a NativeScript for Angular project as an example:

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),
});

This will ensure Smartlook is started when the app boots.

Identify your user

We can now identify our user by a unique id at an appropriate time:

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

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

This would ordinarily be done after your app authenticates a user.

Viewing sessions from the Smartlook Dashboard

We can now see our user sessions on the dashboard. There are a lot of neat options Smartlook provides like blurring different views for privacy and enabling Network inspector to view http traffic from the session.

You can find more information on the API here: https://www.npmjs.com/package/@nstudio/nativescript-smartlook