Hur man ställer in WordPress Heatmaps (2 enkla sätt)

När jag först började arbeta med mina WordPress-webbplatser gissade jag mest vad besökarna ville ha. Det var inte förrän jag började använda värmekartor som jag verkligen förstod hur folk interagerade med min webbplats – var de klickade, hur långt de scrollade och vad som faktiskt fångade deras uppmärksamhet.

Om du försöker förbättra din WordPress-webbplats men inte är säker på vad som fungerar och vad som inte gör det, kan värmekartor ge dig några svar.

Efter att ha testat flera verktyg har jag begränsat det till två enkla sätt att ställa in värmekartor i WordPress: Microsoft Clarity och UserFeedback.

I den här steg-för-steg-guiden kommer jag att visa dig hur du ställer in båda metoderna, så att du har de verktyg du behöver för att göra datadrivna förbättringar på din webbplats. 🔥

Varför behöver du ställa in WordPress värmekartor?

Värmekartor visar dig exakt hur människor interagerar med din webbplats, så att du kan förbättra ditt innehåll, din layout och dina konverteringar baserat på verkligt besökarbeteende. De använder färgkodning för att markera de mest och minst aktiva områdena på en sida:

• Rött, orange och gult ("heta" områden) visar var besökare klickar, trycker eller spenderar mest tid.
• Blå och gröna ("kalla" områden) visar platser som får lite eller ingen uppmärksamhet.

Genom att se denna aktivitet kartlagd på din WordPress-webbplats kan du sluta gissa om vad som fungerar och vad som inte gör det. Med andra ord, värmekartor hjälper till att ta bort gissningarna genom att ge dig tydliga insikter i besökares beteende.

Värmekartor hjälper dig att svara på viktiga frågor, som till exempel:

• Klickar folk på dina CTA-knappar?
• Scrollar de ner tillräckligt långt för att se ditt innehåll?
• Klickar de på saker som inte gör något?

Med denna information kan du göra smarta ändringar på din webbplats. Du vet vad du ska fixa, vad du ska flytta och vad du ska förbättra.

Du kan använda den insikten för att få fler läsare, öka försäljningen eller öka förfrågningar från potentiella kunder. Allt genom att göra enkla ändringar baserat på hur folk faktiskt använder din webbplats.

I följande avsnitt kommer jag att visa dig hur du ställer in värmekartor i WordPress med hjälp av två av de bästa verktygen för värmekartor och sessionsinspelning. Ett är ett helt gratis analysverktyg, medan det andra är ett premiumalternativ med extra funktioner.

Använd gärna hopplänkarna nedan för att gå till din föredragna metod:

Steg 0: Förbereda din WordPress-webbplats för värmekartor

Innan du lägger till värmekartor på din WordPress-webbplats är det viktigt att förbereda din webbplats ordentligt. Att vidta några försiktighetsåtgärder hjälper till att förhindra problem och säkerställa att du får de mest exakta uppgifterna.

Om du lägger till värmekartor på din livewebbplats för första gången är det en bra idé att testa allt på en staging-webbplats först. Spårningsskript kan ibland krocka med cachning eller plugins för hastighetsoptimering, så säker testning säkerställer att din livewebbplats förblir snabb och felfri.

En staging-webbplats är en privat klon av din live-webbplats där du säkert kan testa nya funktioner som värmekartor, utan att riskera några störningar för de verkliga besökarnas användarupplevelse.

När du är nöjd med ändringarna kan du publicera dem på din riktiga webbplats.

Om du använder Bluehost kan du skapa en staging-webbplats med bara ett klick med deras inbyggda verktyg. Många andra topphanterade WordPress-värdleverantörer, som SiteGround, inkluderar också 1-klicks staging-områden direkt i sina värddashboards.

Med det sagt, om din värd inte stöder staging kan du använda ett staging-plugin som WP Staging för att skapa en staging-webbplats, eller följa de detaljerade stegen i vår guide för hur du skapar en staging-webbplats för WordPress.

För en fullständig genomgång kan du kolla in vår guide om hur man skapar en staging-webbplats för WordPress.

