Аналіз записів сесій користувачів для виявлення проблем UX
Записи сесій — це відеозаписи рухів миші, кліків та прокрутки реальних користувачів. Вони показують, що відбувається на вашому сайті з точки зору відвідувача, розкриваючи причини, коли кількісна аналітика показує лише симптоми.
Інструменти
Microsoft Clarity — безплатна, без обмежень, зберігає 30 днів. Hotjar — платна, хороші фільтри та інструменти аналізу. FullStory — корпоративна, DX Data API для програмного аналізу. LogRocket — спеціалізація на технічних помилках.
Встановлення Microsoft Clarity
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "PROJECT_ID");
</script>
Користувацькі теги для фільтрування:
clarity("set", "user_plan", user.plan)
clarity("set", "page_type", "product_page")
clarity("set", "ab_variant", experimentVariant)
Налаштування фільтрів для аналізу
Замість послідовного перегляду записів — фільтруйте за сигналами проблем:
Фільтри Microsoft Clarity:
- Dead clicks: клікі по некликабельним елементам
- Rage clicks: 3+ клікі за 1 секунду в одному місці
- Excessive scrolling: користувач прокрутив >90% сторінки
- Quick back: повернувся на попередню сторінку < 8 секунд
- JavaScript errors: сесії з помилками в консолі
# Clarity API для програмного аналізу
import requests
def get_problem_sessions(project_id, token):
response = requests.post(
'https://api.clarity.ms/v0/reporting/sessions',
headers={'Authorization': f'Bearer {token}'},
json={
'projectId': project_id,
'startDate': '2024-03-01',
'endDate': '2024-03-31',
'filters': [
{'dimension': 'RageClicks', 'operator': 'gt', 'value': 0},
],
'sortBy': 'RageClicks',
'sortOrder': 'desc',
'limit': 50
}
)
return response.json()
Методологія аналізу записів
Крок 1: Визначте проблемну сторінку Витягніть сторінки з високим exit rate або низькою конверсією з GA4.
Крок 2: Відфільтруйте записи за цією сторінкою + сигнал проблеми
Приклад: /checkout/step-2 + rage clicks.
Крок 3: Переглядайте 20–30 записів (не 5 і не 200) Шукайте паттерни — повторюване поведінку різних користувачів.
Крок 4: Документуйте спостереження
## Проблема: Крок "Адреса доставки" в оформленні замовлення
### Спостереження:
- 12 з 23 переглянутих сесій: користувачі намагаються клікнути на значок геолокації
в полі адреси (значок декоративний, не кликабельний)
- 7 сесій: після введення адреси чекають автозаповнення (якого немає)
- 5 сесій: плутаються між "Вулиця" та "Адреса" (два подібні поля)
### Гіпотеза:
Додайте автодополнення адреси (DaData API) та зробіть значок геолокації функціональним
→ зменшення відмови на кроці доставки на 15%+
### Пріоритет: HIGH
### Зусилля: MEDIUM (1–2 дні розробки)
Інтеграція з аналітикою продукту
// Пов'яжіть запис сесії з подією GA4
// На критичну подію — додайте тег для пошуку в Clarity
document.getElementById('checkout-form').addEventListener('submit', function() {
clarity("event", "checkout_submitted")
})
// На помилку — позначте сесію
window.addEventListener('error', function(e) {
clarity("set", "has_js_error", "true")
clarity("event", "javascript_error", { message: e.message })
})
// Пов'яжіть сесію Clarity з GA4 client_id
clarity.identify(userId, sessionId, undefined, {
ga_client_id: gaClientId
})
GDPR та конфіденційність
// Маскуйте особисті дані в записах
// Clarity автоматично маскує поля type="password"
// Ручна маскування:
// В Clarity: Dashboard → Settings → Masking → Add selector
// .credit-card-number { display: none } у CSS → не буде записано
// Програмно
clarity("consent", false) // вимкніть запис для хто не дав згоду
clarity("consent", true) // включіть після отримання згоди
Час виконання
Встановлення інструменту запису, налаштування користувацьких тегів, аналіз 100 сесій з звітом — 2–3 робочих дні.