Пълно ръководство: GA4, Heatmaps и Microsoft Clarity за анализ на уеб сайт
Въведение: Защо ви трябват и двете?
Ако имате уеб сайт, вероятно вече използвате Google Analytics 4 (GA4). Той ви казва какво се случва - колко души са посетили страницата, колко са останали, колко са купили. Това са количествени данни.
Но GA4 не може да ви отговори на въпроса "защо". Защо хората напускат точно на тази страница? Защо не кликват на червения бутон, който според вас е толкова очевиден?
Тук идват ролята на heatmaps (топлинни карти) и session recordings (записи на сесии). Те ви дават качествени данни - виждате точно какво прави потребителят, къде гледа, къде кликва, къде спира.
Microsoft Clarity е безплатен инструмент, който прави точно това. А комбинацията му с GA4 ви дава суперсила за оптимизация.
Част 1: Как работят заедно GA4 и Clarity
| Инструмент |
Какво ви казва |
Пример |
| GA4 |
"Колко души напуснаха страницата?" |
65% bounce rate на продуктовата страница |
| Clarity |
"Защо напуснаха?" |
Потребителите кликват върху снимка на продукт (очакват да се увеличи), но нищо не се случва. Разочаровани, напускат. |
Реалният работен процес:
1. Забелязвате в
GA4, че дадена страница има нисък engagement rate.
2. Отваряте
Clarity, отивате на heatmap на същата страница.
3. Виждате, че никой не стига до CTA бутона (той е твърде надолу).
4. Премествате бутона нагоре.
5. След седмица проверявате отново в
GA4 - engagement rate-ът се е вдигнал.
Част 2: Инсталация на Microsoft Clarity
Най-лесният начин - за конкретни платформи
Shopify:
- Отидете в Shopify App Store
- Потърсете "Microsoft Clarity: AI Insights"
- Натиснете Install -> Go to app settings -> активирайте "Clarity JS"
Wix:
- Влезте в акаунта си
- Отидете на Apps → App Market
- Потърсете "Microsoft Clarity" → Add to site
WordPress:
- Използвайте плъгин като "Insert Headers and Footers"
- Или отидете на външен вид → редактор на теми → header.php
Ръчна инсталация (за HTML сайтове и всички останали)
Стъпка 1: Отидете на clarity.microsoft.com и се регистрирайте (с Microsoft, Google или Facebook акаунт).
Стъпка 2: Натиснете "New project", въведете име и URL на сайта.
Стъпка 3: Копирайте
tracking кода, който Clarity ви дава. Той изглежда така:
(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", "ВАШИЯ_УНИКАЛЕН_ИДЕНТИФИКАТОР");
Стъпка 4: Поставете този код в секцията
<head> на вашия сайт, точно преди затварящия
</head> таг.
Стъпка 5: Проверете дали работи:
- Натиснете F12 (Developer Tools)
- Отидете в таба Console
- Напишете
clarity и натиснете Enter
- Ако видите обект или функция - успех! Ако видите "undefined" - нещо не е наред.
Забавя ли Clarity сайта ми?
Краткият отговор е НЕ. Microsoft са проектирали Clarity да е изключително лек:
-
Асинхронно зареждане - не блокира останалата част от сайта
-
Оптимизиран код - минимален размер
-
Глобална CDN мрежа - бърз трансфер на данни
За огромното мнозинство от сайтовете няма измерим ефект върху скоростта.
Clarity + GTM - има ли конфликти?
Ако вече използвате Google Tag Manager (GTM), трябва да знаете за няколко потенциални проблема:
| Проблем |
Описание |
| Форми на iPhone |
При checkboxes и radio buttons, Clarity през GTM може да ги "развали" - при докосване те се отмятат за момент и после се връщат |
| GA4 cookies |
Clarity може да извика Google Analytics директно, пускайки cookies преди съгласие от потребителя (GDPR проблем) |
| Забавяне |
Може да забави реакцията при mouseover, влияейки на интерактивността |
Препоръка: Инсталирайте Clarity
директно (чрез кода в <head>), а не през GTM. Това е най-безопасният и стабилен вариант.
Част 3: Как да използвате Clarity - Пълен наръчник
3.1 Session Recordings (Записи на сесии) - Най-важният инструмент
Това е като да надникнете през рамото на вашите посетители. Гледате запис как реален човек движи мишката, кликва и скролира.
Къде да го намерите: Ляво меню →
Recordings
Как да филтрирате ефективно:
Използвайте бутона
Filters, за да намерите най-важните записи:
-
Rage Clicks (кликове на яд) -> Потребител кликва многократно и бързо на едно място - нещо не работи както очаква
-
Dead Clicks (мъртви кликове) -> Кликване върху елемент, който изглежда като бутон, но не води до никъде
-
Excessive Scrolling (прекомерно скролиране) -> Посетителят върти мишката нагоре-надолу, сякаш търси нещо
-
Quick Backs -> Отива на страница и веднага се връща - не е намерил търсеното
Как да гледате запис:
1. Кликнете на произволен запис
2. Използвайте бутона
Skip Inactivity (долу вдясно) - прескача дългите паузи
3. Обърнете внимание на
Click Map (къде е кликнал) и
Scroll Map (докъде е стигнал)
Реален пример:
Гледате запис на потребител, който влиза в продуктова страница. Той кликва 8 пъти върху основната снимка на продукта. Нищо не се случва. След 10 секунди напуска сайта.
Какво научихте? Потребителят очаква снимката да се увеличи (zoom). Това не работи. Трябва да добавите zoom функционалност или поне визуална индикация, че снимката не е кликваема.
3.2 Heatmaps (Топлинни карти)
Това са цветни визуализации, които показват "горещите" (най-често използвани) и "студените" (игнорирани) зони на страницата.
Къде да го намерите: Ляво меню →
Heatmaps
Трите най-полезни heatmaps:
Click Map (Карта на кликванията):
- Червени зони = много кликвания
- Синьо/лилаво = малко или никакви кликвания
-
Какво да търсите: Кликвания върху текст, който не е линк?
Кликвания върху снимки? Това са "мъртви кликове" - потребителите очакват нещо да се случи.
Scroll Map (Карта на скролирането):
- Показва колко хора стигат до всяка точка на страницата
- 100% = всички виждат този елемент
- 30% = само 30% от хората стигат дотук
-
Какво да търсите: Ако важният ви бутон "Купи" е на 40% скрол, значи 60% от хората дори не го виждат!
Area Map (Карта на задържане):
- Показва къде хората спират мишката и четат
-
Какво да търсите: Ако хората спират върху снимки, но не и върху текста - значи снимките са важни. Ако спират върху даден абзац - той е ценен.
Професионален съвет: Инсталирайте Chrome разширението
"Clarity Live". След това отидете на вашия сайт и ще видите икона на Clarity - можете да гледате heatmap на живо, без да отваряте таблото.
3.3 Dashboard и Frustration Signals
На началния екран (
Dashboard) веднага виждате "червените флагове":
| Сигнал |
Какво означава |
Какво да правите |
| Rage Clicks |
Потребител кликва многократно на едно място |
Нещо не работи - проверете дали бутон/линк е счупен |
| Dead Clicks |
Кликване върху не-линк елемент |
Направете този елемент кликваем или променете дизайна |
| Quick Backs |
Връщане назад за <5 секунди |
Заглавието или мета описанието подвеждат потребителя |
| Excessive Scrolling |
Бързо и хаотично скролиране |
Потребителят търси нещо и не го намира |
Ако видите
пик в някой от тези сигнали, веднага отидете в
Recordings и филтрирайте по този сигнал, за да разберете причината.
3.4 Как да филтрирате като професионалист
Филтрите са ключът към ефективния анализ. Без тях ще се давите в стотици записи.
Основни филтри, които да използвате:
1.
По устройство: Device class = Mobile - мобилният сайт често има различни проблеми от десктоп версията
2.
По локация: Country/Region = Bulgaria - ако сайтът ви е на български, вероятно искате да гледате само български потребители
3.
По източник: Traffic source = Google / Facebook / Direct - хората от различни източници се държат различно
4.
По поведение: Has rage clicks = Yes - показва само проблемните сесии
Как да запазите филтър за следващия път:
1. Настройте желаните филтри
2. Натиснете
Save as segment
3. Дайте му име (напр. "Мобилни потребители с rage clicks")
4. Следващия път този сегмент е достъпен с едно кликване
3.5 Copilot (AI Insights) - Вашият AI асистент
В горния десен ъгъл на таблото има бутон за
Copilot. Това е AI, който чете данните вместо вас.
Как да го използвате:
Просто го натиснете. Той ще ви напише нещо като:
"Забелязах 47 dead clicks върху логото на началната страница през последните 7 дни. Потребителите очакват да се върнат в началото, но логото не е линк."
или
"Потребителите от Италия имат 0% конверсия въпреки 350 посещения. Препоръчвам да проверите дали преводът на страницата е коректен."
Copilot е чудесен за
бърз сутрешен преглед - за 30 секунди разбирате къде има проблеми.
Част 4: Реални примери и сценарии
Пример 1: Висок bounce rate на продуктова страница
Симптом (GA4): Продуктовата страница има 75% bounce rate.
Разследване (Clarity):
- Отваряте Heatmap на страницата
- Scroll map показва: само 20% от хората стигат до бутона "Добави в количката"
- Click map показва: хората кликват върху снимките на продуктите (които не правят нищо)
Решение:
1. Премествате бутона "Добави в количката" по-нагоре - точно под заглавието
2. Добавяте zoom функционалност на снимките
Резултат след 2 седмици (GA4): Bounce rate пада до 45%.
Пример 2: Ниска конверсия при форма за контакт
Симптом (GA4): Формата за контакт има 2% конверсия - само 2 от 100 попълват.
Разследване (Clarity):
- Гледате 5 записа на сесии, филтрирани по "Dead clicks"
- Виждате, че всеки потребител се опитва да кликне върху телефонния номер, за да се обади директно от мобилния си телефон
- Но телефонният номер не е линк (не е tel:)
Решение:
Превръщате телефонния номер в кликваем линк: <a href="tel:+359888123456">0888 123 456</a>
Резултат след 2 седмици: Конверсията скача на 15% - хората се обаждат директно.
Пример 3: Потребителите не разбират навигацията
Симптом (GA4): Средната продължителност на сесията е много ниска - хората напускат бързо.
Разследване (Clarity):
- Филтрирате записи по "Rage clicks" + "Excessive scrolling"
- Гледате запис: потребителят върти мишката нагоре-надолу няколко пъти, кликва на различни места в менюто, изглежда объркан
- Накрая напуска
Решение:
- Опростявате навигационното меню - от 7 елемента на 4
- Добавяте търсачка в горната част на всяка страница
Резултат: Потребителите намират каквото търсят по-бързо, сесиите стават по-дълги.
Част 5: Често задавани въпроси (FAQ)
Колко време трябва да мине, преди да видя данни в Clarity?
Обикновено между
30 минути и 2 часа. Първите записи може да се появят по-бързо, но за пълни данни изчакайте поне 24 часа.
Мога ли да оставя Clarity за 2-3 дни и да гледам след това?
Абсолютно да. Clarity пази записите до 12 месеца. Всъщност това е препоръчително - с повече данни ще видите истински модели на поведение, а не случайни аномалии от 2-3 потребители.
Единствената проверка, която да направите преди да оставите: отворете F12 конзолата, напишете
clarity и се уверете, че не връща "undefined".
Clarity безплатен ли е наистина?
Да. Microsoft Clarity е напълно безплатен, без ограничения за брой записи, сесии или месечни посещения. Няма "freemium" модел - всичко е безплатно за всички.
Clarity съвместим ли е с GDPR?
Да, но трябва да внимавате. Clarity записва лична информация (IP адреси, въведени текстове). За да сте GDPR-compliant:
1. Включете опцията за
автоматично скриване на въведените данни (Settings → Privacy)
2. Информирайте потребителите в политиката си за бисквитки
3. Не записвайте страници с пароли, номера на кредитни карти и др.
Защо GA4 и Clarity показват различни числа?
Това е нормално. Причините:
-
Различни методи - GA4 използва pageviews, Clarity записва сесии при зареждане на скрипта
-
Ad блокъри - някои блокират Clarity, но не и GA4 (или обратното)
-
Обхват - Clarity записва всичко, GA4 има извадки при голям трафик
Не се притеснявайте от 5-10% разлика. Фокусирайте се върху тенденциите и проблемните сигнали.
Част 6: План за действие - Как да започнете днес
Ден 1: Инсталация и базова проверка
- [ ] Регистрирайте се в clarity.microsoft.com
- [ ] Създайте проект и вземете tracking кода
- [ ] Поставете кода в <head> на сайта (директно, не през GTM)
- [ ] Проверете с F12 → Console →
clarity дали работи
Седмица 1: Натрупване на данни
- [ ] Оставете сайта да работи нормално за 3-5 дни
- [ ] Не правете промени по сайта през това време
Седмица 2: Анализ
- [ ] Влезте в Dashboard и вижте frustration signals
- [ ] Отидете в Heatmaps на най-важните страници
- [ ] Филтрирайте Recordings по "Rage clicks" и "Dead clicks"
- [ ] Изгледайте 5-10 записа и си запишете забелязаните проблеми
Седмица 3: Действие
- [ ] Направете 1-2 корекции по сайта (най-лесните за изпълнение)
- [ ] Запишете "преди" метриките от GA4
Седмица 4: Измерване на резултатите
- [ ] Сравнете данните от GA4 преди и след промените
- [ ] Ако има подобрение - повторете цикъла с нови проблеми
- [ ] Ако няма - върнете се към анализа, за да намерите истинския проблем
Заключение
GA4 ви казва
какво се случва - кои страници имат проблем.
Microsoft Clarity ви показва
защо се случва - чрез записи, heatmaps и frustration сигнали.
Заедно те ви дават пълната картина. Без Clarity гадаете защо хората напускат. Без GA4 не знаете кои страници да анализирате първо.
Clarity е безплатен, лесен за инсталиране и няма да забави сайта ви. Инсталирайте го днес, оставете го да работи 2-3 дни и се върнете, за да откриете какво наистина се случва на вашия сайт.
Последен съвет: Започнете с малко. Не се опитвайте да анализирате всички 100 страници наведнъж. Изберете 2-3 най-важни страници (начална, продуктова, контакти) и се фокусирайте върху тях. Когато оправите тях, преминете към следващите.
