Co to jest mapa cieplna (heatmapa)? Definicja, rodzaje i zastosowanie

Mapa cieplna (heatmapa) to wizualizacja, która nakłada na zrzut strony internetowej dane o zachowaniu użytkowników, oznaczając ciepłymi kolorami obszary dużej aktywności, a zimnymi małej. Marketerzy sprawdzają dzięki niej, gdzie odwiedzający klikają, jak daleko przewijają i co pomijają. Microsoft Clarity udostępnia heatmapy za darmo i bez limitu ruchu od 28 października 2020 roku.

Aktualizacja: 17 października 20263 min czytania
Porównanie mapy cieplnej (heatmapy) i nagrania sesji w analityce zachowań użytkowników
Źródło: Contentsquare, Microsoft Clarity

Czym jest mapa cieplna strony?

Mapa cieplna to zbiorczy obraz wielu sesji, który pokazuje wzorce zachowań na jednej podstronie zamiast pojedynczych wizyt. Według przewodnika Contentsquare czerwień i pomarańcz oznaczają największą aktywność, żółty i zielony umiarkowaną, a niebieski niewielką lub zerową. Google Analytics mówi, ile osób weszło i ile dokonało konwersji, a heatmapa pokazuje, w którym miejscu strony działali. Dlatego jest podstawowym narzędziem optymalizacji współczynnika konwersji (CRO).

Jak działa heatmapa?

Heatmapa działa dzięki skryptowi, który zapisuje współrzędne interakcji i nanosi ich zagęszczenie na układ strony. Proces wygląda tak:

  1. Instalacja skryptu, np. Microsoft Clarity lub Hotjar.
  2. Zbieranie kliknięć, dotknięć, ruchów kursora i głębokości przewijania.
  3. Agregacja danych dla każdej podstrony i typu urządzenia.
  4. Nałożenie warstwy kolorów na zrzut strony.

Osobne mapy dla komputerów, tabletów i smartfonów są konieczne, bo układ strony się różni, a przycisk dobrze widoczny na desktopie bywa na telefonie poniżej pierwszego ekranu.

Rodzaje map cieplnych

Narzędzia do heatmap oferują 5 głównych rodzajów map, a każdy odpowiada na inne pytanie.

Mapa kliknięć

Mapa kliknięć pokazuje, gdzie użytkownicy klikają na komputerze lub dotykają ekranu na telefonie. Ujawnia kliknięcia w elementy, które nie są linkami, i przyciski, z których nikt nie korzysta.

Mapa przewijania

Mapa przewijania pokazuje, jaki odsetek odwiedzających dociera do każdego miejsca strony. Od razu widać, czy formularz lub cennik nie są schowane zbyt nisko.

Mapa ruchu kursora

Mapa ruchu pokazuje, gdzie przesuwa się kursor na komputerze, co w przybliżeniu oddaje uwagę. Na urządzeniach dotykowych nie występuje.

Mapy rage clicków i martwych kliknięć

Te mapy pokazują serie nerwowych kliknięć i kliknięcia, które niczego nie uruchamiają. Microsoft Clarity wykrywa takie wzorce automatycznie, za pomocą uczenia maszynowego.

Heatmapa z eye trackingu

Heatmapa z eye trackingu pokazuje, gdzie ludzie faktycznie patrzą, mierzone specjalnym sprzętem w badaniach laboratoryjnych. Nielsen Norman Group opisał na tej podstawie wzorzec czytania w kształcie litery F w 2006 roku i potwierdził go w 2017 roku dla desktopu i urządzeń mobilnych.

Mapy cieplne w marketingu i SEO

Mapy cieplne pomagają zamieniać ruch w leady, bo pokazują problemy z układem strony, które liczby w analityce tylko sugerują. W projektach SEO sięgam po nie, gdy podstrona zaczyna zbierać ruch, bo pozycja daje wizyty, ale konwersję musi zapewnić sama strona. Najczęstsze odkrycia w polskich sklepach:

  • Klikanie w zdjęcia produktów, które nie są linkami.
  • Połowa osób nie dociera do tabeli z cenami.
  • Przycisk „Do koszyka” zasłonięty na telefonie przez baner cookies.
  • Pomijanie wstępu i przeskakiwanie do pierwszej tabeli.

