Jak wdrożyć heatmapy na swojej stronie internetowej za pomocą Hotjar

Opublikowany 17 marca 2026 w Analityka. Tagi: heatmap.

Narzędzia wizualne w postaci heatmap pomagają zobaczyć, w których miejscach użytkownicy klikają, przewijają lub spędzają czas na Twoich stronach internetowych. Hotjar jest jednym z najpopularniejszych narzędzi do tworzenia heatmap — i nie jest trudny w instalacji, o ile wykonasz poniższe kroki.

Po zakończeniu tego poradnika będziesz wiedzieć:

Czym są heatmapy
Dlaczego są ważne
Jak zainstalować Hotjar
Jak tworzyć heatmapy
Jak odczytywać i interpretować dane z heatmap.

Kto korzysta z heatmap i kiedy warto ich używać

Z heatmap może korzystać każda osoba odpowiedzialna za stronę internetową, która chce poprawić jej wyniki. Nie musisz być ekspertem technicznym. Jeśli prowadzisz stronę małej firmy, sklep internetowy, landing page’e albo kampanie marketingowe, heatmapy mogą pomóc Ci zrozumieć, co robią odwiedzający.

Warto rozważyć heatmapy, jeśli widzisz takie problemy jak niska konwersja, mała liczba kliknięć w przyciski albo wysoki współczynnik odrzuceń. Przykładowo heatmapa może pokazać, że osoby odwiedzające stronę produktu nie kupują go, ponieważ nie zwracają uwagi na przycisk „Dodaj do koszyka”. Jeśli użytkownicy nie przewijają do miejsca, w którym znajduje się ważna informacja, również szybko to zauważysz.

Heatmapy są też bardzo przydatne po przeprojektowaniu strony. Możesz obserwować rzeczywiste zachowania zamiast zgadywać, czy nowy układ działa. Podsumowując: heatmapy warto stosować wtedy, gdy zależy Ci na jasności opartej na danych, a nie na założeniach.

Przygotowania przed konfiguracją Hotjar

Przed instalacją Hotjar warto przygotować kilka rzeczy. To oszczędzi czas i pozwoli uniknąć zamieszania później.

Po pierwsze, upewnij się, że masz dostęp do zaplecza lub kodu swojej strony internetowej. Będziesz potrzebować możliwości dodania skryptu śledzącego. Jeśli stroną zajmuje się web developer, poinformuj go wcześniej, aby mógł pomóc. Bez dostępu nie da się zainstalować kodu śledzącego.

Po drugie, wybierz strony, które chcesz analizować. Nie próbuj śledzić wszystkiego jednocześnie. Zacznij od stron o największym znaczeniu, takich jak strona główna, strony produktów albo landing page’e. To właśnie te strony najczęściej mają największy wpływ na konwersję.

Po trzecie, jasno określ swój cel. Czy chcesz zwiększyć liczbę kliknięć w przyciski? Poprawić liczbę wysłanych formularzy? Zwiększyć sprzedaż? Dane z heatmap nabierają sensu dopiero wtedy, gdy wiesz, czego szukasz. W przeciwnym razie możesz zbierać informacje i nie wiedzieć, co dalej z nimi zrobić.

Przy odpowiednim przygotowaniu konfiguracja staje się łatwiejsza i skuteczniejsza.

1. Zrozum, czym są heatmapy i dlaczego ich potrzebujesz

Zanim przejdziemy do konfiguracji, najpierw zdefiniujmy heatmapę.

Heatmapa to graficzna nakładka na stronę internetową, która pokazuje:

Gdzie użytkownicy klikali (Click Heatmap)
Jak daleko przewijali stronę (Scroll Heatmap)
Gdzie poruszali kursorem myszy (Move/Attention Heatmap)

Heatmapa to po prostu kolorowa warstwa na Twojej stronie:

Czerwony / ciepłe kolory oznaczają duże zaangażowanie.
Żółty / umiarkowane kolory oznaczają średnie zaangażowanie.
Niebieski / chłodne kolory oznaczają niskie zaangażowanie.

