Огляд Microsoft Clarity: інструмент вебаналітики для аналізу UX і поведінки користувачів

Для більшості інтернет-маркетологів Google Analytics (GA) — основний інструмент для аналізу трафіку та ефективності оптимізації сайту. Але важливо мати під рукою й інші сервіси для збору та аналізу даних, які здатні доповнити інформацію GA.

Про один із таких сервісів — Clarity від Microsoft — читайте в цій публікації.

1. Що таке Microsoft Clarity і чим він відрізняється від інших аналітичних інструментів
2. Дашборд Microsoft Clarity
3. Записи сесій користувачів (Session Recordings)
4. Карти кліків (Heatmaps)
5. Фільтри та сегментація в Clarity
6. Розділ Сегменти (Segments)
7. Як покращити UX за допомогою Clarity
8. Як підключити Microsoft Clarity на сайт

Що таке Microsoft Clarity і чим він відрізняється від інших аналітичних інструментів

Microsoft Clarity — це сервіс для аналізу користувацького досвіду (UX) та поведінки, який допомагає зрозуміти, як саме відвідувачі взаємодіють із вашим сайтом.

На відміну від класичних рішень для вебаналітики, Clarity зосереджується не лише на числових метриках, а й на візуальному розумінні користувацької поведінки: рухи миші, прокрутка сторінок, натискання та взаємодії з елементами.

Сервіс повністю безплатний і не має обмежень на кількість користувачів або записів сесій. Він пропонує функціонал, який у багатьох аналогічних платформах (Hotjar, Smartlook) потребує оплати: карти кліків (heatmaps), записи сесій користувачів та автоматичне виявлення поведінкових аномалій.

Як працює Microsoft Clarity

Розгляну основні можливості інструменту, які допомагають отримати глибше уявлення про дії користувачів на сайті.

Дашборд Microsoft Clarity

Дашборд (Dashboard) — це головна аналітична панель, де зібрані ключові показники UX та поведінки користувачів. Вона дає можливість швидко оцінити, як відвідувачі взаємодіють із сайтом, без складних налаштувань чи додаткових інтеграцій.

Загальні показники

У верхній частині дашборду відображаються базові метрики сайту для оцінки залученості та якості UX:

• Sessions — кількість сесій за обраний період (боти автоматично відфільтровуються);

• Pages per session — середня кількість сторінок, переглянутих за одну сесію;

• Scroll depth — середня глибина прокрутки, що показує, наскільки користувачі зацікавлені контентом;

• Active time spent — середній час активної взаємодії.

Інсайти (Insights)

Clarity автоматично виявляє поведінкові аномалії, які сигналізують про проблеми з користувацьким досвідом.

Серед основних аномалій:

• Rage clicks — серія кліків по одному елементу, що свідчить про роздратування користувача або непрацюючий сценарій;

• Dead clicks — кліки по неактивних або нефункціональних елементах;

• Excessive scrolling — надмірна прокрутка сторінки, коли користувач не знаходить потрібне;

• Quick backs — швидке повернення на попередню сторінку.

Розумні події (Smart events)

Microsoft Clarity автоматично відстежує основні дії користувачів: вхід в акаунт, реєстрація, завантаження файла, зовнішній перехід тощо. Це дозволяє бачити, скільки відвідувачів виконують цільові дії без додаткового налаштування подій, як у Google Analytics.

Воронки (Funnels)

Розділ показує, як користувачі проходять шлях від першого кроку до конверсії.

Clarity автоматично обчислює:

• Conversion rate — відсоток користувачів, які виконали дію;

• Sessions converted — кількість завершених сесій;

• Median time to convert — середній час до конверсії.

Джерела трафіку (Traffic sources)

Блок надає дані, звідки приходять користувачі:

• Referrer — сайт, із якого здійснено перехід;

• Channel / Campaign / Source — тип каналу або рекламної кампанії.

Це допомагає зрозуміти, які джерела приносять найбільш зацікавлену аудиторію.

