Інтеграція Smartlook для запису сесій мобільного застосунку

Інтеграція Smartlook для запису сесій мобільного додатку

Smartlook відрізняється від UXCam однією ключовою особливістю — автоматичним відстежуванням подій. SDK аналізує жести та взаємодію з елементами UI, автоматично створюючи події без написання коду. Користувач натиснув кнопку «Купити» — подія створена, прив'язана до сесії, доступна у воронці. Для швидкого старту це прискорює роботу: аналітика без розмітки.

Установка

iOS:

// Swift Package Manager
.package(url: "https://github.com/smartlook/smartlook-ios-sdk", from: "2.0.0")

import Smartlook

// AppDelegate або @main App struct
@main
struct MyApp: App {
    init() {
        Smartlook.setup(key: "YOUR_API_KEY")
        Smartlook.start()
    }

    var body: some Scene {
        WindowGroup { ContentView() }
    }
}

Android:

// build.gradle
implementation("com.smartlook.recording:app:2.+")

// Application.onCreate()
Smartlook.setupAndStartRecording("YOUR_API_KEY")

Налаштування рендерингу

Smartlook за замовчуванням використовує запис на основі скріншотів. Для додатків з WebView або кастомною графікою це переважно — wire-frame такі елементи не відтворює.

Можна переключити режим рендерингу:

// iOS — налаштування рендерингу
let setupConfig = Smartlook.SetupConfiguration(key: "YOUR_API_KEY")
setupConfig.renderingMode = .native  // wire-frame: менше трафіку
// або
setupConfig.renderingMode = .noRendering  // тільки події, без відео

Smartlook.setup(configuration: setupConfig)

Автоматичне відстежування подій

Smartlook автоматично створює події для:

• click — натиснення на будь-який інтерактивний елемент
• input — взаємодія з текстовим полем (без вмісту)
• focus — фокус на полі
• scroll — скролінг списків

// Перевірити автотрекінг у логах (debug)
Smartlook.setEventTrackingMode(.fullTracking) // все
// або
Smartlook.setEventTrackingMode(.ignoreUserInteractionEvents) // тільки кастомні

Для конкретних елементів можна присвоїти читаємі імена — інакше на дашборді буде UIButton@(123,456):

// iOS — ім'я елемента для автотрекінгу
let purchaseButton = UIButton()
purchaseButton.slTrackId = "purchase_button_pdp" // Smartlook track ID

// Android — через View tag
binding.purchaseButton.tag = Smartlook.registerBlacklisted(binding.purchaseButton) // виключити
// або ім'я:
SmartlookHint.setViewId(binding.purchaseButton, "purchase_button_pdp")

Маскування даних

// iOS — маскувати конкретний View
view.slSensitive = true // сховати з запису

// Маскувати весь UIViewController
class PaymentViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        Smartlook.setViewIsSensitive(view, isSensitive: true)
    }
}

// Android — маскувати через атрибут у XML
<EditText
    android:id="@+id/cvvField"
    app:smartlook_sensitive="true" />

// Або програмно
Smartlook.registerSensitiveView(binding.cvvField)

Кастомні події та воронки

// Кастомна подія
Smartlook.trackCustomEvent(name: "checkout_step_completed", props: [
    "step": "payment_method",
    "method": "card"
])

// Властивості користувача
Smartlook.setUserIdentifier("user_123", sessionProperties: [
    "plan": "premium",
    "country": "UA"
])

На дашборді Smartlook можна побудувати воронку з будь-якої комбінації автоматичних + кастомних подій. Не потрібно заздалегідь визначати воронку в коді — її можна зібрати ретроспективно з уже записаних подій.

Семплінг

// Записувати 25% сесій
let config = Smartlook.SetupConfiguration(key: "YOUR_API_KEY")
config.framerate = 2 // fps для режиму скріншотів (1-10)

// Старт запису за умовою (наприклад, тільки для конкретного сегмента)
if user.isPremium || user.isInBetaGroup {
    Smartlook.start()
} else {
    // 20% випадкових
    if Int.random(in: 0..<5) == 0 {
        Smartlook.start()
    }
}

Що ми робимо

• Підключаємо SDK та вибираємо режим рендерингу (скріншот vs wire-frame)
• Налаштовуємо маскування чутливих View та екранів
• Присвоюємо slTrackId / SmartlookHint ключовим UI-елементам
• Додаємо кастомні події під бізнес-воронку
• Конфігуруємо семплінг під обсяг трафіку

Терміни

Базове підключення: 4–8 годин. З розміткою елементів та кастомними подіями: 1–2 дні. Вартість розраховується індивідуально.