Dessutom, skapa alltid en fullständig säkerhetskopia av din webbplats innan du gör stora ändringar. Detta säkerställer att om något går fel, kan du återställa din webbplats till sitt tidigare tillstånd utan att förlora data.

Värmekartor är ett kraftfullt verktyg, men för den mest kompletta bilden av besökares beteende, använd dem tillsammans med andra analysverktyg och användarfeedback.

Se dem som en utgångspunkt för att upptäcka potentiella problem eller möjligheter, inte som den enda informationskällan. Att kombinera insikter från värmekartor med bredare data ger dig en tydligare och mer exakt bild av hur besökare interagerar med din webbplats.

Metod 1: Konfigurera WordPress värmekartor med Microsoft Clarity

Microsoft Clarity är ett gratis, lättanvänt verktyg för värmekartor och sessionsinspelning som integreras med WordPress. Det är bäst för övergripande webbplatsanalys och är idealiskt för nybörjare, bloggare och småföretag som automatiskt vill förstå hur besökare interagerar med sin webbplats.

Det är därför det används på många partnerwebbplatser för att spåra värmekartor och få insikter i användarinteraktioner.

Steg 1: Skapa ett gratis Microsoft Clarity-konto

För att konfigurera WordPress-värmekartor med Microsoft Clarity behöver du först ett konto.

Gå till Microsoft Claritys webbplats och klicka på 'Kom igång'.

I popup-fönstret som visas ser du att du kan registrera dig med ett Microsoft-, Facebook- eller Google-konto. Klicka bara på det du föredrar.

För den här handledningen väljer jag ‘Logga in på Google.’

Därefter kan du följa registreringsprocessen genom att välja lämpligt konto.

Klicka sedan på ‘Fortsätt’ på bekräftelsesidan.

Efter registrering kommer du att bli ombedd att bekräfta din e-postadress.

Glöm inte att kontrollera Clarity Användarvillkor och klicka i kryssrutan innan du fortsätter.

Du kommer sedan att uppmanas att skapa ett nytt projekt för din WordPress-webbplats.

Du behöver bara ge ditt projekt ett namn, ange din webbplats URL och välja din bransch från rullgardinsmenyn.

När det är gjort, klicka på ‘Lägg till nytt projekt’ för att slutföra installationen.

När det är gjort är du nu redo att installera Microsoft Clarity WordPress-pluginet för att ställa in värmekartor på din webbplats.

Steg 2: Installera Microsoft Clarity på din WordPress-webbplats

I det här steget installerar du Microsoft Clarity-plugin och kopplar det till kontot du just skapade.

Från din WordPress-instrumentpanel, gå till Plugins » Lägg till nytt plugin.

Använd sökfältet för att snabbt hitta Microsoft Clarity-pluginet.

Klicka bara på 'Installera nu' i det relevanta sökresultatet, och en gång till på 'Aktivera' när det visas. 

För steg-för-steg-instruktioner, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering av pluginet är nästa steg att välja ett Clarity-projekt för att koppla ihop båda verktygen.

Du kan navigera till Clarity från ditt WordPress-adminområde och välja projektet du just skapade från rullgardinsmenyn.

Inom de närmaste sekunderna bör du se en notifiering om att projektet har integrerats framgångsrikt.

För mer information kan du se vår guide om hur man installerar Microsoft Clarity Analytics i WordPress.

Steg 3: Konfigurera värmekartor i Microsoft Clarity

När du ansluter Microsoft Clarity börjar det automatiskt spåra dina besökare – du behöver inte klistra in någon kod manuellt eller krångla med temafiler.

Inne i din Clarity-instrumentpanel hittar du användbara rapporter som ger dig en överblick över hur folk interagerar med din WordPress-blogg eller webbplats.

Några av de viktigaste mätvärdena inkluderar:

• Sessioner – Detta visar hur många individuella besök din webbplats fick.
• Sidor per session – Visar hur många sidor en besökare tittade på under en session.
• Scroll-djup – Visar hur långt användarna scrollar ner på varje sida.
• Aktiv tid – Spårar hur länge användare aktivt interagerar med din sida (inte bara lämnar den öppen i en bakgrundsfane).

Du hittar också förbyggda widgets som 'Användaröversikt', som lyfter fram besökartyper och enheter.