Браузери, девайси, країни (Browsers, devices, region)

В розділі відображаються:

• браузери та операційні системи, з яких заходять на сайт;

• тип пристрою — десктоп, мобільний чи планшет;

• регіон або країна користувача.

Огляд продуктивності (Performance overview)

Блок дає змогу швидко оцінити швидкість та стабільність сайту:

• LCP (Largest Contentful Paint) — швидкість завантаження основного контенту;

• INP (Interaction to Next Paint) — швидкість реакції інтерфейсу;

• CLS (Cumulative Layout Shift) — стабільність візуального макета.

Ці показники допомагають знайти сторінки, які погіршують користувацький досвід.

Помилки JavaScript та трафік з ботів (JavaScript errors, Bot traffic)

JavaScript errors показує кількість та типи помилок на сайті, які можуть впливати на UX.

Опція Bot traffic виявляє підозрілий або автоматизований трафік, щоб аналітика відображала тільки реальні дії користувачів.

Найпопулярніші сторінки (Top pages)

Блок показує найпопулярніші сторінки сайту — за переглядами, активністю чи взаємодіями. Допомагає швидко зрозуміти, який контент викликає найбільший інтерес у користувачів.

Записи сесій користувачів (Session Recordings)

Функція записів сесій дає змогу в режимі відтворення побачити, як користувач рухається по сторінці, що його зупиняє, і де виникають помилки.

Для перегляду записів сесій у Microsoft Clarity оберіть сесію в лівій панелі та натисніть Play. Запис можна пришвидшувати, перемотувати чи ставити на паузу.

Є можливість об’єднати сесії у сегменти, щоб швидко аналізувати певні групи користувачів.

Ще одна корисна опція — Copilot, який використовує штучний інтелект, щоб автоматично створювати зведення сесій із ключовими висновками. Допомагає отримати короткий аналіз тенденцій, рекомендації з покращення UX та об’єднувати до десяти сесій одночасно.

Функція Watch Live дає змогу спостерігати за діями користувачів в реальному часі та оперативно виявляти UX-проблеми ще до того, як вони вплинуть на конверсію.

Під час перегляду запису можна зупинити сесію та перейти до теплової карти, карти скролу чи карти уваги, , щоб побачити агреговану аналітику саме для цього стану сторінки.

Записи можна завантажувати і ділитися ними з командою чи замовниками.

Для позначення проблемних місць або важливих інсайтів задля спрощення пошуку та аналізу додавайте мітки (labels).

Карти кліків (Heatmaps)

У розділі Heatmaps відображається детальна поведінкова аналітика за обраний період. За замовчуванням система показує всі кліки користувачів із десктопів за останні три дні.

Теплова карта кліків показує, де саме користувачі клікають на сторінці, і допомагає оцінити, які елементи привертають найбільше уваги. Завдяки їй можна легко визначити, чи бачать користувачі кнопки заклику до дії (CTA), а також чи взаємодіють із меню та посиланнями.

Для перегляду теплових карт перейдіть в розділ Heatmaps та оберіть сторінку, теплову карту якої треба переглянути.

Microsoft Clarity пропонує два типи карт кліків — Click heatmap та Area heatmap, які допомагають глибше зрозуміти, як користувачі взаємодіють із вашим сайтом.

Click heatmap відображає конкретні точки на сторінці, на які клікають користувачі. Вона дає змогу оцінити помітність кнопок CTA, елементи меню чи посилання. Така карта підходить для аналізу ефективності елементів, які мають чіткі клікабельні зони, наприклад, кнопки.

Area heatmap демонструє щільність кліків у межах певних зон сторінки, навіть якщо це не окремі кнопки, а більші візуальні блоки. Вона допомагає зрозуміти, які ділянки екрана привертають увагу, навіть без активної взаємодії. Це особливо корисно для оцінки банерів, зображень або текстових блоків.

Як використовувати:

• для UX-аналітики кнопок, меню, форм — застосовуйте Click heatmap;