Na stronach z ruchem organicznym heatmapa pokazuje też, czy odpowiedź na zapytanie jest tam, gdzie użytkownik patrzy najpierw, co jest podstawą SXO. Zestaw dane z heatmapy z CTR z Google Search Console, a zobaczysz pełną ścieżkę od wyniku wyszukiwania do zakupu.

Heatmapa a nagrania sesji

CechaHeatmapaNagranie sesji
DaneZbiorcze z wielu wizytJedna wizyta
Odpowiada na pytanieGdzie użytkownicy działająDlaczego ktoś utknął
Czas analizyMinutyGodziny oglądania
ZastosowanieUkład strony i CTABłędy i problemy z formularzami

Obie metody najlepiej działają razem: heatmapa wskazuje strefę problemu, a nagrania ją wyjaśniają. Obie funkcje znajdziesz w Microsoft Clarity i w Hotjarze, który Contentsquare przejął 1 września 2021 roku.

Wskazówka: Zbierz co najmniej kilkaset sesji na każdy typ urządzenia, zanim wyciągniesz wnioski, i analizuj osobno ruch organiczny i płatny. Osoby z Google Ads i z artykułu blogowego zachowują się na tej samej stronie zupełnie inaczej.

Najczęstsze pytania: Mapa cieplna

Co oznaczają kolory na mapie cieplnej?

Czerwień i pomarańcz oznaczają największą aktywność, żółty i zielony umiarkowaną, a niebieski niewielką lub żadną. Skala jest względna dla danej strony, a nie bezwzględna.

Jakie jest darmowe narzędzie do heatmap?

Microsoft Clarity jest bezpłatny i nie ma limitów ruchu. Oferuje mapy kliknięć i przewijania, nagrania sesji oraz wykrywanie rage clicków i martwych kliknięć.

Czym różni się mapa kliknięć od mapy przewijania?

Mapa kliknięć pokazuje, gdzie użytkownicy klikają lub dotykają ekranu, a mapa przewijania, jaki odsetek osób dociera do każdej części strony. Razem pokazują, czy ważne elementy są widoczne i używane.

Czy heatmapa jest zgodna z RODO?

Narzędzia do heatmap zbierają dane o zachowaniu użytkowników, więc trzeba je uwzględnić w polityce prywatności i banerze zgód. Microsoft Clarity deklaruje gotowość do RODO, ale konfiguracja zgód zależy od właściciela strony.

Powiązane pojęcia

SEO międzynarodowe · AI SEO (GEO)

Rośnij na każdym rynku i bądź cytowany przez AI

Wypozycjonowanie strony na pięciu rynkach to dopiero połowa pracy, bo każdy rynek musi jeszcze konwertować. W projektach międzynarodowego SEO porównuję heatmapy dla każdej wersji językowej, bo Niemcy, Czesi i Polacy czytają ten sam układ strony inaczej.

Pomagam firmom SaaS i sklepom internetowym zdobywać ruch organiczny w Europie i USA oraz sprawiać, że ChatGPT, Gemini, Perplexity i Google AI Overviews polecają ich markę. Każdy projekt zaczynam od bezpłatnego audytu strony, rynków i widoczności w odpowiedziach AI.

Napisz do Adriana

Masz pytanie o to pojęcie albo o SEO swojej strony?

Napisz krótko o stronie, rynkach, na których sprzedajesz, i o tym, co chcesz osiągnąć. Odpowiadam osobiście, nie dział sprzedaży.

  • Bezpłatny wstępny audyt SEO i widoczności w AI
  • Strategia na rynki zagraniczne i wielojęzyczne
  • Odpowiedź w ciągu jednego dnia roboczego
Umów bezpłatną rozmowę
Adrian Dąbrowiecki

Napisz do Adriana

Adrian Dąbrowiecki · Marketer Coffee

Opisz swoją stronę i cele. Zwykle odpowiadam w ciągu jednego dnia roboczego.