Dessutom finns det beteendemässiga insikter som raseriklick (när användare klickar upprepade gånger av frustration) och överdriven scrollning (när användare scrollar för mycket, möjligen letar efter något).

För att se dina värmekartor, fortsätt och byt till fliken 'Värmekartor'.

Väl inne ser du en lista över alla sidvärmekartor som Clarity automatiskt har spelat in.

Klicka bara på en sida du vill analysera.

När du öppnar en värmekarta ser du tre huvudvyer: Klick, Scroll och Uppmärksamhet.

Du kan växla till 'Klick' för att se var besökare klickar mest.

För att ta reda på din scroll-djup, flytta helt enkelt till fliken 'Scroll'.

Här kommer Clarity att avslöja hur långt användarna skrollar ner på din sida. Detta hjälper till att identifiera om de missar ditt nyckelinnehåll.

Slutligen, klicka på knappen ‘Attention‘ för att se den genomsnittliga tid besökare spenderar på olika delar av sidan.

Röda zoner indikerar högre uppmärksamhet, medan blå områden får mindre.

Det var allt – du har framgångsrikt ställt in WordPress-värmekartor med Microsoft Clarity!

Metod 2: Konfigurera WordPress-värmekartor med UserFeedback

UserFeedback från MonsterInsights är ett kraftfullt verktyg som inte bara låter dig skapa engagerande besökarundersökningar, utan dess Elite-plan inkluderar också ett Heatmaps Addon för hela sidan. Detta gör att du kan se exakt var användarna klickar och flyttar musen på dina faktiska webbsidor.

Det är ett utmärkt alternativ för växande webbplatser, webbutiker och byråer som vill ha djupare insikter och mer kontroll över insamlingen av besökarfeedback.

På WPBeginner har vi använt UserFeedback för att få insikter om vad våra kunder inom webbdesign vill ha och förväntar sig av oss. Vi har haft en fantastisk upplevelse med det, och du kan läsa vår fullständiga recension av UserFeedback för att se varför vi rekommenderar det.

Steg 1: Installera och aktivera UserFeedback

Först måste du ställa in ett UserFeedback-konto. Du kan göra detta genom att besöka UserFeedback-webbplatsen och registrera dig för Elite-planen, eftersom Heatmaps-tillägget endast är tillgängligt med åtkomst på elittnivå.

När du har registrerat ett konto kommer du att omdirigeras till din UserFeedback-kontodashboard, där du kan hitta din licensnyckel.

Nu är det dags att installera pluginet.

Gå från din WordPress-instrumentpanel till Plugins » Lägg till nytt.

Sök efter UserFeedback och klicka på Installera nu, sedan Aktivera.

Detta installerar den kostnadsfria lite-versionen, som du sedan låser upp till din Elite-plan med din licensnyckel i nästa steg.

Ny på att installera plugins? Här är en detaljerad guide om hur man installerar ett WordPress-plugin.

När den har aktiverats kan du ange din licensnyckel för att låsa upp alla proffsfunktioner som ingår i din plan.

För att göra detta kan du navigera till UserFeedback » Inställningar. Kopiera och klistra sedan helt enkelt in din licensnyckel från din UserFeedback-instrumentpanel i fältet 'Licensnyckel'.

Klicka på knappen 'Verifiera' för att starta verifieringsprocessen.

Om några sekunder bör du se ett meddelande om lyckad verifiering.

Steg 2: Aktivera tillägget för värmekartor

Nu går vi till UserFeedback » Tillägg för att installera Heatmaps-tillägget.

Du kan bara skrolla ner på sidan för att hitta tillägget Heatmaps och klicka på 'Installera tillägg' i lämplig ruta.

När den är installerad, se till att den är aktiverad genom att klicka på knappen 'Aktivera'.

Steg 3: Skapa en ny värmekarta

Med tillägget Heatmaps aktiverat kan du nu skapa din webbplats värmekarta.

Låt oss gå till UserFeedback » Heatmaps i din WordPress-instrumentpanel och klicka på knappen 'Ny heatmap'.