Dlaczego warto używać heatmap?

Aby zrozumieć, z czym użytkownicy wchodzą w interakcję.
Aby określić obszary, których użytkownicy nie odwiedzają.
Aby ulepszyć układ strony i wezwania do działania.

2. Utwórz konto Hotjar

Hotjar oferuje darmowy plan, ale aby korzystać z heatmap, musisz założyć konto.

Krok A: Otwórz stronę Hotjar

Przejdź do: https://hotjar.com/product/heatmaps/
Kliknij przycisk Sign Up / Get Started.

Krok B: Wpisz swój adres e-mail

Zobaczysz formularz proszący o adres e-mail.
Wpisz swój adres e-mail.
Wybierz hasło.

Krok C: Zweryfikuj swój e-mail

Hotjar wyśle Ci wiadomość weryfikacyjną.
Kliknij Verify w tej wiadomości.

3. Dodaj swoją stronę do Hotjar

Po rejestracji musisz dodać swoją stronę do monitorowania w Hotjar.

Krok A: Przejdź do Dashboardu

Po zalogowaniu trafisz do swojego panelu Hotjar Dashboard.

Krok B: Dodaj adres URL swojej strony

Kliknij Add New Site lub Add Website.
Wpisz adres URL swojej strony.

Krok C: Wybierz swój plan

Hotjar oferuje:

Plan darmowy
Plan płatny

Wybierz plan najlepiej dopasowany do Twoich potrzeb. Jeśli dopiero testujesz narzędzie, zacznij od planu darmowego.

4. Zainstaluj kod śledzący Hotjar na swojej stronie

Teraz Hotjar musi zostać zainstalowany na Twojej stronie, aby mógł zbierać dane.

To najważniejszy krok techniczny, ale wyjaśnię go jasno.

Krok A: Znajdź swój kod śledzący

W Hotjar Dashboard przejdź do Sites & Organizations.
Kliknij stronę, którą właśnie dodałeś.
Zobaczysz sekcję zatytułowaną “Install Tracking Code”.

Krok B: Skopiuj skrypt

W polu zostanie wyświetlony skrypt (zaczynający się od <script>).
Zaznacz go w całości i skopiuj.

5. Dodaj kod śledzący do swojej strony internetowej

Ten krok zależy od rodzaju platformy, na której działa Twoja strona.

Jeśli Twoja strona działa na WordPressie

Zaloguj się do panelu WordPress Admin (twojadomena.com/wp-admin).
Przejdź do Appearance – Theme Editor (lub użyj wtyczki Header/Footer Scripts, jeśli jest dostępna).
Otwórz plik header.php.
Wklej skrypt Hotjar tuż przed </head>.
Zapisz zmiany.

Jeśli Twoja strona działa na Shopify

Zaloguj się do Shopify.
Przejdź do Online Store – Themes – Edit Code.
Otwórz plik theme.liquid.
Wklej kod przed </head>.
Zapisz.

Jeśli Twoja strona korzysta z menedżera tagów (np. Google Tag Manager)

Zaloguj się do Google Tag Manager.
Dodaj nowy tag o nazwie Hotjar Tracking.
Wybierz Custom HTML Tag.
Wklej skrypt.
Ustaw trigger na All Pages.
Zapisz.

6. Potwierdź instalację kodu śledzącego

Wróć do Hotjar Dashboard.
Kliknij Verify Installation.
Hotjar sprawdzi, czy kod śledzący działa.

Jeśli instalacja przebiegła pomyślnie:

Hotjar pokaże zielony znacznik potwierdzenia
Może to zająć kilka minut

7. Utwórz swoją pierwszą heatmapę

Gdy Hotjar jest już zainstalowany, możesz skonfigurować heatmapy.

Krok A: Przejdź do sekcji Heatmaps

Heatmaps znajdziesz w lewym menu Hotjar Dashboard.

Krok B: Kliknij “New Heatmap”

Wybierz przycisk New Heatmap lub Create Heatmap.

Krok C: Wprowadź szczegóły heatmapy

