Spis treści
Wstajesz rano i Twój sklep ma 50% bounce rate na karcie produktu. Co tam się dzieje? Domyślasz się, że „może cena za wysoka”, „może opis słaby”. Heatmapy odpowiadają zamiast Ciebie zgadywać — pokażą Ci, gdzie klient klika, gdzie się gubi, gdzie wychodzi. Pokażę Ci, jak to wyciągać.
W skrócie
- Heatmapa = wizualna mapa interakcji użytkowników (kliknięć, scrollów, ruchu kursorem).
- Microsoft Clarity — całkowicie darmowy, brak limitów, prywatność OK.
- Hotjar — bardziej rozbudowany, surveys + feedback widget, ale płatny powyżej 35 sesji/dzień.
- Najważniejsze 3 widoki: click map, scroll map, nagrania sesji.
Po co heatmapy
GA4 pokaże Ci, że „30% odbija na karcie produktu”. Heatmapa pokaże Ci, że klient próbuje kliknąć w obraz produktu, ale nic się nie dzieje (bo nie ma lightboxa). Albo że scroll się kończy w 1/3 strony, więc klient nie widzi opisu i CTA.
GA4 = liczby. Heatmapa = zachowanie.
Microsoft Clarity — darmowy gigant
Plusy
✅ Całkowicie darmowy — brak limitu sesji, brak limitu stron, brak limitu czasu trwania
✅ Sponsorowany przez Microsoft — pełna firma stoi za narzędziem, nie zniknie jutro
✅ Bez agresywnych pop-upów upgrade’owych jak Hotjar
✅ Privacy-friendly — auto-maskuje dane wrażliwe (PESEL, hasła)
✅ AI insights — automatycznie wykrywa problemy (rage clicks, dead clicks)
Minusy
❌ Brak ankiet (surveys)
❌ Brak feedback widget
❌ Trochę wolniejsze ładowanie raportów
Co zobaczysz w Clarity
- Click maps — gdzie klikają (wszystkie elementy)
- Scroll maps — do jakiej wysokości scrollują
- Area maps — wybrane regiony strony, agregowane dane
- Recordings — nagrania kompletnych sesji
- Insights — automatyczne wykrycie problemów
Jak zainstalować Clarity
- Wejdź na clarity.microsoft.com, zaloguj się kontem Microsoft (lub załóż)
- Stwórz nowy projekt
- Skopiuj kod tracking
- W WordPressie wklej w
<head>przez wtyczkę Microsoft Clarity (oficjalna) - Po 24 h zaczniesz widzieć dane
Hotjar — premium, znany standard
Plusy
✅ Więcej funkcji — surveys, feedback widget, recruitment for user testing
✅ Świetny UI — najbardziej intuicyjny w branży
✅ Integracje — Slack, Zapier, GA4
✅ Filters & segments — analiza per source, per device, per country
Minusy
❌ Free plan ograniczony — 35 sesji dziennie (po 14 dniach trial)
❌ Płatne plany od 39 USD/mies. (1 sklep, 100 sesji/dzień)
❌ Mocniejsze cookie banner wymagane
Co zobaczysz w Hotjar
- Heatmaps (click, move, scroll)
- Recordings
- Surveys (NPS, satysfakcji, exit intent)
- Feedback widget (smiley emoji + komentarz)
- Funnels (wizualizacja, gdzie ludzie odpadają)
Hotjar vs Clarity — kiedy co
| Kryterium | Microsoft Clarity | Hotjar |
|---|---|---|
| Cena | Free | $39/mies+ |
| Limit sesji | brak | 100/dzień (Plus) |
| Click maps | ★★★★ | ★★★★★ |
| Scroll maps | ★★★★ | ★★★★★ |
| Recordings | ★★★★ | ★★★★★ |
| Surveys | ❌ | ★★★★ |
| Feedback widget | ❌ | ★★★ |
| AI insights | ★★★★ | ★★★ |
| Privacy / GDPR | ★★★★★ | ★★★★ |
Wniosek: Dla 80% biznesów Clarity wystarcza. Hotjar warto dopłacić, jeśli regularnie robisz surveys lub user research.
Jak czytać click map
Click map pokazuje gdzie klient klika (czerwone = dużo, niebieskie = mało).
Czego szukasz:
1. Klient klika tam, gdzie nie ma linku („dead clicks”)
To znaczy: klient myśli, że to klikalne. Może to obraz, może to nagłówek wyglądający na link, może to ikona.
Naprawa: zrób z tego klikalne — link, button. Albo zmień styl, żeby NIE wyglądał na klikalny.
2. Klient nie klika tam, gdzie chcesz („dead zones”)
CTA „Kup teraz” w środku strony, ale heatmapa pokazuje 0 kliknięć. Klient go nie widzi lub nie wzbudza zaufania.
Naprawa: zmień kolor (kontrast), tekst (CTA powinien być bardziej „Action”), pozycję (wyżej na stronie).
3. Klient klika „rage” — wielokrotnie w to samo
To oznacza frustrację: kliknął w button, nic się nie stało (bug?), klika znowu i znowu. Czerwona flaga.
Naprawa: sprawdź, czy button działa. Może JavaScript się nie ładuje, może loading state’u brak (klient nie wie, że coś się dzieje).
Jak czytać scroll map
Scroll map pokazuje do jakiej wysokości scrollują (czerwone = wszyscy, zielone = mało).
Czego szukasz:
1. Czerwone scroll się kończy w 1/3 strony
To znaczy: klient nie dotarł do reszty contentu. Twój CTA w 2/3 strony jest niewidoczny.
Naprawa: umieść kluczowe elementy (CTA, USP, opis) w pierwszych 50% strony. Resztę traktuj jak „bonus dla zainteresowanych”.
2. Skok w scroll map (czerwone, potem zielone, potem znowu czerwone)
To znaczy: jakaś sekcja jest przeskakiwana — klient ją „scrolluje przez”, bo nie interesuje go.
Naprawa: sprawdź, czy ta sekcja jest potrzebna. Może to „About us” zamiast CTA, może to powtórzenie informacji z góry.
3. Wszyscy scrollują do końca
To bardzo dobrze — content trzyma uwagę. Wykorzystaj to: dodaj CTA na samym dole.
Jak czytać recordings
Nagranie sesji = wideo zachowania użytkownika (ruch myszki, scrolla, klika, formularz).
Czego szukasz:
1. Sesje „wybranych”
Filtruj sesje, które:
– Zakończyły się zakupem (co robili dobrze?)
– Trwały >5 minut (wciągająca treść)
– Zakończyły się rage click (co frustruje?)
2. Common patterns
Po obejrzeniu 20–30 sesji widzisz wzorce:
– „Wszyscy próbują kliknąć w logo, by wrócić do home” (linkujesz logo do home? sprawdź)
– „80% klika 3 razy w filtr cenowy, bo nie odpowiada” (filtr nie działa lub nieintuicyjny)
– „Klient otwiera 5 produktów, wraca do listy, dodaje 1 do koszyka” (porównuje przed zakupem)
3. Punkty rezygnacji
Gdzie sesja się kończy (zamknięcie taby)? Znajdź 10 ostatnich klikniętych elementów przed zamknięciem.
Praktyczny case study
Klient: sklep online z butami sportowymi, bounce rate na karcie produktu 68%.
Co pokazała Clarity:
1. Click map: klienci klikają w obraz produktu (myślą, że to lightbox) — zoom nie działał
2. Scroll map: 40% kończy scroll na ½ karty produktu — opis i recenzje są niżej, niewidoczne
3. Recordings: wszyscy próbują rozwinąć sekcję „Tabela rozmiarów”, klikają w niewłaściwe miejsce
Naprawy (3 godziny pracy):
1. Dodano lightbox dla obrazów (klik = powiększenie)
2. Recenzje przeniesiono wyżej (pod cenę i CTA)
3. Tabela rozmiarów rozwija się jednym kliknięciem w cały tytuł
Wynik po 30 dniach:
– Bounce rate: 68% → 49%
– Konwersja: 1,8% → 2,7% (+50%)
– Time on page: 45 s → 1 min 18 s
Najczęstsze błędy w korzystaniu z heatmap
❌ Małe próbki — 50 sesji to ZA MAŁO. Standardowo 500–1 000 sesji dla statystycznej istotności
❌ Patrzenie tylko na Top 10 stron — czasem 11 ma najgorszą konwersję, ale ją ignorujesz
❌ Działanie na podstawie 1 nagrania — 1 osoba ≠ trend. Sprawdź minimum 10–20 sesji w danej grupie
❌ Heatmapa bez segmentacji — desktop vs mobile to kompletnie różne zachowania. Patrz osobno
❌ Ignorowanie privacy — Clarity i Hotjar maskują automatycznie, ale dodaj to do polityki prywatności
Co dalej
W tym tygodniu:
- Załóż konto Microsoft Clarity (clarity.microsoft.com)
- Zainstaluj kod na stronie (5 minut)
- Po 7 dniach masz już dane do analizy
- Wybierz 1 stronę z najgorszą konwersją
- Spędź 1 godzinę oglądając 10 sesji + click map + scroll map
- Zaplanuj 3 zmiany na podstawie obserwacji
Audyt UX z heatmapami w pakiecie optymalizacji konwersji — analizujemy 200+ sesji, robimy heatmapy 5 kluczowych stron, dajemy listę 12+ konkretnych zmian. Cena: 1 800 zł netto. Napisz.
Twoja opinia
Czy ten artykuł był pomocny?
Jedno kliknięcie — pomaga mi wybierać kolejne tematy.