• для аналізу візуальної уваги (наприклад, перший екран або секції «Переваги») — використовуйте Area heatmap.

У боковому меню в розділі Heatmaps в обох типах карт наведено всі елементи сторінки, відсортовані за кількістю кліків — від найпопулярніших до менш активних. Щоб проаналізувати конкретний елемент:

• оберіть його код у списку елементів;

• або натисніть на нього безпосередньо на карті — тоді система автоматично виділить потрібний елемент в меню та відобразить усю доступну статистику:

Карти скролу (Scrollmaps)

Показують, як глибоко користувачі прокручують сторінку. Це ключовий інструмент для оптимізації сайту, адже допомагає визначити, де відвідувачі втрачають інтерес і перестають скролити.

Карти уваги (Attention Maps)

Демонструють, де юзери проводять найбільше часу на сторінці, використовуючи теплову візуалізацію.

Карти уваги показують:

• середній час перегляду (Avg Time Spent) — скільки часу користувачі проводять у кожній частині сторінки;

• відсоток тривалості сесії (Session Duration %) — дозволяє зрозуміти, яку частину загального часу юзер приділяє конкретному блоку;

• теплову візуалізацію (Heat Visualization) — теплі зони вказують на розділи, де користувачі зосереджують найбільше уваги, а холодні — на ті, які залишаються поза фокусом.

Завдяки цим даним можна визначити, які частини сторінки варто підсилити або оптимізувати для кращої взаємодії.

Поєднання карт уваги, кліків і прокручування дає повну поведінкову картину та допомагає прицільніше поліпшувати UX і конверсію.

Також у Microsoft Clarity є фільтри, які дозволяють звузити аналіз.

Фільтри та сегментація в Clarity

Усі фільтри згруповані за категоріями, що спрощує пошук потрібних даних для UX-аналітики або аналізу поведінки користувачів. Нижче — пояснення кожного розділу фільтрів.

Інформація про користувача (User info)

Сегментують відвідувачів за основними характеристиками, що дає змогу точніше аналізувати поведінкову аналітику та покращувати UX під конкретні групи користувачів.

Серед основних параметрів фільтрації:

• Timeframe (період аналізу — дні, тижні, місяці) — дозволяє відстежити зміни у поведінці з часом;

• Day of the week (день тижня, коли користувач відвідав сайт) — зручно для виявлення пікових днів активності;

• Device (тип пристрою — desktop, mobile, tablet) — допомагає зрозуміти, як користувачі взаємодіють із сайтом на різних екранах;

• Browser — браузер, через який користувач переглядає сайт (Chrome, Safari, Firefox тощо);

• Operating system — операційна система пристрою (Windows, macOS, Android, iOS).

• Location (країна або регіон користувача) — дає змогу виявити географічні відмінності у поведінці;

• Clarity user ID — унікальний ідентифікатор користувача для відстеження повторних сесій;

• User type — тип користувача: новий або той, хто повернувся на сайт.

Дії користувача (User actions)

Розділ User actions призначений для глибокого дослідження взаємодії користувачів із сайтом. Завдяки цим фільтрам можна відстежувати поведінку користувачів і цілеспрямовано оптимізувати конверсію за допомогою інструментів Clarity.

Ключові параметри:

• Insights — автоматичні підказки про проблеми на сторінці (наприклад, Rage clicks, Dead clicks);

• Action — тип взаємодії, як от кліки, скрол, форма, навігація;

• Intention — показує намір користувача, наприклад, коли він натискає неактивну кнопку;

• Click text — текст елемента, по якому відбувся клік;

• Page scroll depth — глибина прокручування сторінки;.

• Smart events — автоматично відстежувані події (клік на кнопку, заповнення форми тощо);

• Funnel — створення воронки дій, щоб побачити, на якому етапі користувач залишає процес.

Шлях користувача (Path)

Фільтр для відстеження сторінок, які користувач переглядав, і створення точних умов для аналізу сесій.

