Блог

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

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

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

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

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

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

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

3. Скопируйте разархивированный фреймворк в папку вашего приложения. Затем откройте Xcode drag framework на панели навигации.

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

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

5. В вашем 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
}
  

}

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

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

Мы также искали похожий сервис и в итоге остановились на 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 от 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, будущее.

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

Что касается цены, у них есть бесплатная опция для стартапов.

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

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

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