I popup-fönstret som visas, expandera rullgardinsmenyn för att välja den specifika sida du vill spåra. Du kan till exempel skapa en heatmap för din startsida, landningssida eller blogginlägg.

Klicka på knappen 'Skapa' för att ställa in värmekartan.

Steg 4: Visa dina värmekartresultat

Efter att du har skapat en värmekarta börjar UserFeedback samla in användardata omedelbart.

Låt oss gå till UserFeedback » Heatmaps och klicka på en värmekarta för att se detaljerade visuella insikter.

På nästa skärm kan du se detaljerad insikt om dina besökare, inklusive:

• Enhetsfilter – Jämför användarbeteende mellan stationära datorer, surfplattor och mobiler.
• Klick – Se exakt var folk klickar på din sida.
• Musrörelser – Spåra hur användare flyttar sin mus över skärmen.

Om du marknadsför din webbplats via flera kanaler kan du också filtrera data efter UTM-kampanj (speciella spårningskoder som läggs till i dina länkar), källa eller medium. Detta hjälper dig att förstå hur besökare från olika marknadsföringsinsatser interagerar med din webbplats.

Och det är allt – du har framgångsrikt konfigurerat WordPress värmekartor med UserFeedback!

Bonussteg: Maximera dina värmekartinsikter 🔥

Heatmaps är bara användbara om du vet hur du ska agera på vad de berättar för dig. Här är hur du omvandlar dessa insikter till praktiska förbättringar för din WordPress-webbplats.

Åtgärda var besökare hoppar av

Du kan använda scrollkartor för att se hur långt ner på en sida dina besökare går. Om viktigt innehåll är begravt för långt ner på sidan, kanske de flesta människor aldrig ser det.

Prova att flytta nyckelelement som CTA:er eller erbjudanden högre upp på sidan, och bryt upp långa sidor med mindre sektioner och tydliga rubriker. Du kan också använda datumfilter för att spåra hur dessa ändringar påverkar besökarnas beteende över tid. Se till att titta separat på dina mobilscrollkartor, eftersom mobilskärmar tvingar innehåll mycket längre ner på sidan.

Denna lilla ändring kan minska avvisningsfrekvensen och hålla dina besökare engagerade längre.

Upptäck och lös användarförvirring

Ibland försöker besökare klicka på bilder, ikoner eller text som inte är klickbara. Detta visar att de är förvirrade eller förväntar sig något annat.

Du kan granska dina klickkartor och musrörelser för att identifiera dessa områden. Vid behov kan du länka dessa bilder eller lägga till knappar i närheten för att göra saker enklare för användarna.

Du kan också ställa in en snabb UserFeedback-undersökning för att fråga vad användarna förväntade sig att hitta.

Identifiera och åtgärda navigeringsproblem

Om du ser besökare hoppa mellan sidor utan tydlig riktning är det ett tecken på att din navigering kan vara förvirrande.

Förenkla din navigering genom att se till att informationen är lätt att hitta och justera allt som kan orsaka förvirring. Du kan också gå igenom viktiga steg på din webbplats som en förstagångsbesökare för att säkerställa att allt fungerar korrekt.

Du kanske också vill se vår guide om hur man skapar en anpassad navigeringsmeny i WordPress.

Gör dina CTA-knappar omöjliga att missa

Om dina CTA:er (call-to-action-knappar) inte får tillräckligt med klick, försök att ändra deras färg, text eller placering så att de sticker ut mer.

Fortsätt och använd dina musrörelseinsikter för att upptäcka tvekan innan du klickar och kontrollera enhetsfilter för att säkerställa att dina CTA:er är synliga och lätta att klicka på på alla enheter, särskilt mobila.

Validera ändringar med A/B-testning

Att göra ändringar i ditt innehåll och din design är bara början. Jag rekommenderar också starkt att sätta upp A/B-tester för att jämföra olika versioner av en sida eller ett element, som knappplacering, färger eller rubriktext, för att se vad som presterar bäst.

Här är hur kombinationen av värmekartor + A/B-testning fungerar:

