Heatmapy i ich implementacja na dynamicznych stronach

Heatmapy i ich implementacja na dynamicznych stronach
Oceń artykuł!

Myśląc o optymalizacji naszego serwisu, powinniśmy brać pod uwagę dwa obszary. Po pierwsze istotne jest, aby sprowadzić na stronę ruch. Kolejnym, równie ważnym elementem, jest wygenerowanie na podstawie pozyskanego ruchu konwersji. Jak skorzystać na jednym i drugim?

Myśląc o pierwszym obszarze, często bierzemy pod uwagę optymalizację kanałów mediowych, próbujemy zrozumieć który segment przynosi nam największe zyski i inwestujemy środki, aby pozyskać większą ilość użytkowników. Czasem jednak większe korzyści może przynieść nam wykorzystanie użytkowników, których już mamy na stronie. Musimy tylko zoptymalizować naszą stronę w taki sposób, by użytkownicy częściej konwertowali.

Zazwyczaj w takim momencie tworzymy lejek konwersji, który pozwoli sprawdzić na którym ekranie naszej strony użytkownicy mają problemy i kończą swoją podróż z naszym serwisem. Po takiej krótkiej analizie jesteśmy już w stanie ocenić, na których podstronach występują problemy. Możemy jednak dalej nie wiedzieć, czego dokładnie dotyczą. Wiedza, że na danej podstronie wielu użytkowników opuszcza nasz serwis, może nie wytłumaczyć nam dlaczego tak się dzieje. Nie jesteśmy też w stanie ocenić, które elementy tej podstrony mogą być niejasne, frustrujące – co za tym idzie – wymagające optymalizacji.

Z pomocą mogą nam wówczas przyjść heatmapy, które zwizualizują nam z którymi elementami strony użytkownicy najczęściej wchodzą w interakcje. Mapy te mogą być różnego rodzaju, na przykład:

  • clickmapy – które powiedzą nam, gdzie użytkownicy klikają,
  • movemapy – które powiedzą nam, w jakich obszarach użytkownicy nawigują kursorem,
  • scrollmapy – które powiedzą nam, jak głęboko użytkownicy przewijają naszą podstronę.

Aby stworzyć heatmapy naszego serwisu, możemy zastosować szereg narzędzi. Różnią się one jednak często możliwościami. W artykule chciałbym przybliżyć trzy z nich: Visual Website Optimizer, Hotjar i Zarget.

Visual Website Optimizer (http://vwo.com)

VWO oferuje nam łatwe w konfiguracji narzędzie, które za pomocą kilku kliknięć pozwoli nam zaimplementować heatmapy. Narzędzie ma jednak także swoje ograniczenia. Heatmapy możemy ustawić tylko podając konkretne urle podstron, które chcemy monitorować. Zatem jeżeli strona ma dynamiczne elementy, które pojawiają się bez odświeżania strony i bez zmiany urla, to nie będziemy w stanie ich śledzić i tworzyć dla nich heatmap.

Niestety takie przypadki są częste. Wiele sklepów internetowych korzysta z bibliotek JavaScriptowych, w których cała ścieżka konwersji składa się z dynamicznych, wirtualnych odsłon, dla których nie będziemy w stanie założyć osobnych heatmap w VWO.

Hotjar (http://hotjar.com)

Z pomocą może nam wtedy przyjść Hotjar, który potrafi tworzyć heatmapy na dynamicznych stronach. Mechanizm tworzenia takich heatmap polega wtedy na tym, że nowa mapa powstaje w momencie wywołania JavaScriptowego triggera. Zatem, na przykład, po kliknięciu w przycisk „Dalej”, możemy dynamicznie stworzyć w Hotjarze nową heatmapę dla dynamicznie wczytanego następnego ekranu, pomimo tego, że url strony się nie zmienił.

Trigger to natomiast krótki fragment kodu JavaScript, który możemy zaimplementować przy istotnym dla nas zdarzeniu na stronie:

hj(‚trigger’, ‚Dalej’);

Możemy go wstawić zarówno w kodzie strony, jak i przy użyciu, na przykład, Google Tag Managera.

Następnie w narzędziu opisujemy, że nowa heatmapa ma być stworzona po odpaleniu się triggera:

Hotjar jest zatem o wiele bardziej elastycznym narzędziem, które pozwoli nam na wykorzystanie heatmap na większości stron.

Zarget (http://zarget.com)

Co jednak jeżeli dynamicznych elementów na stronie byłoby bardzo dużo? Czy dla każdego kliknięcia na stronie musimy tworzyć osobny trigger?

Na szczęście istnieje narzędzie, które zrobi to za nas. Zarget, o którym mowa, potrafi tworzyć heatmapy, które dynamicznie monitorują wszelkie elementy na stronie. Dzięki temu nie musimy się martwić, o implementacje tych wszystkich zdarzeń we własnym zakresie. Zarget radzi sobie z rozwijanymi menu, wszelkiego rodzaju sliderami, co w wielu przypadkach znacznie ułatwia skonfigurowanie całego badania.

Natomiast jeżeli posiadamy jeszcze bardziej zaawansowane potrzeby co do naszych heatmap, to w narzędziu mamy również dostęp do triggerów. Działają one na podobnej zasadzie, jak te w Hotjarze.

Każde z opisanych w artykule narzędzi posiada bezpłatną wersję demo. Jeżeli zatem uznacie, że heatmapy mogą Wam pomóc w zrozumieniu Waszych użytkowników, zapraszamy do testowania.

 

Bartosz Ziembiński
Analityk Mediowy w K2 Media S. A.
Analityk z wykształcenia i zamiłowania. Z tym, że analizy lubi prowadzić z różnych perspektyw. Studiował zarówno informatykę, jak i socjologię. Dziedziny te połączył później w swojej pracy naukowej, gdzie zajmował się modelowaniem rozprzestrzeniania się emocji w społecznościach i rozwiązywaniem konfliktów. W K2 analityk mediowy i webowy, który bada, optymalizuje i stara się tworzyć internet jeszcze ciekawszym miejscem.