Hotjar to narzędzie do analizy zachowań użytkowników (mapy cieplne, nagrania sesji, ankiety, lejki konwersji), które świetnie uzupełnia dane ilościowe z Google Analytics, łącząc „co się dzieje” (GA) z „dlaczego tak się dzieje” (Hotjar). Integracja przez Google Tag Managera jest szybka, a przy bardziej zaawansowanej konfiguracji możesz oznaczać sesje Hotjar w GA za pomocą niestandardowego wymiaru lub eventów.
- 1. Co to jest Hotjar i do czego służy?
- 2. Jak działa Hotjar – technicznie i praktycznie
- 3. Funkcje Hotjar – co dokładnie możesz z nim zrobić?
- 4. Jak zainstalować Hotjar na stronie?
- 5. Jak połączyć Hotjar z Google Analytics – poziom podstawowy
- 6. Integracja Hotjar z Google Analytics – poziom zaawansowany
- 7. Jak efektywnie pracować z Hotjar i GA – praktyczne porady
- 8. Wersja darmowa vs płatna Hotjar
- 9. Najczęstsze błędy i dobre praktyki
1. Co to jest Hotjar i do czego służy?
Hotjar to wszechstronne narzędzie analityczne, które pokazuje, jak realni użytkownicy korzystają z Twojej strony – nie tylko ile ich jest, ale co dokładnie robią.
Najważniejsze funkcje Hotjar:
- mapy cieplne (heatmaps) – wizualizacje kliknięć, przewijania i ruchów kursora na stronie;
- nagrania sesji – „filmy” z wizyt użytkowników pokazujące każdy klik i ruch myszy;
- ankiety i feedback – wyskakujące pytania, widgety opinii, sondy na stronie;
- lejki konwersji – pokazują, gdzie użytkownicy odpadają w procesie (np. koszyk → płatność);
- analiza formularzy – wykrywa pola sprawiające problemy, długi czas wypełniania, porzucenia;
- Engage (wywiady UX) – moduł do zdalnych rozmów 1:1, testów prototypów i rekrutacji do badań.
Hotjar działa przez krótki fragment kodu JavaScript, który dodajesz do strony (ręcznie albo przez CMS/GTM). Po instalacji narzędzie:
- zapisuje ruchy myszy, kliknięcia i przewijanie,
- przetwarza je na mapy ciepła i nagrania sesji,
- udostępnia wyniki w prostym panelu online.
Dlaczego warto używać Hotjar obok Google Analytics?
Poniższa tabela podsumowuje różnice w tym, co mierzy GA i co wizualizuje Hotjar:
| Narzędzie | Na co odpowiada | Przykładowe dane |
|---|---|---|
| Google Analytics (GA4) | co się dzieje na stronie |
|
| Hotjar | dlaczego tak się dzieje |
|
Praktycznie: w Google Analytics identyfikujesz problem (np. wysoka rezygnacja na płatności), a w Hotjar sprawdzasz, dlaczego do niego dochodzi (np. błąd walidacji, nieczytelne CTA).
2. Jak działa Hotjar – technicznie i praktycznie
2.1. Jak Hotjar zbiera dane?
Po dodaniu skryptu Hotjar do strony:
- narzędzie rejestruje sesje użytkowników: kliknięcia, ruchy myszką, przewijanie, czas na stronie,
- dane są anonimizowane (zgodnie z RODO/GDPR – przy poprawnej konfiguracji) i przechowywane na serwerach Hotjar,
- w panelu widzisz je w formie map, nagrań, raportów.
Hotjar nie zastępuje analityki ruchu (GA), lecz uzupełnia ją o dane jakościowe (UX).
2.2. Moduły Hotjar – krótki przegląd
Hotjar dzieli się na trzy główne obszary:
- Observe – obserwacja zachowań:
- mapy cieplne,
- nagrania sesji,
- ścieżki nawigacyjne.
- Ask – zbieranie opinii:
- ankiety na stronie,
- widgety feedbacku,
- sondy i krótkie pytania.
- Engage – badania UX:
- zdalne wywiady 1:1,
- testy prototypów,
- rekrutacja użytkowników do badań.
3. Funkcje Hotjar – co dokładnie możesz z nim zrobić?
3.1. Mapy cieplne (heatmaps)
Mapy cieplne pokazują:
- gdzie użytkownicy klikają,
- jak daleko przewijają,
- które elementy są gorące (często używane), a które „martwe”.
Przykładowe zastosowania:
- sprawdzenie, czy użytkownicy klikają w fałszywe elementy klikalne (np. grafika imitująca przycisk),
- weryfikacja, czy ważne CTA znajdują się w obszarze najczęściej obserwowanym,
- analiza, czy użytkownicy docierają przewijaniem do kluczowej sekcji.
Aby utworzyć mapę ciepła, wykonaj te kroki:
- zaloguj się do panelu Hotjar i wejdź w sekcję Heatmaps;
- kliknij + New heatmap;
- wybierz adres URL (konkretna strona lub wzorzec), typ mapy (kliknięcia/przewijanie/ruch) i urządzenie (desktop/tablet/mobile);
- zapisz ustawienia i poczekaj na zebranie danych.
3.2. Nagrania sesji użytkowników (recordings)
Nagrania sesji pozwalają odtworzyć wizytę użytkownika jak film. Hotjar rejestruje ruch kursora, kliknięcia, przewijanie oraz zmiany stron w obrębie serwisu.
W praktyce: zobaczysz moment porzucenia koszyka, wykryjesz błędy w formularzu (np. klik „Wyślij” bez reakcji) i zdiagnozujesz frustrację (np. rage clicks). Dodatkowo możesz filtrować sesje po źródle ruchu, urządzeniu czy lokalizacji oraz wygodnie sterować odtwarzaniem.
3.3. Ankiety, feedback, sondy (Ask)
Hotjar umożliwia wyświetlanie użytkownikom:
- krótkich pytań (np. „Co powstrzymuje Cię przed złożeniem zamówienia?”),
- widgetów „Oceń tę stronę”,
- dłuższych ankiet typu NPS i badań satysfakcji.
Dzięki temu łączysz dane z zachowania z danymi z deklaracji – widzisz nie tylko, co użytkownicy robią, ale też co o tym mówią.
3.4. Lejki konwersji i analiza formularzy
W Hotjar zbudujesz lejek konwersji (np. strona produktu → koszyk → dane adresowe → płatność) i zobaczysz, na którym kroku najwięcej osób odpada.
Moduł analizy formularzy pokazuje:
- które pola są najdłużej uzupełniane,
- gdzie użytkownicy najczęściej robią błąd,
- które pola powodują porzucenie formularza.
4. Jak zainstalować Hotjar na stronie?
4.1. Rejestracja i podstawowa konfiguracja
- wejdź na stronę Hotjar i załóż konto (jest plan darmowy – idealny na start);
- dodaj nową stronę (Site/Organization) i wpisz domenę;
- skopiuj wygenerowany tracking code JavaScript (identyfikator
hjidznajdziesz w kodzie).
Masz do wyboru trzy metody instalacji:
- przez CMS / kreator stron (WordPress, Shopify, Wix itp.),
- przez Google Tag Managera (GTM),
- ręcznie – wklejenie kodu do
<head>.
4.2. Instalacja Hotjar przez Google Tag Manager (rekomendowane)
To najwygodniejsza metoda – zapewnia łatwą edycję i przyszłe integracje.
- skopiuj swój kod Hotjar z sekcji „Tracking” (upewnij się, że masz właściwy
hjid); - zaloguj się do Google Tag Manager i wybierz odpowiedni kontener;
- utwórz nowy tag o nazwie np.
Hotjar – Tracking Codei wybierz typ Custom HTML; - wklej cały skrypt Hotjar w polu HTML (opcja „Support document.write” zwykle nie jest potrzebna);
- jako trigger ustaw All Pages (Wszystkie strony), aby kod ładował się na każdej podstronie;
- zapisz zmiany i kliknij Prześlij/Opublikuj, by wdrożyć tag;
- wróć do panelu Hotjar i poczekaj na automatyczną weryfikację instalacji (kilka minut).
4.3. Instalacja przez WordPress / inne systemy
W popularnych platformach (WordPress, Shopify, Wix, PrestaShop) dodasz Hotjar poprzez gotowe wtyczki lub wklejenie tracking code w nagłówku motywu.
- skopiuj tracking code z Hotjar;
- w CMS znajdź miejsce na zewnętrzne skrypty (sekcja
<head>); - wklej kod i zapisz zmiany;
- zweryfikuj instalację w panelu Hotjar.
5. Jak połączyć Hotjar z Google Analytics – poziom podstawowy
Hotjar i Google Analytics nie łączą się w jedno narzędzie, lecz integrują się funkcjonalnie, tak aby dane się uzupełniały.
- Wspólny kontener GTM – dodaj GA4 i Hotjar w tym samym kontenerze; oba kody działają wtedy spójnie na tych samych stronach;
- Spójne nazewnictwo – w GA używaj czytelnych nazw eventów (np.
form_submit,add_to_cart), a w Hotjar filtruj nagrania/mapy po adresie URL lub tytule strony odpowiadającym tym miejscom; - Łączenie wniosków – w GA identyfikuj problem (np. wysoka rezygnacja na płatności), a w Hotjar oglądaj nagrania i mapy, aby zrozumieć przyczynę.
To podejście nie wymaga specjalnej konfiguracji w Hotjar – wystarczy poprawna instalacja obu narzędzi.
6. Integracja Hotjar z Google Analytics – poziom zaawansowany
W praktyce możesz przekazywać do GA informacje o wykorzystaniu Hotjara (np. czy sesja została nagrana), oznaczać sesje niestandardowym wymiarem i budować segmenty, których zachowania później obejrzysz w Hotjar.
6.1. Koncepcja – niestandardowy wymiar dla Hotjar w GA
Cel: w Google Analytics chcesz wiedzieć, czy dana sesja była objęta nagraniem Hotjar albo spełnia kryterium (np. użytkownik zobaczył ankietę).
- utwórz w GA4 niestandardowy parametr/wymiar (np.
hotjar_flag); - skonfiguruj w GTM mechanizm ustawiania zmiennej (np. dataLayer) i wyślij event GA4, gdy Hotjar rozpocznie nagrywanie lub wyświetli ankietę;
- w evencie przekaż parametr, np.
hotjar_flag = 'recorded', aby budować segmenty w GA.
W efekcie w GA zdefiniujesz segment „Użytkownicy z hotjar_flag = recorded” i porównasz ich zachowania liczbowo, równolegle oglądając nagrania w Hotjar.
Uwaga: konkretna implementacja wymaga znajomości JavaScript/GTM i aktualnej dokumentacji Hotjar/GA.
6.2. Łączenie raportów – praktyczne scenariusze
Scenariusz 1: wysoki współczynnik porzuceń koszyka
- diagnoza w GA – strona koszyka ma wysoki odsetek wyjść;
- analiza w Hotjar – uruchom mapę ciepła dla URL koszyka oraz oglądaj nagrania z filtrem „/cart”;
- wnioski i hipotezy – np. przycisk „Dalej” jest za nisko, komunikaty o błędach są niewidoczne.
Scenariusz 2: strona z najwyższą konwersją
- diagnoza w GA – zidentyfikuj najlepiej konwertujące strony wejścia;
- analiza w Hotjar – sprawdź, gdzie użytkownicy klikają i co ich przyciąga;
- wdrożenie – przenieś skuteczne wzorce (układ, treści, CTA) na inne podstrony.
Scenariusz 3: ruch z konkretnego źródła (np. kampania płatna)
- diagnoza w GA – zbuduj segment „Użytkownicy z kampanii X”;
- analiza w Hotjar – filtruj nagrania po parametrach UTM/URL lub osobnym „site”;
- optymalizacja – dostosuj kreację i landing na podstawie obserwacji.
7. Jak efektywnie pracować z Hotjar i GA – praktyczne porady
7.1. Zacznij od problemu z GA, szukaj odpowiedzi w Hotjar
W GA identyfikuj problemy, które wymagają pogłębienia jakościowego:
- strony z wysokim współczynnikiem odrzuceń,
- kroki w lejku z dużą rezygnacją,
- kampanie z niską konwersją.
W Hotjar wykonaj działania pomagające znaleźć przyczynę:
- uruchom mapy cieplne dla tych adresów,
- oglądaj nagrania sesji z filtrem na daną stronę/źródło ruchu,
- dodaj ankiety z pytaniem wprost: „Co przeszkodziło Ci w dokończeniu zakupu?”.
7.2. Przykładowy proces optymalizacji
- Dane ilościowe z GA – cel i punkt wyjścia:
„Formularz kontaktowy ma 10% współczynnik konwersji, chcemy więcej”.
- Dane jakościowe z Hotjar – obserwacje: mapy pokazują, że użytkownicy nie zauważają przycisku „Wyślij”, a na nagraniach wielu zatrzymuje się na polu „Telefon”.
- Hipoteza – przycisk jest mało widoczny, pole telefonu zbyt agresywne/obowiązkowe.
- Zmiana – wzmocnij kontrast i pozycję CTA oraz oznacz pole telefonu jako nieobowiązkowe.
- Pomiar – w GA obserwuj wzrost konwersji, w Hotjar potwierdź lepszy „flow” użytkowników.
8. Wersja darmowa vs płatna Hotjar
Poniższa tabela ułatwia szybkie porównanie planów:
| Plan | Sesje i nagrania | Mapy/ankiety | Zespół i funkcje | Koszt |
|---|---|---|---|---|
| Darmowy | ograniczone limity, | ograniczona liczba aktywnych elementów, | podstawowe funkcje; wystarczający na start, | 0 PLN. |
| Płatny | wyższe limity nagrań i sesji, | więcej jednocześnie aktywnych map/ankiet, | więcej członków zespołu i zaawansowane integracje, | od kilkunastu euro/mies. |
9. Najczęstsze błędy i dobre praktyki
9.1. Błędy
- traktowanie Hotjar jako zamiennika GA – to narzędzie uzupełniające, nie zastępujące,
- losowe oglądanie nagrań bez konkretnego pytania badawczego,
- brak filtrów – oglądanie wszystkiego naraz zamiast skupienia na kluczowych stronach/źródłach,
- ignorowanie RODO – nagrywanie pól z danymi wrażliwymi bez maskowania.
9.2. Dobre praktyki
- zanim uruchomisz nagrania, odpowiedz: „co chcę się dowiedzieć?”,
- zawsze zestawiaj wnioski z Hotjar z danymi GA – decyzje opieraj na liczbach i obserwacjach,
- regularnie przeglądaj nagrania z konkretnych segmentów (np. mobile, nowe kampanie),
- planuj testy A/B na podstawie obserwacji z Hotjar.
