En knapp mitt på sidan lyser rött i klickkartan medan knappen bredvid knappt får någon färg, och det ser ut som ett designproblem. Men en heatmap ritas ovanpå en enda skärmdump, och en sida som byter layout mellan mobil och dator har inte en layout utan två. Blandas de två layouterna, beskriver kartan en sida som ingen besökare har sett. Microsoft Clarity ritar en karta per enhet som standard, medan Hotjar och Mouseflow visar en enhet i taget och kräver att du väljer själv. Samma uppdelning är värd att göra för tre segment till: nya mot återkommande besökare, trafikkälla och inloggade mot utloggade.
Varför en sammanslagen scrollkarta beskriver en sida ingen sett
Ta en produktsida med tre spalter på datorn: bild till vänster, pris och köpknapp i mitten, leveransvillkor till höger. På mobilen läggs samma tre spalter under varandra. Köpknappen, som på datorn syns utan att någon scrollar, hamnar där en hel skärmhöjd ner. Leveransvillkoren, som på datorn ligger i höjd med bilden, hamnar sist på sidan.
Scrollkartan mäter hur långt ner besökarna kommer som en andel av sidans höjd, inte i pixlar. Hotjar registrerar den djupaste punkt varje besökare når som en procentsats av sidan, och Clarity redovisar andelen besökare för var 5 procent av sidhöjden. En andel av höjden pekar bara på rätt ställe om alla besökare fått samma sida. När hälften av besökarna såg tre spalter och hälften en spalt, hamnar samma procentsats nedanför alla tre spalterna på datorn, men mitt bland de staplade spalterna på mobilen. Medelvärdet pekar då på en punkt som inte finns i någon av layouterna. Hotjar skriver samma sak om kartor som byggs över flera sidor på en gång: skiljer sig sidorna åt i storlek, blir scrollkartan inte rättvisande.
Klickkartan klarar sig bättre, eftersom både Hotjar och Clarity räknar klicken per element och inte per position på skärmen. Klicket bokförs på köpknappen oavsett var den råkade ligga. Kartan ritas ändå ovanpå en skärmdump från en av layouterna, och elementen beter sig olika i de två. Menyn som ligger utfälld på datorn är ihopfälld bakom en ikon på mobilen. Ett element som bara reagerar på att muspekaren vilar över det svarar inte på ett tryck. Trycket blir ett dött klick, ett klick som inte leder någonstans. Sådana klick räknar verktygen för sig. Rörelsekartan har inget att visa på mobilen, för den följer en muspekare. Vad var och en av de tre kartorna mäter står i guiden om klickkarta, scrollkarta och rörelsekarta.
Hotjar, Clarity och Mouseflow håller isär enheterna på olika sätt
Clarity, Hotjar och Mouseflow håller isär enheterna. I Hotjar byter du enhet med ikonerna i skärmdumpens nedre vänstra hörn, och skärmdumpen tas i tre bredder: 1 280 pixlar för dator, 800 för surfplatta och 380 för mobil. Clarity genererar som standard en egen karta för pc, surfplatta och mobil. Mouseflow filtrerar kartlistan på enhet, och den interaktiva kartan, som läggs ovanpå din egen sajt, visar datorns version tills du byter vy i webbläsaren.
Blandningen kommer tillbaka på två vägar. Den första är kartan över en grupp av sidor. Den byggs på alla adresser som innehåller ett visst ord i stället för på en enda sida. Då läggs data från flera sidor på en och samma skärmdump. Hotjar varnar självt för den scrollkartan. I en webbutik förtjänar kassan sällan den första kartan. Mer om det står i guiden om var du sätter din första heatmap i en webbutik. Den andra vägen går inom en enhetsklass. Klassen sätts efter vilken sorts apparat besökaren har, medan layouten byter efter hur brett fönstret är, och de två gränserna sammanfaller inte alltid. En liggande surfplatta kan få datorns layout, och ett halvbrett webbläsarfönster på en stor skärm kan få surfplattans. Hotjar och Mouseflow har ett filter på skärmupplösning.
Fyra segment ger olika heatmaps på samma sida
Enheten är det första segmentet, och det enda som verktygen delar upp åt dig. Tre till förskjuter bilden på samma sätt: två grupper med olika beteende läggs ihop till ett medelvärde som inte beskriver någon av dem.
Varför nya och återkommande besökare ger olika klickkartor
Den som varit på sidan förut behöver inte leta efter inloggningen och kundvagnen, medan den som kommer första gången läser sig fram och trycker på det som ser klickbart ut. I en gemensam klickkarta får inloggningsknappen därför en värme som speglar hur många som redan är kunder, inte hur lätt den är att hitta. Hotjar ger just den jämförelsen som exempel på vad filtret för nya mot återkommande besökare är till för: att se om de återkommande hittar inloggningsknappen tillräckligt lätt. Clarity har samma uppdelning under användartyp, och Mouseflow under besökartyp.
Besökare från annons, sökmotor och nyhetsbrev scrollar olika långt
En besökare från en betald annons har sett ett löfte i annonsen och letar efter det på sidan. En besökare från en sökmotor har skrivit in en fråga, och en från ett nyhetsbrev har redan läst erbjudandet. Lägger du ihop dem, visar scrollkartan hur långt en genomsnittlig besökare kommer. Men når annonsens besökare fram till den knapp annonsen lovade? Hotjar använder det exemplet i sin dokumentation: filtrera på kampanj och se om besökarna scrollar ner till uppmaningen. Filtret heter trafikkanal och bygger på hänvisande adress och UTM-taggar. Clarity filtrerar på källa, medium, kampanj och kanal. Mouseflow sorterar sessionerna efter om de kom via sökmotor, länk, e-post, internt eller utan hänvisning. Klickar besökaren på en länk som hoppar längre ner på sidan, räknar Hotjar den punkten som nådd, eftersom scrolldjupet mäts som den lägsta punkt besökaren nått.
Inloggade besökare ser en annan sida än utloggade
Samma adress är två olika sidor beroende på om besökaren är inloggad. Den utloggade ser knappen Logga in, den inloggade ser sitt namn och en meny. Den ena ser listpriser, den andra kanske sina avtalade priser. I en gemensam karta får knappen Logga in en utspädd klickandel, eftersom en del av besökarna aldrig såg någon sådan knapp. Verktyget kan inte se skillnaden själv, för inloggningen är sajtens sak och inte webbläsarens. Du får berätta det: i Hotjar med användarattribut som skickas via Identify-API:t, i Clarity med en egen tagg som sätts med en rad kod på sidan, och i Mouseflow med egna taggar eller variabler. Hotjar visar dessutom bara klick på element som syns i skärmdumpen, så en meny som bara inloggade ser kan sakna sina klick i kartan trots att klicken finns med i CSV-exporten.
I Hotjar hör filtren på enhet, besökartyp, trafikkanal och användarattribut till de betalda nivåerna, enligt Hotjars egen dokumentation.
Så jämför du två segment i stället för att blanda dem
Clarity har ett jämförelseläge som lägger två kartor bredvid varandra, med var sin enhet, var sitt segment eller var sin filtrering. Längst ner i jämförelseläget visas sidvisningar och klick för varje halva. Mouseflow öppnar två kartor i samma vy, med egna reglage för enhet, filter och period i varje halva. Mouseflow nämner jämförelsen mobil mot dator för en och samma webbsida som ett av exemplen. I Hotjar sparar du kartan med filtren och öppnar nästa sparade karta bredvid.
Delar du kartan i två halvor, delar du också underlaget. Ett segment med få sessioner ger en karta som ser lika färdig ut som en karta byggd på tusentals. Det beror på att färgskalan spänner från kartans varmaste till dess kallaste punkt oavsett hur många klick den bygger på. Läs därför av antalet sidvisningar och klick för varje halva innan du jämför dem. Hur många som behövs per karttyp står i artikeln om hur många sessioner en heatmap behöver.
Nästa gång en knapp lyser rött: läs av vilken enhet och vilket segment kartan visar, och rita samma karta för den andra gruppen innan du ändrar något i designen.
Senast faktagranskad: 8 september 2026. Senast uppdaterad: 9 september 2026