Optimera din hemsida med Hotjar

Antalet verktyg, tjänster och hjälpmedel som man kan använda för att göra sin hemsida bättre är många. Hotjar är ett verktyg som kan vara nyttigt för att verkligen förstå besökarens beteende.

Vad är Hotjar

Kort och enkelt beskrivet så fungerar Hotjar som en övervakare på din webbplats. Den spelar in besökares sessioner och kan se var en person klickar. Du kan även få information om var besökare kom ifrån (t ex Google, Facebook eller direk) och vilken typ av enhet personen har. Läskigt?

Lugn! Allting syns inte på Hotjar

Hur skulle det då fungera om t ex en bank skulle ha Hotjars script installerat på sin webbplats? Det har de tänkt på. Du kan aldrig se en persons uppgifter och är det en inloggning så försvinner det från skärminspelningen. Uppgifterna ersätts med asterisker för att garantera besökarens säkerhet och att Hotjar lever upp till GDPR, då t ex ett synligt formulär skulle kunna riskera att bryta mot Dataskyddsförordningen.

Vad kan du göra med Hotjar?

  • Spela in besökares sessioner (besök) för att upptäcka fel och analysera beteenden.
  • Skapa heatmaps för att se hur långt ned besökarna skrollar och se var de klickar någonstans.
  • Analysera formulär på din webbplats.
  • Skapa omröstningar (polls).
  • Använda för att analysera single-page apps.
  • … och mycket mer!

Skapa konto på Hotjar.com

Du kan registrera dig och komma igång helt gratis på www.hotjar.com, men det finns även betalversioner. Det beror helt enkelt på hur många sessioner, heatmaps och funktionalitet du vill få åtkomst till. Välj alltså mellan Basic, Plus och Business.

Installera Hotjar

Hotjar installeras med hjälp av ett script i källkoden på din webbplats. Du kan enkelt implementera Hotjar med hjälp av Google Tag Manager. Du kommer att behöva ett s.k. site ID och det bör ligga till höger i dashboarden när du loggar in.

Olika typer av heatmaps

Scroll heatmaps:
Se hur långt besökare i snitt skrollar på din webbplats. Funkar för mobil, surfplatta och dator.

Move heatmaps:
Den här funktionen finns endast att tillgå för att analysera besök från desktop, d v s en dator, eftersom att den analysera var besökare flyttar muspekaren. Du kan alltså se och jämföra antal click (CTR, Click-Through-Rate) med hur många som hållit muspekaren över en knapp.

Click and tap heatmaps:
Se var besökare klickat på din webbplats. Funkar för mobil, surfplatta och dator.

Skärminspelningar

Se hur besökare interagerar med din webbplats och gör ändringar därefter. Det kan t ex vara saker som är olika för olika enheter och webbläsare.

Omröstningar (polls)

Lägg in små polls som dyker upp när en besökare har varit en viss tid på en landningssida eller skrollat en viss del av sidan. Det kan t ex vara en liten pop-up med en vänlig fråga som “Hej! Behöver du någon hjälp?” eller alternativ “Hej! Vill du bli uppringd eller få ett e-mail av vår kundservice?”.

Formulär

Har du formulär på din webbplats? Då kan du analysera hur många som droppar av för varje steg. Märker du t ex att det är en signifikant andel som inte går vidare från ett visst steg till ett annat kanske du bör fundera på om det steget behövs eller om du kan göra något annorlunda?

Vad krävs av min webbplats för att lycka med Hotjar?

Ingenting! Du behöver bara följa instruktionerna på Hotjars hemsida och baskunskaper i hur du implementerar scriptet. Hotjar funkar tillsammans med t ex:

  • WordPress
  • Google Tag Manager
  • Hubspot
  • Magento
  • Shopify
  • Squarespace
  • Drupal
  • Instapage
  • Joomla
  • LightCMS
  • Prestashop
  • … och många fler.

7 tips efter att ha använt Hotjar

På Qred har vi använt Hotjar i princip sedan starten. Det är av den anledningen att vi vill göra en så bra upplevelse och kundresa som möjligt. Inget annat. Under den här tiden har vi lärt oss ett och annat som vi vill dela med oss av.

  1. Gör stora knappar!
    Stora, synliga och klickbara knappar är A och O på Internet. Vissa knappar kan vara tillräckligt stora för att synas, men sen är inte hela knappen klickbar utan endast mitten eller texten. Irriterande för besökaren, inte sant? En annan del i att optimera din knappar är att välja rätt färg. Då är inte en stor orange knapp (gammal konverteringsklassiker) alltid rätt väg att gå. Se till att ta en titt på dina färger, se vilken som är dominant och hitta en bra komplementfärg som färg till dina  Call-To-Actions.
  2. Leverera tydliga felmeddelanden!
    Ska man fylla i ett formulär eller liknande så bör man vänta med att låta fältet bli grönt eller rött till efter man har skrivit klart i det fältet. Låt inte ett helt fält bli rött, bara för att man precis har börjat skriva i en e-mailadress, men inte lagt till @gmail.com eller annan ändelse.
  3. Minska friktionen och ta bort trösklar!
    Less is more – ta bort allt som inte tillför ett värde för dig eller besökaren. För du vill väl inte gå runt hemma och slå tårna i höga trösklar överallt? Be endast om den information som du verkligen behöver och strunta i resten. Även om du tror att det kommer att ge bättre leads eller kunder.
  4. Se hur din webbplats ser ut på olika enheter!
    Du sitter antagligen inte med 3-4 olika iPhones och 3-4 olika Androidtelefoner framför dig när du utvecklar och designar din webbplats. Då kan det vara perfekt att låta besökare göra det åt dig! Du ser vilken enhet och webbläsare som används i högerkolumnen av varje skärminspelning.  
  5. Du är inte besökaren!
    Chansen är stor att du kan varenda litet skrymsle som finns på din webbplats – men vet kunden allt om din webbplats, produkt/tjänst eller annat? Knappast! Var ödmjuk och skriv copy (texter) på ett språk som är enkelt och tydligt.
  6. Above the fold är superviktigt!
    Det som syns i fönstret eller skärmen utan att besökaren behöver skrolla kallas för above the fold. Göm alltså inte dina USP:ar (Unique Selling Points), formulär eller Call-To-Actions under the fold.
  7. Gör fler användartester!
    Hotjar bör endast vara ett av flera hjälpmedel för att ta reda på hur besökares beteenden ter sig på din webbplats. Se till att använda annan data (från t ex Google Analytics), A/B-tester, vanliga användartester, m.m.

Höj konverteringen med rätt färger

Vi har, för inte så länge sedan, skrivit ett inlägg om vilka färger man ska använda. Det beror helt på vilken färg din logotyp har, vilken bransch du verkar inom och vad du vill förmedla för känsla.

Tips! Läs artikeln Vilken färg ska jag ha i mitt företag?

Fun fact!
Efter lite efterforskningar har vi förstått att engelskans scroll bör översättas till skrolla eller rulla. Vi har därför valt att använda skrolla när vi beskriver hur någon använder den funktionen på både mobilen, surfplattan och datorn. Läs mer på Institutet för språk och folkminnen om scroll.

Lycka till med att optimera din hemsida!
/Teamet på Qred

Ansök
nu