1. Din värmekarta visar att besökare ignorerar din "Prenumerera"-knapp i sidofältet.
2. Du skapar två versioner – Version A behåller den nuvarande designen, Version B flyttar CTA-knappen högre upp på sidan så att besökare ser den innan de scrollar (ovanför vecket) med en ljusare färg.
3. Ett A/B-testverktyg visar hälften av dina besökare Version A och hälften Version B, och mäter sedan vilken som får flest klick.

Detta vetenskapliga tillvägagångssätt eliminerar gissningar. Du kommer med säkerhet att veta om dina värmekartainspirerade ändringar faktiskt förbättrar konverteringar.

Som kontext beräknas din konverteringsgrad (CR) helt enkelt som CR = (Konverteringar / Totalt antal besökare) × 100. Värmekartor visar dig exakt var den formeln bryter samman genom att avslöja var besökare faller bort.

För detaljerade instruktioner, se vår guide om hur man gör A/B-testning i WordPress.

För att hjälpa dig att komma igång, här är några av de mest populära WordPress A/B-testverktygen:

• Thrive Optimize – Visuell redigerare för att testa olika sidlayouter och designer
• Nelio A/B Testing – Testar inlägg, sidor, anpassade inläggstyper och WooCommerce-produkter
• OptinMonster – Testar olika popup-fönster, flytande fält och anmälningsformulär för att se vilka designer och erbjudanden som konverterar bäst.

För mer information, kolla in vår guide om bästa alternativen till Google Optimize för att hitta rätt lösning för din webbplats.

Vanliga frågor om WordPress värmekartor

Nu när du vet hur du ställer in värmekartor, låt oss svara på några vanliga frågor vi hör från WPBeginner-läsare.

Är WordPress värmekartor gratis?

Microsoft Clarity är helt gratis med obegränsad spårning och inga begränsningar. Detta gör det till det bästa alternativet för de flesta WordPress-användare som vill ha omfattande värmekartdata utan att betala något.

Vilket värmekartverktyg är bäst för WordPress?

Det beror på dina specifika behov:

• Välj Microsoft Clarity om du vill ha gratis, obegränsad värmekartaspårning med sessionsinspelningar och inte har något emot att se rapporter på Microsofts instrumentpanel.
• Välj UserFeedback om du redan använder MonsterInsights och vill kombinera värmekartor med undersökningar och omröstningar, allt hanterat från din WordPress-instrumentpanel.

För de flesta nybörjare rekommenderar vi att börja med Microsoft Clarity eftersom det är gratis och erbjuder fler funktioner än du troligen behöver när du börjar.

Behöver jag kodningskunskaper för att lägga till värmekartor i WordPress?

Nej, du behöver inga kodningskunskaper. Båda metoderna i den här guiden använder plugins som hanterar all teknisk installation åt dig.

Med Microsoft Clarity installerar du helt enkelt den officiella plugin-modulen och ansluter ditt konto. Med UserFeedback aktiverar du värmekarttillägget från din WordPress-instrumentpanel. Ingen kodredigering krävs.

Hur lång tid tar det att samla in användbar värmekartadata?

De flesta värmekartverktyg behöver minst 100-200 sidbesök för att börja visa synliga mönster, men vi rekommenderar starkt att vänta tills du har 500-1 000 sidvisningar på en specifik sida innan du gör större strukturella beslut.

En mindre urvalsstorlek kan lätt snedvridas av bara några få besökare. Beroende på din trafikvolym tar detta vanligtvis allt från 1 till 7 dagar.

För webbplatser med låg trafik kan du behöva vänta 2-3 veckor för att se tydliga mönster framträda. Ha tålamod, eftersom förhastade beslut baserade på för lite data kan leda till att du gör fel ändringar.

Observera att Microsoft Clarity visar dig data omedelbart, men vänta på en tillräcklig urvalsstorlek innan du fattar stora designbeslut.

Kan värmekartor sakta ner min WordPress-webbplats?

Många moderna värmekartverktyg är utformade för att ha minimal påverkan på webbplatsens hastighet. De laddas asynkront, vilket innebär att de inte blockerar ditt sidinnehåll från att laddas. Om du är orolig för prestanda, kör ett hastighetstest före och efter installation av värmekartor med ett verktyg som GTmetrix eller Pingdom.

Är värmekartor GDPR-kompatibla?

