Анализ записей сессий пользователей для выявления 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) и сделать иконку геолокации
функциональной → снизит abandonment на шаге доставки на 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 session с 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 рабочих дня.