Raz na jakiś czas zdarza się, że natrafiasz na coś, co zmienia to jak wygląda Twój biznes. Może to być osoba, która staje się Twoim mentorem. Może to być też inwestor, który zapewnia Ci fundusze do rozwoju sklepu. Może to jednak też być narzędzie – aplikacja, która zmieni to, jak patrzysz na Klientów. System, który wskaże Ci, gdzie są błędy na Twojej stronie. Witryna, która powie Ci: “tu masz problem, popraw go”. Poznajcie HotJar. Jedno z najważniejszych narzędzi dla właścicieli sklepów online.
Czym jest HotJar?
Zacznijmy od tego, czym nie jest. Nie jest niestety magicznym pudełkiem, które automatycznie zamieni Twój sklep w maszynę generującą sprzedaż. Nie jest też systemem, który zrobi wszystko za Ciebie. Pomijając jednak te drobne niedociągnięcia, jest to genialna platforma.
HotJar odpowiada za kilka rzeczy. Pozwala na nagrywanie ruchu użytkowników po stronie (w tym wypadku po sklepie). Pozwala na śledzenie ich ruchów myszki, a także kliknięć. Pozwala na mierzenie opuszczeń poszczególnych stron, a także na sprawdzenie, w którym miejscu formularzy, użytkownicy się gubią.
Poniżej znajdziecie 7 głównych funkcji:
- Nagrywanie map cieplnych
- Nagrywanie sesji z użytkownikami sklepu
- Mierzenie klikalności w dane elementy sklepu (nawet w te nieklikalne)
- Sprawdzenie jak daleko scrollują nasi użytkownicy
- Sprawdzenie jaki jest średni page-fold u naszych Klientów
- Sprawdzenie, w którym etapie procesu gubimy Klientów
- Sprawdzenie, które miejsca formularza najbardziej “męczą” naszych Klientów
Poza tymi elementami HotJar ma jeszcze dodatkowy zestaw funkcji:
- Tworzenie ankiet, pytań i badań zadowolenia Klienta
- Zdobywanie użytkowników do zaawansowanych badań
Jak widzicie, system potrafi całkiem dużo. Co więcej, ma też wersję darmową do 2000 odwiedzin dziennie. Pierwszy płatny pułap (do 10.000 odwiedzin dziennie) też nie jest najdroższy, bo kosztuje 29 Euro / miesiąc.
Jak zainstalować HotJar
Wygląda na to, że twórcy tego narzędzia postawili sobie za cel, żeby zaprojektować najłatwiejszy w obsłudze system, jaki można zrobić. Naprawdę – każdy element interfejsu jest banalnie prosty, oczywisty i w miejscu, gdzie byśmy go szukali.
Sprawa wygląda podobnie z instalacją. Mamy więc dwie możliwości. Pierwszą jest skopiowanie kodu i wklejenie go do sekcji <head></head> strony. Jeżeli nie wiesz jak to zrobić, powinieneś poprosić o pomoc programistę. Druga opcja jest jednak jeszcze łatwiejsza – HotJara możemy dodać za pomocą Google Tag Managera. Ja poszedłem właśnie tą drogą – zajęło mi to ok. 2 minut. Wystarczy wejść w panel GTM, dodać nowy tag (można HotJar’a wybrać z listy), a następnie wkleić identyfikator, który nam podali. Koniec. System jest gotowy do pracy.
Jedną rzeczą, o której chciałbym wspomnieć w tym miejscu, jest upewnienie się, że nasze IP nie jest zbierane do wyników. Można to zrobić w ustawieniach systemu (settings>>IP blocking). Możemy tam dodać dowolne IP, które ma nie być uwzględniane ręcznie, ale twórcy narzędzia w celu ułatwienia nam życia, zostawili też przycisk, który po kliknięciu sam doda nasze obecne IP. Pamiętajcie, tylko żeby zrobić to raz w biurze, a raz w domu – tym samym nie będziecie zbierali danych z obydwu miejsc.
Jak skonfigurować HotJar
Zła wiadomość jest taka – każdą funkcję trzeba skonfigurować samodzielnie. Dobra jest taka, że zajmuje to sumarycznie ok. 5–10 minut. Jeżeli nie wiesz nic o tym systemie, dodatkowo jesteś osobą nietechniczną, może Ci to zająć odrobinę więcej – ciężko mi sobie jednak wyobrazić, żeby było to więcej niż 30 minut.
Ponownie chapeau bas dla twórców narzędzia – każda sekcja systemu zawiera 2–3 minutowe video, które tłumaczy, co należy zrobić.
Do zrobienia mamy kilka rzeczy:
Sekcja heatmaps
Na początek dodajmy mapę cieplną. Wchodzimy w “Heatmaps”. Klikamy w “New heatmap”, a następnie nadajemy jej nazwę. Warto w nazwie umieścić dla nas jakąś informację, która zdefiniuje jaką stronę badamy. Pamiętajcie, że docelowo powinniśmy stworzyć jedną mapę cieplną dla każdej ze stron. M.in. powinny to być:
- Strona główna
- Strona kategorii
- Strona produktu
- Koszyk
- Wszystkie ekrany kasy
- Strona kontaktu
- Strona wyników wyszukiwania
Następnie określamy liczbę wyświetleń, które mają być zliczone w mapie. Proponuję zostawić tutaj standardowe ustawienie 2000 wyświetleń.
Kolejny krok jest kluczowy – tutaj określamy jakie strony mają być zliczane. Mamy do wyboru pojedynczą stronę, podobne strony (np. wszystkie produkty o podobnym układzie), albo strony zawierające specjalny kod (to zostawmy dla programistów).
Musimy wkleić adres strony, która nas interesuje, a także określić jak ma działać system: zbierać nagrania tylko dla tej strony, dla stron, których link zaczyna się od danej strony, ale możemy też zastosować wyrażenia regularne. W większości przypadków nie jest to konieczne, możemy to ponownie zostawić programistom.
I tyle. Klikamy “stwórz mapę cieplną” i gotowe – wyniki zaczynają się zbierać.
Sekcja recordings
Tutaj ustawiamy nagrywanie sesji. Ponownie mamy video, które wyjaśnia jak ustawić daną sekcję. Ponownie jest to też bardzo proste. Robimy to tylko raz, bo system będzie nagrywał wszystkie strony. Konfiguracja wygląda podobnie, jak poprzednia sekcja, warto tylko przyjrzeć się 3 funkcjom, które system pozwala nam wybrać:
- Nie nagrywaj sesji krótszych niż 30 sekund
- Nie nagrywaj sesji bez kliknięć i interakcji
- Nagrywaj wpisywane dane
Chciałbym się pochylić nad ostatnim punktem. Warto go zaznaczyć. HotJar i tak ma wbudowany mechanizm, który ukryje dane takie jak hasło czy numery kart kredytowych, ale wiedza o tym, co użytkownik wpisał, jest kluczowa dla oceny, czy pola formularzy są dobrze zaprojektowane. Możesz dzięki takim nagraniom zobaczyć, że użytkownicy wpisują imię i nazwisko w jednym polu, żeby potem skopiować nazwisko do innego pola, ponieważ wcześniej go nie zauważyli. Możesz dowiedzieć się też, że część osób próbuje wpisać dane w jakimś określonym formacie (np. numer telefonu), a system mu na to nie pozwala (z powodu tzw. maski). Obserwuj i notuj. Notuj i obserwuj.
Sekcja funnel
Tę sekcję ustala się bardzo prosto – podstawowa wersja będzie Wam znana z Google Analytics. Wystarczy nazwać ścieżkę, a następnie wpisać adresy, które mamy mierzyć. W przypadku e-commerce zazwyczaj sprowadza się to do mierzenia porzuceń ścieżki zakupowej. Możemy np. zrobić lejek dla naszej kasy (jeżeli jest wielokrokowa) i zbadać dokładnie, w którym kroku tracimy ile użytkowników. Możemy też sprawdzić, jak to wygląda dla całego sklepu (czyli ścieżka strona głowna>kategoria>strona produktu>koszyk>kasa>strona podziękowania). Można też zliczać inne cele, takie jak zapisy do newslettera.
W zależności od tego, co chcemy uzyskać, możemy zdefiniować każdy z kroków jako dokładny adres (np. strony głownej albo strony koszyka – one zazwyczaj mają niezmienny adres URL). Niektóre z nich będą wymagały jednak opcji “starts with/ends with” albo “contains”, które pozwolą nam zidentyfikować wszystkie strony, które są zgodne z danym wzorem. Np. jeżeli chcemy obserwować wszystkie produkty z kategorii “obrusy”, możemy wpisać jako krok www.domena.pl/obrusy/ – niezależnie od tego, na jaki produkt z tej kategorii wejdzie użytkownik – wszystkie zliczą się do danego kroku. System ponownie pozwala nam również, na zdefiniowanie zapytań opartych o wyrażenia regularne, dzięki czemu możemy wyszukać np. konkretne parametry takie jak: www.domena.pl/obrusy/produkt?id=X, gdzie X jest dowolną liczbą.
Sekcja forms
Tutaj możemy zbadać nasze formularze – system HotJar automatycznie wykryje formularze dostępne na danej stronie (wystarczy podać adres) i pozwoli na opisanie ich “ludzkim” językiem. Jedna uwaga – niestety zdarza się, że nie jest w stanie poprawnie zidentyfikować danego formularza, jeżeli nie jest on napisany zgodnie z ogólnie przyjętym standardem. To jednak wyjątek od reguły.
Sekcja dodatkowych narzędzi
Te narzędzia musicie poznać sami, aczkolwiek w równie prosty sposób można dzięki HotJar’owi stworzyć ankiety, wyskakujące pytania otwarte, a także wyjątkowo ciekawą opcję “opinii”, która pozwala użytkownikowi, nie tylko na określenie co mu się podoba/nie podoba na stronie, ale umożliwia też na dodanie zdjęcia danego elementu strony, który był problematyczny. Oznacza to, że użytkownik może nam zidentyfikować dokładne miejsce, gdzie napotkał problem.
Wspaniałym narzędziem jest polls, gdzie możemy stworzyć małe, proste, nieinwazyjne pytania dla naszych Klientów. Można zdefiniować, jak będą wyglądały, a także gdzie będą się pojawiały. Można też określić, ile razy mają się wyświetlać danemu użytkownikowi i kiedy. Jest to wspaniałe narzędzie, żeby zapytać naszych Klientów na stronie sukcesu, “Czy powinniśmy coś poprawić w sklepie?” albo “Powiedz nam coś o sobie”. Taka wiedza może być dla Was rakietą, która zabierze Wasz biznes na wyżyny.
Jak korzystać z HotJar?
Pozostaje więc pytanie – po co to wszystko? Tak jak mówiłem na początku – HotJar nie zrobi za Was wszystkiego, nie zoptymalizuje strony, ani nie poprawi jej wyglądu. Powie Wam jednak, co powinniście zrobić.
Mapy cieplne powiedzą Wam, gdzie użytkownicy sklepu klikali. Sprawdźcie, czy nie ma żadnych elementów, które są często klikane, a nie są do niczego podlinkowane. Sprawdźcie, czy przypadkiem nie ma elementów, które Wy chcieliście wyeksponować, a na które nikt nie reaguje. Sprawdźcie, które elementy menu są klikane najczęściej i wyciągajcie wnioski.
Mapy cieplne
Mapy cieplne ruchu użytkowników powiedzą Wam, gdzie podążał wzrok (a właściwie myszka) użytkownika. Dzięki temu wiecie, na co patrzyli, na czym byli skupieni. Czy ich wzrok kierował się w miejsca, gdzie chcieliście? Jeżeli widzicie, że dane miejsce ma dużo ruchu, to pewnie warto umieścić tam kluczowe elementy. Być może warto zobaczyć czy nie ma elementów, które nikogo nie interesują i tylko zabierają miejsce?
Analiza page-fold jest kluczowa. Powie Wam nie tylko, gdzie średnio kończy się ekran Waszych użytkowników, ale też (przede wszystkim), ile procent osób widzi daną rzecz. Jest to wspaniała nauka tego, jak ludzie przeglądają strony internetowe. Zobacz, co widzi 100% osób, które wejdzie na daną stronę. Zobacz, co widzi 50%. Zobacz, ile osób trafia do stopki.
Nagrania
Musisz poczekać kilka dni, tygodni, a być może nawet około miesiąca na dane (zależy to od ruchu w Twoim sklepie). Później możesz jednak oglądać, jak użytkownicy zachowują się w Twoim sklepie. Spędź chwilę, oglądając pełne nagrania, żeby zrozumieć, co widzisz. HotJar pozwoli Ci ominąć pauzy (czyli momenty bez interakcji i ruchu), pozwoli Ci też przyspieszyć nagranie, żebyś nie musiał tracić nieskończonych godzin na ich oglądanie. Będziesz mógł też komentować konkretne zachowania użytkowników, a potem podejrzeć je na liście.
To jednak początek – szkoda życia, żeby oglądać tysiące nagrań naszych użytkowników, aczkolwiek warto poświęcić kilka godzin, żeby wyłapać różne błędy (spisuj je koniecznie – łatwo o nich zapomnieć). W momencie, kiedy już mamy listę zauważonych błędów/problemów w sklepie, a także kiedy przeanalizowaliśmy lejek i zidentyfikowaliśmy problematyczne elementy, możemy wrócić do nagrań i korzystając z filtrów po prawej – potwierdzić, czy na ten błąd natrafiało więcej użytkowników.
Dodam jeszcze jedną rzecz – HotJar przechowuje nagrania i dzieli je w zależności od urządzenia. Możesz więc doskonale zobaczyć jakie problemy występują na którym urządzeniu.
Lejki i formularze
Lejki i formularze działają podobnie – pokazują Ci ścieżkę Klienta. Możesz dzięki nim zobaczyć, ile osób gubi się w którym kroku i gdzie tracisz najczęściej Klientów. Co ciekawe HotJar zapewnia też przycisk, który przeniesie Ciebie do wyfiltrowanej listy nagrań, które pokazują te zachowania. Co to dla Ciebie znaczy?
Możesz na przykład zobaczyć, że tracisz sporo Klientów w 2 z 4 ekranów kasy. Możesz wejść w nagrania i zobaczyć, że użytkownicy scrollują w okolicach dostawy i po chwili opuszczają proces. Co to może oznaczać? Prawdopodobnie oczekiwali innych metod dostawy albo darmowej formy dostawy. Następnym krokiem będzie potwierdzenie tej hipotezy (możesz to zrobić, np. zadając pytanie, albo dając pole do wyrażania opinii/uwag).
Podsumowanie
To już wszystko – jak widzicie, narzędzie jest proste, nie wymaga specjalistycznej wiedzy, a daje niesamowity wgląd w to, z jakimi problemami borykają się nasi Klienci. Wprowadź zmiany. Ponów obserwacje. Obserwuj konwersję. Powoli, drobnymi kroczkami uda Ci się zyskać zarówno więcej zamówień, jak i zadowolonych Klientów. W końcu Twój sklep będzie dla nich przyjemnym doświadczeniem.
Dzięki wielkie za przeczytanie artykułu. Rzadko kiedy narzędzie powoduje u mnie takie emocje, ale mało narzędzi też jest tak doskonale zaprojektowanych. Jestem ciekaw czy wykorzystują HotJara do wprowadzania zmian w swoim własnym narzędziu:)
Część z Was może też się zastanawiać czy mam coś za promowanie tej usługi. Otóż – niespecjalnie. Program afiliacyjny HotJar umożliwia mi wygranie bluzy albo w najlepszym wypadku darmowego konta biznesowego. Uważam jednak, że jest to jedno z niewielu narzędzi, które mogę polecić ze 100% pewnością.