Для фільтрації групи сторінок в полі Visited URL задайте конкретну сторінку або регулярний вираз (regex).

Наприклад можна аналізувати лише сторінки типу /pricing або всі сторінки блогу через шаблон /blog/*.

Трафік (Traffic)

Ці фільтри показують, звідки приходять користувачі та які канали приносять найбільше взаємодії. Вони є ключовим інструментом для поведінкової аналітики та оптимізації сайту:

• Referring site — показує, з якого зовнішнього ресурсу користувач потрапив на сторінку (наприклад, Google, Facebook чи партнерський сайт);

• Source — вказує конкретне джерело трафіку, як от Google, Direct, Bing тощо;

• Medium — тип каналу — organic, paid, referral, social або email;

• Campaign — дає змогу аналізувати ефективність рекламних кампаній із UTM-мітками;

• Channel — групує джерела за типами: пошук, соціальні мережі, реклама, прямий трафік;

• Bot traffic — виключає візити ботів, щоб результати UX-аналітики відображали лише дії реальних користувачів.

Продуктивність сторінки (Performance)

Фільтри розділу Performance дозволяють аналізувати швидкість завантаження сторінок, стабільність елементів і реакцію сайту на дії користувачів. Вони потрібні для розуміння, як технічна продуктивність впливає на користувацький досвід і поведінку відвідувачів.

Основні показники, доступні для фільтрації:

• Performance Score — загальний індекс швидкодії сторінки;

• LCP (Largest Contentful Paint) — час відображення головного елемента сторінки;

• INP (Interaction to Next Paint) — швидкість реакції інтерфейсу на дії користувача;

• CLS (Cumulative Layout Shift) — стабільність візуального контенту при завантаженні.

Сесія користувача (Session)

Розділ для аналізу часу перебування на сайті, кількості кліків і переглянутих сторінок за один сеанс. Це допомагає краще розуміти рівень залученості та виявляти, коли відвідувачі втрачають інтерес.

Основні фільтри:

• Session duration (тривалість сеансу) — дає змогу відстежити, як довго користувач взаємодіяв із сайтом;

• Session click count (кількість кліків під час одного сеансу) — показує, наскільки активно відвідувач взаємодіяв із контентом;

• Session page count — кількість сторінок, відвіданих за один сеанс.

Сторінка (Page)

Розділ призначений для аналізу поведінки користувачів на конкретних сторінках сайту, щоб зрозуміти: 

• як довго вони залишаються на сторінці; 

• наскільки активно взаємодіють із контентом; 

• чи виникають технічні проблеми.

Основні параметри фільтрів:

1. Page duration — задає мінімальний і максимальний час, який користувач проводить на сторінці, щоб визначити рівень залученості.

2. Page click count — встановлює діапазон кількості кліків на сторінці для аналізу активності.

3. JavaScript errors — фільтрує сторінки з технічними помилками, що можуть впливати на UX-аналітику.

4. Page size — задає ширину й висоту для порівняння продуктивності різних макетів або версій сторінки.

5. Screen resolution — фільтр за роздільною здатністю екрана користувача, корисний для аналізу поведінкової аналітики між мобільними, планшетними й десктопними юзерами.

6. Visible page — визначає час, протягом якого сторінка залишалася видимою у вікні браузера.

7. Hidden page — показує, коли користувач перемикав вкладку або залишав сторінку відкритою, не взаємодіючи з нею.

Користувацькі фільтри (Customised filters)

Розділ для точнішого аналізу користувацьких дій і сесій, коли потрібно працювати з власними ідентифікаторами чи тегами. Це корисно для великих проєктів або eCommerce-платформ, де необхідно відстежувати поведінку конкретних груп користувачів або сторінок.

Основні параметри:

• Customised tags — власні теги для фільтрації, наприклад, тип користувача, категорія сторінки, джерело трафіку;

• Customised user ID — фільтр за унікальним ідентифікатором користувача, щоб аналізувати його взаємодію на сайті;

• Customised session ID — використовується для пошуку або аналізу окремих сесій;
  Customised page ID — відстежує конкретну сторінку або шаблон в межах сайту;

• Customised labels — позначає і групує сесії або сторінки за власними мітками, наприклад, checkout, form submit, CTA click.

Розділ Сегменти (Segments)

Сегменти — один із найзручніших інструментів для поведінкової аналітики користувачів. Це збережені набори фільтрів для швидкого аналізу конкретних груп користувачів або сценаріїв взаємодії.

Приклади сегментів:

• користувачі з мобільних пристроїв;

• відвідувачі із конкретної країни;

• сесії із масовими кліками;

• користувачі, які прийшли з конкретного джерела трафіку.

Що можна робити з сегментами:

• створити новий сегмент вручну з потрібних фільтрів;

• зберегти його для повторного використання;

• швидко перемикатись між сегментами, щоб порівнювати різні групи користувачів.

Основні параметри для створення сегментів:

• Device: PC or Tablet — показує всі сесії з десктопів і планшетів за останні три дні;

• Mobile rage click 30 days — відображає користувачів мобільних пристроїв, які виконували серію кліків по одному місцю;

• mobile UK — сесії з мобільних пристроїв із Великої Британії;

• Rage Clicks on PC — користувачі з ПК, які часто клікали по одному місцю;

• Sample — довільний сегмент з умовою для певної сторінки.

Як покращити UX за допомогою Clarity

Microsoft Clarity допомагає бачити поведінку користувача очима дизайнера та продакт-аналітика. Нижче наведу чотири приклади, як команда Netpeak використовувала Clarity для виявлення UX-проблем і покращення сайтів.

1. Виявлення неефективних CTA-кнопок

На одній із промосторінок помітили низький CTR на кнопку Book a Demo.

Дії в Clarity:

1. Зайшли в розділ Recordings.

2. Застосували фільтри Rage Clicks і Dead Clicks, щоб знайти випадки, коли користувачі натискали на кнопку Book a Demo, але нічого не відбувалося.

3. Переглянули записи, де по кнопці клікали декілька разів підряд без реакції.

Результат: з’ясували, що на мобільних пристроях кнопка перекривалася елементом pop-up блоку.
Після виправлення верстки CTR виріс на +17% протягом тижня.

2. Аналіз «мертвих зон» та невидимого контенту

На головній сторінці помітили, що користувачі майже не натискали на відгуки, хоча вони мали допомагати в прийнятті рішення про заповнення форми.

Дії в Clarity:

1. У Heatmaps перемкнули режим з Click на Scroll.

2. Виявили, що більшість користувачів зупинялися на середині сторінки — до відгуків доходило лише 7%.

3. Використали Scroll Depth Map, щоб визначити точну глибину, де користувачі залишали сторінку.

Результат: підняли блок відгуків і розмістили його в зоні доскролу 57,52%.
Після цього перегляди відгуків зросли на +42%, середній час на сторінці — на +18 секунд; це підвищило довіру й кількість відправлених форм.

3. Проблеми з середнім часом на сторінці оформлення замовлення

Помітили, що користувачі часто залишають checkout-сторінку, не завершивши покупку.

Дії в Clarity:

1. Проаналізували кількість кліків на сторінці оформлення замовлення та середній час на блоках. 

2. Зафіксували, що середній час взаємодії з полем «Промокод» — 8 хв 20 с.

3. Переглянули записи, де користувачі залишали сторінку під час взаємодії з полем «Промокод».

4. Зафіксували CTR цього поля — 1,68%.

3. Зробили висновок: користувачі без промокоду, ймовірно, залишають сторінку й ідуть шукати його в інтернеті.

Результат: згорнули поле «Промокод», зменшивши час взаємодії з ним до 3 хв 41 с і підвищивши якість введених промокодів.

Після змін частка кліків по полю знизилася до 1,37% проти 1,68% раніше. Це свідчить про менше «порожніх» взаємодій і коротші затримки: користувачі без коду менше відволікаються на це поле й продовжують оформлення.

4. Неправильне сприйняття елементів фільтрації

Під час перегляду записів сесій виявили, що користувачі неодноразово намагалися вибрати кілька фільтрів одночасно, але система не зберігала попередній вибір.

Дії в Clarity:

1. Переглянули відео сесій з кліками, де користувачі по кілька разів натискали на фільтри.

2. Виявили невідповідність очікувань: елементи фільтра мали квадратну форму (візуально — як чекбокси, що передбачають мультивибір), тоді як логіка працювала як radio buttons і дозволяла лише один варіант.

Результат: через невідповідність між візуальним оформленням і реальною логікою елементів користувачі плуталися й повторювали дії, вважаючи, що система не реагує.
Ми оновили компоненти фільтрів — узгодили дизайн і поведінку, додали мультивибір. У підсумку кількість повторних кліків зменшилася, а середня тривалість взаємодії з фільтрами скоротилася майже вдвічі.

Як підключити Microsoft Clarity на сайт

1. Перейдіть на сайт Clarity і створіть безплатний акаунт.

2. Додайте назву компанії, адресу сайту та індустрію.

3. Встановіть трекінговий код на сайт одним із способів:

• вручну — вставте скрипт перед закриваючим </head> або одразу після відкриття тега <body> на всіх сторінках;

• через CMS/плагін — якщо використовуєте WordPress, встановіть плагін Microsoft Clarity, вставте ID, код буде додано автоматично;

• через Google Tag Manager (GTM) — створіть новий тег Custom HTML, вставте Clarity-код, встановіть тригер All Pages, опублікуйте контейнер. 

Далі розглянути детально спосіб встановлення за допомогою Google Tag Manager.

Встановлення Clarity за допомогою GTM

Скопіюйте трекінговий код.

Перейдіть в Google Tag Manager на вкладку Tags, та натисніть New.

Вставте скопійований код, обравши Tag Type — Custom HTML.

Додайте Triggering — Page View — All Pages.

Опублікуйте зміни, натиснувши Submit.

За кілька годин зайдіть у дашборд Clarity: там має з’явитися активна сесія (Live Users). Якщо дані не з’являються — перевірте, чи код встановлено коректно.

Після встановлення Clarity починається збір даних. Обсяг і швидкість накопичення залежать від трафіку: що більше відвідувачів, то швидше отримаєте достатню кількість даних для аналізу.

Висновок

Microsoft Clarity — це безплатний, зручний і потужний інструмент UX-аналітики, який дозволяє бачити не лише, що користувач робить, а й чому він це робить.

Ключові функції, які роблять Clarity незамінним для аналізу поведінки:

1. Поведінкові інсайти. Система виявляє проблемні сценарії, такі як Rage Clicks (серійні кліки без відповіді), Dead Clicks (кліки по неактивних елементах) та Excessive Scrolling. Це прямі сигнали про помилки дизайну чи непрацюючі елементи.

2. Записи сесій. Дає можливість «побачити» шлях відвідувача сайтом, ідентифікуючи моменти затримок, плутанини або помилок.

3. Карти взаємодії. Надають візуалізовану інформацію про те, куди користувачі клікають, як глибоко скролять та на яких блоках контенту зосереджують найбільше уваги. Це дозволяє оптимізувати розташування ключових CTA та контенту.

4. Всі ці інструменти у поєднанні з фільтрами та можливістю сегметації дають змогу виділяти конкретні групи користувачів для прицільного покращення користувацького досвіду.

5. Встановити Clarity можна трьома способами: вручну, через CMS/плагін або створити користувацький HTML-тег у Google Tag Manager.

6. Перші дані починають надходити через декілька годин після встановлення. А вже за кілька днів на дашборді формується масив корисної інформації. Частина даних збігається з тими, що збирає Google Analytics, але є й унікальні — вони подані у вигляді теплових карт і записів сеансів.