🛑 Viktigt: Vi är inte juridiska rådgivare. Kontrollera alltid dina lokala integritetslagar och rådgör med en juridisk expert om du är osäker på efterlevnadskraven.

Microsoft Clarity är byggt med integritet i åtanke och anonymiserar IP-adresser automatiskt, men du är fortfarande ansvarig för att inhämta cookie-samtycke från EU/UK-besökare innan någon spårning påbörjas. Även om Clarity erbjuder integritetskontroller måste webbplatsägaren säkerställa efterlevnad av lokala lagar.

För UserFeedback måste du lägga till lämpliga meddelanden i din integritetspolicy och implementera cookie-samtycke om du har europeiska besökare. Vi rekommenderar WPConsent, som inkluderar Google Consent Mode v2 för att hålla din spårning kompatibel medan besökare hanterar sina preferenser.

Vad är skillnaden mellan klickkartor, scrollkartor och uppmärksamhetskartor?

• Värmekartor (även kallade "rörelsekartor") spårar var användare för muspekaren, vilket ofta indikerar var de läser eller uppmärksammar.

• Klickkartor (eller tryckkartor på mobil) visar exakt var besökare klickar på dina sidor. Hot spots visas i rött/orange, medan cold spots visas i blått/grönt. Detta hjälper dig att se om användare klickar på element som inte är klickbara.

• Scrollkartor visar hur långt ner på sidan besökare scrollar innan de lämnar. Detta avslöjar om viktigt innehåll är begravt för långt ner, eller om användare är tillräckligt engagerade för att läsa hela din artikel.

Kan jag använda värmekartor på WooCommerce-produktsidor?

Absolut! Både Microsoft Clarity och UserFeedback fungerar på alla typer av WordPress-sidor, inklusive WooCommerce-produktsidor, kassasidor och kundvagnar.

Detta är otroligt värdefullt för webbutiker. Du kan se vilka produktbilder som får mest uppmärksamhet, om kunder läser dina beskrivningar och var de kan bli förvirrade under kassan.

Fungerar värmekartor på mobila enheter?

Ja, både Microsoft Clarity och UserFeedback spårar besökare på alla enheter – mobil, surfplatta och dator. Ännu bättre, du kan filtrera dina värmekartdata efter enhetstyp. Detta låter dig se om mobilanvändare beter sig annorlunda än datoranvändare, vilket ofta är fallet.

Du kan till exempel upptäcka att ditt sidofältsinnehåll får många klick på datorn men helt ignoreras på mobilen. Dessa insikter hjälper dig att skapa bättre responsiva designer.

Hur skiljer sig en värmekarta från Google Analytics?

Google Analytics talar om för dig vad som händer (sidvisningar, avvisningsfrekvens, konverteringsfrekvens), medan värmekartor visar dig varför det händer genom att visualisera faktiskt användarbeteende.

Till exempel kan Google Analytics tala om för dig att 70 % av besökarna lämnar din sida utan att klicka på något. En värmekarta visar dig exakt vilka element de ignorerade och var de fastnade.

Du bör använda båda verktygen tillsammans. Google Analytics tillhandahåller data som talar om för dig vilka sidor som behöver förbättras, sedan visar värmekartor dig exakt vad du ska fixa på dessa sidor.

Vi rekommenderar MonsterInsights för att hämta Google Analytics 4-data direkt till din WordPress-instrumentpanel, vilket gör det enkelt att para ihop kvantitativa mätvärden med värmekartinsikter. Det är också företaget bakom UserFeedback om du väljer Metod 2.

Relaterade guider om optimering av WordPress-konverteringar

Vi hoppas att den här artikeln har hjälpt dig att ställa in WordPress heatmaps.

Därefter kanske du vill kolla in vår expertkurerade lista med avancerade tips för landningssidor för att öka konverteringar eller vår ultimata guide till geolokalisering i WordPress:

• Tips för landningssidor för att öka WordPress-konverteringar
• Bästa praxis för CTA:er för bättre konverteringar på landningssidor
• Hur man enkelt gör visuell regressionsstestning i WordPress
• Ultimata guiden om geolokalisering i WordPress
• Bästa verktygen för konverteringsoptimering för WordPress

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.