Session recording for mobile UX analytics on iOS

Question

Trying to find simple way to record screen video of all user sessions and upload them to some server. Can anyone suggest how to implement this feature?

Answer 1

There are lots of solutions, if you need it for analytics:

• UXCam https://www.uxcam.com
• Clicktale https://www.clicktale.com/solutions/clicktale-for-apps/
• Appsee https://www.appsee.com

and many others

Answer 2

I like UXCam https://www.uxcam.com it is easy to implement and free to set up and use. It is free for 10,000 user session. In Swift 3.0:

1. create new uxcam account and save new Application key {abc123}

2. download the UXCam framework and unzip folder.

3. Copy unzip framework to your application folder. Then open Xcode drag framework into your navigation pane.

4. In Xcode go to "Build Settings" go to "Other Linker Flags" and add $(OTHER_LDFLAGS) -ObjC to Debug and Release.

5. In Xcode go to "Build Phases" then in "Link Binary With Libraries" add AVFoundation.framework, CoreGraphics.framework, CoreMedia.framework, CoreVideo.framework, MobileCoreServices.framework, QuartzCore.framework and SystemConfigureation.framework

5. In your AppDelegate add

   import UXCam

then in

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { return true}

add

UXCam.start(withKey: "abc123") //add your key here

AppDelegate.swift all together:

 import UIKit
 import UXCam 

 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?


func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.

    UXCam.start(withKey: "abc123") 

    return true
}

}

6. your finished build and run and the screen will be recorded from the run to until the app goes into the background.

This is what my navigation pane looks like when done:

Answer 3

We were also looking for an alike service and stopped on UXCam in the end. It seemed to be interesting for us in comparison with its main competitor called AppSee in terms of pricing and other features. That is why we decided to use it in our project.

First things first, all we had to do is to sign up for demo period. Then we got access to dashboard with a given API key and documentation. We started with adding a library to our project using Yarn.

yarn add react-native-ux-cam

To make code cleaner, we have created a file in config folder called uxcam.js where we placed the content from the snippet below. Here you can add your API key instead of the placeholder UX_CAM_KEY.

import RNUxcam from 'react-native-ux-cam'
import Config from 'react-native-config'
const initUXCam = () => {
  RNUxcam.startWithKey('UX_CAM_KEY')
  RNUxcam.setAutomaticScreenNameTagging(false)
}
export default {
  initUXCam,
}

There is an initialization method of UXCam. Also, as you can see, we decide to disable automatic screen name tagging. In our project, we use React Native Navigation by Wix which helps to provide a better user experience in terms of navigating between different screens. The problem is that UXCam incorrectly gives a name to a screen and it can’t help us to track how much time users spend in the app overall. Fortunately, there is a trick we use to choose a name precisely for the currently displayed screen.

Now we could import our initUXCam method into our App.js file.

import uxcam from ‘./uxcam’
const init = () => {
  uxcam.initUXCam();
  // Other code regarding initialization of the app
}
export default {
  init,
}

To observe appearing of a new screen and send it to UXCam we use a listener from React Native Navigation. Here is how the usage looks like:

import { Navigation } from 'react-native-navigation'
import RNUxcam from 'react-native-ux-cam'
Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
   RNUxcam.tagScreenName(componentName)  
});

Then you can build the app and try it on a simulator or on a real device. It’s up to you.

Now we can track user sessions in the UXCam dashboard. The videos are uploaded when the sessions are finished. You can watch a video of a session and analyze users’ behavior in certain places of the app.

UXCam dashboard

UXCam seems to be the most affordable solution when we talk about doing precise analytics of users behavior. Setup doesn’t take too much time and after a small input from a developer, the library gives up a huge output with a powerful dashboard. It helps to understand which parts of the app confuse users in terms of navigating and which parts make the users happy about using the app. Simple tracking of events with Firebase Analytics is the apps, tools like UXCam are the future.

Answer 4

Actually jumping on the first comment about Appsee because they focus on mobile, and not spreading themselves between mobile and web, I know they’re top quality in their market. The session recordings have allowed me to catch so many bugs and crashes occurring on specific screens.

Also on the price point, they do have a free option for startups.

Integration is very simple, for example:

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [Appsee start:@"your-key"];
    return YES;
}

Answer 5

Appsee and uxcam are good, but expensive. Try to user userx.pro. They have just user session recordings now, but this tool is free.