Запись сессий для мобильного UX-аналитики на iOS

Попытка найти простой способ записать на экран видео всех пользовательских сессий и загрузить их на какой-нибудь сервер. Кто-нибудь может подсказать, как реализовать эту функцию?

3 ответа

Есть много решений, если вам это нужно для аналитики:

и много других

Мы также искали похожий сервис и остановились на UXCam. Нам это показалось интересным по сравнению с его основным конкурентом AppSee с точки зрения ценообразования и других функций. Именно поэтому мы решили использовать его в нашем проекте.

Перво-наперво, все, что нам нужно было сделать, это зарегистрироваться на демо-период. Затем мы получили доступ к панели инструментов с заданным ключом API и документацией. Мы начали с добавления библиотеки в наш проект с использованием Yarn.

yarn add react-native-ux-cam

Чтобы сделать код чище, мы создали файл в папке конфигурации с именем uxcam.js, куда мы поместили содержимое из фрагмента ниже. Здесь вы можете добавить свой ключ API вместо заполнителя 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,
}

Существует метод инициализации UXCam. Также, как вы можете видеть, мы решили отключить автоматическую пометку имени экрана. В нашем проекте мы используем React Native Navigation от Wix, который помогает обеспечить лучший пользовательский опыт с точки зрения навигации между различными экранами. Проблема в том, что UXCam неправильно дает имя экрану, и это не может помочь нам отследить, сколько времени пользователи проводят в приложении в целом. К счастью, есть хитрость, которую мы используем, чтобы точно выбрать имя для отображаемого в данный момент экрана.

Теперь мы можем импортировать наш метод initUXCam в наш файл App.js.

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

Для наблюдения за появлением нового экрана и отправки его в UXCam мы используем прослушиватель из React Native Navigation. Вот как выглядит использование:

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

Затем вы можете создать приложение и попробовать его на симуляторе или на реальном устройстве. Тебе решать.

Теперь мы можем отслеживать пользовательские сессии на панели инструментов UXCam. Видео загружаются после завершения сеансов. Вы можете посмотреть видео сеанса и проанализировать поведение пользователей в определенных местах приложения.

UXCam приборная панель

UXCam представляется наиболее доступным решением, когда мы говорим о точной аналитике поведения пользователей. Установка не занимает много времени, и после небольшого вклада разработчика библиотека выдает огромный вывод с мощной панелью мониторинга. Это помогает понять, какие части приложения вводят пользователей в заблуждение с точки зрения навигации, а какие части делают пользователей довольными использованием приложения. Простое отслеживание событий с помощью Firebase Analytics - это приложения, а в будущем - такие инструменты, как UXCam.

Мне нравится UXCam https://www.uxcam.com/ его легко внедрить и бесплатно настроить и использовать. Это бесплатно для 10000 пользовательских сессий. В Swift 3.0:

  1. создать новую учетную запись uxcam и сохранить новый ключ приложения {abc123}

  2. скачайте фреймворк UXCam и разархивируйте папку.

  3. Скопируйте unzip framework в вашу папку приложения. Затем откройте каркас перетаскивания Xcode в панель навигации.

  4. В Xcode перейдите в "Настройки сборки", перейдите в "Другие флаги компоновщика" и добавьте $(OTHER_LDFLAGS) -ObjC в Debug and Release.

  1. В Xcode перейдите к "Фазам сборки", затем в "Связать двоичные файлы с библиотеками" добавьте AVFoundation.framework, CoreGraphics.framework, CoreMedia.framework, CoreVideo.framework, MobileCoreServices.framework, QuartzCore.framework и SystemConfigureation.framework

  1. В вашем AppDelegate добавить

    импорт UXCam

затем в

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

добавлять

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

AppDelegate.swift все вместе:

 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
}

}

  1. Ваша законченная сборка и запуск, и экран будет записываться от запуска до, пока приложение не перейдет в фоновый режим.

Вот как выглядит моя панель навигации, когда закончите:

На самом деле, послушав первый комментарий об Appsee, потому что они сосредоточены на мобильном телефоне, и не распространяются между мобильным и веб-интерфейсом, я знаю, что они на высшем уровне на своем рынке. Записи сессий позволили мне поймать так много ошибок и сбоев, происходящих на определенных экранах.

Кроме того, что касается цены, у них есть бесплатный вариант для стартапов.

Интеграция очень проста, например:

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

Appsee и uxcam - это хорошо, но дорого. Попробуйте использовать userx.pro. Сейчас у них есть только записи сессий пользователей, но этот инструмент бесплатный.

Другие вопросы по тегам