Nazwij swoją heatmapę (np. “Homepage Click Heatmap”).
Wpisz adres URL strony, którą chcesz monitorować (np. stronę główną lub stronę produktu).
Wybierz typ urządzenia:
- Desktop
- Mobile
- Tablet

8. Skonfiguruj ustawienia heatmapy

Przed uruchomieniem warto jeszcze dopracować kilka ustawień.

A. Reguły adresów URL

Możesz śledzić:

Tylko jedną stronę
Wszystko w określonym wzorcu (np. /blog/*).

Stosuj wzorce URL, jeśli masz stronę opartą na szablonach.

B. Metoda próbkowania

Próbkowanie określa, którzy odwiedzający będą rejestrowani.

Default (balanced)
More sessions (wide capture)
Improved signal (quality over quantity).

Zwykle ustawienie Default jest w porządku.

C. Opcje Click & Scroll Map

Upewnij się, że zarówno Click, jak i Scroll maps są włączone.

9. Rozpocznij nagrywanie heatmapy

Po uzupełnieniu ustawień kliknij Start Recording lub Create.
Hotjar rozpocznie zbieranie danych, gdy odwiedzający zaczną wchodzić na stronę.

Ważne:

Heatmapy potrzebują danych, aby się zbudować
Jeśli Twoja strona ma mały ruch, może to potrwać dłużej.

10. Poczekaj, aż pojawią się dane

Heatmapy nie działają natychmiast.
Hotjar potrzebuje odpowiedniej liczby odwiedzających, zanim wzorce staną się wyraźne.

W zależności od ruchu:

Duży ruch: ~kilka godzin
Mały ruch: ~kilka dni

Postęp możesz sprawdzać pod nazwą heatmapy.

11. Zobacz wyniki heatmapy

Gdy zbierze się wystarczająco dużo danych:

A. Otwórz heatmapę

Wejdź do sekcji Heatmaps w Dashboardzie.
Wybierz nazwę swojej heatmapy.

B. Wybierz typ mapy

W widoku heatmapy:

Click Map: pokazuje, gdzie ludzie klikali.
Move Map: pokazuje ruch kursora.
Scroll Map: pokazuje, jak daleko użytkownicy przewijali stronę.

Przełączaj te zakładki, aby analizować dane.

12. Odczytaj i zinterpretuj wyniki

To właśnie tutaj heatmapa staje się naprawdę przydatna.

A. Click Map

Szukaj:

Czerwonych punktów = dużo kliknięć
Niebieskich obszarów = mało albo brak kliknięć

Zadaj sobie pytania:

Czy kieruję użytkowników tam, gdzie chcę?
Czy klikają w coś, co nie jest klikalne?

B. Scroll Map

To pokazuje:

Jak daleko użytkownicy przewijają stronę

Gdzie przestają czytać
Jeśli ważna treść znajduje się poniżej obszaru słabo przewijanego, można ją przenieść wyżej.

C. Move Map

Pokazuje ruch myszy.
Ruch kursora może sugerować strefy uwagi użytkownika.

13. Wykorzystaj wnioski do poprawy swojej strony

Heatmapy mówią Ci, co użytkownicy robią — i gdzie się wahają.

Niektóre zmiany, które możesz wprowadzić, to:

Przenieś ważne przyciski wyżej na stronie.
Ogranicz treści, których nikt nie przewija.
Wyraźnie zaznacz elementy klikalne
Usuń rozpraszacze.

14. Utwórz więcej heatmap dla innych stron

Najbardziej przydatne heatmapy warto tworzyć dla:

Strony głównej
Stron produktów
Landing page’y
Stron checkoutu

Powtórz kroki 7-12 dla każdej strony.

15. Dobre praktyki: korzystanie z heatmap

Oto kilka praktycznych wskazówek:

Śledź strony z dobrym ruchem

Heatmapy potrzebują danych. Sensowne informacje uzyskasz tylko na stronach, które są często odwiedzane.

Porównuj urządzenia

Ludzie zachowują się inaczej na mobile niż na desktopie.
Twórz osobne heatmapy.

Używaj razem z innymi narzędziami

Heatmapy są pomocne, ale warto też korzystać z:

Danych analitycznych
Nagrań użytkowników
Ankiet

Regularnie przeglądaj heatmapy

Warto analizować heatmapy co miesiąc albo po większych aktualizacjach strony.

16. Rozwiązywanie typowych problemów

Problem: nie zbierają się dane

Sprawdź, czy skrypt Hotjar został poprawnie zainstalowany.
Upewnij się, że adres URL strony się zgadza.

Problem: heatmapa stoi na 0%

Za mały ruch?
Poczekaj albo użyj szerszej reguły URL.

Problem: brak aktywności scrollowania

Strona jest za krótka
Treść ładuje się dynamicznie (wymagana bardziej zaawansowana konfiguracja).

17. Usuwanie lub wstrzymywanie heatmapy

Przejdź do listy heatmap.
Znajdź heatmapę, którą chcesz zatrzymać.
Kliknij Pause lub Delete.

Możesz wstrzymać heatmapę, jeśli:

Zebrałeś już wystarczająco dużo danych
Chcesz tymczasowo przestać śledzić.

Mierzenie efektu po wprowadzeniu zmian

Stworzenie heatmapy to tylko połowa pracy. Prawdziwa wartość pojawia się wtedy, gdy wprowadzasz poprawki na podstawie tego, czego się dowiedziałeś.

Po zmianie układu strony, przesunięciu przycisków, skróceniu treści albo uproszczeniu formularzy powinieneś utworzyć kolejną heatmapę. Dzięki temu możesz porównać zachowanie użytkowników przed i po zmianach. Na przykład jeśli wcześniej użytkownicy nie klikali głównego przycisku, a Ty przeniosłeś go wyżej na stronie, nowa heatmapa pokaże, czy liczba kliknięć wzrosła.

Możesz też śledzić inne wskaźniki, takie jak konwersje, rejestracje albo zakupy. Heatmapy pokazują zachowania wizualnie, ale dopiero narzędzie analityczne potwierdzi, czy wyniki rzeczywiście się poprawiły.

Nie musisz zmieniać wszystkiego naraz. Zmień jeden lub dwa elementy, przetestuj ponownie i sprawdź wyniki. Takie kontrolowane podejście pozwala łatwiej zobaczyć, co zadziałało, a co nie.

Heatmapy wspierają podejmowanie decyzji. Pomagają ulepszać stronę krok po kroku, zamiast działać na ślepo.

Końcowe przemyślenia: jak zamieniać wnioski w działania

Heatmapy są łatwe do zainstalowania, a przy odpowiednim wykorzystaniu — bardzo skuteczne. Pokazują, jak prawdziwi użytkownicy wchodzą w interakcję z Twoją stroną internetową: gdzie klikają, gdzie przestają przewijać i co pomijają. Dzięki temu eliminujesz założenia i zastępujesz je rzeczywistymi danymi behawioralnymi.

Hotjar nie wymaga zaawansowanej wiedzy technicznej, aby skonfigurować heatmapy. Gdy kod śledzący zostanie już zainstalowany, heatmapy można tworzyć i obsługiwać bardzo łatwo. Trzeci krok — i zarazem najważniejszy etap — to analiza danych i działanie na ich podstawie.

Pamiętaj, że same heatmapy nie poprawią Twojej strony. Dają Ci wgląd. Poprawa następuje wtedy, gdy analizujesz wzorce, identyfikujesz słabe miejsca i wprowadzasz przemyślane zmiany.

Regularnie sprawdzając heatmapy i testując usprawnienia, z czasem stworzysz lepszą, wygodniejszą i skuteczniejszą stronę. Takie drobne zmiany mogą ostatecznie przełożyć się na znaczący wzrost zaangażowania i konwersji.

O autorce

Anna Malik – cyfrowa nomadka, entuzjastka wszystkiego, co online i w chmurze, maniaczka produktywności. Podróżuje po świecie, recenzując aplikacje webowe i inne zasoby dla ludzi internetu na potrzeby naszego bloga.