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ökarbeteendet.
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 människor 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. En är ett helt gratis analysverktyg, medan den 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
- Method 1: Set Up WordPress Heatmaps Using Microsoft Clarity (Free)
- Method 2: Set Up WordPress Heatmaps Using UserFeedback (Best for Heatmaps + User Surveys)
- Bonus Steps: Maximize Your Heatmap Insights 🔥
- Relaterade guider om optimering av WordPress-konverteringar
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 live-webbplats för första gången är det en bra idé att testa allt på en staging-webbplats först.
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.
Med det sagt, om din värd inte stöder staging kan du använda plugins som WP Stagecoach för att skapa en staging-webbplats.
För en fullständig genomgång kan du kolla in vår guide om hur man enkelt skapar en staging-webbplats för WordPress.
Dessutom, skapa alltid en fullständig säkerhetskopia av din webbplats innan du gör större ä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.
📌 Viktigt: Clarity samlar in anonymiserad användningsdata för att förbättra sina tjänster, och detta kan hjälpa dig att följa GDPR och andra integritetslagar. För mer information, se vår guide till WordPress och GDPR.
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 Clarity-webbplatsen 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.
Vid 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.
💡 Notera: Om du använder ett WordPress-cacheplugin måste du rensa din WordPress-cache efter att ha anslutit Microsoft Clarity till din webbplats. Detta är viktigt eftersom Microsoft annars inte kommer att kunna verifiera din webbplats på några timmar.
Steg 3: Konfigurera värmekartor i Microsoft Clarity
När du kopplar Microsoft Clarity kommer det automatiskt att börja 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 – Berättar 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 by MonsterInsights låter dig skapa undersökningar som inkluderar en visuell heatmap-fråga, där användare kan klicka på en bild för att ge feedback.
Det är ett utmärkt alternativ för växande webbplatser, webbutiker och byråer som vill ha djupare insikter och mer kontroll över insamling 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 skapa ett UserFeedback-konto. Du kan göra detta genom att besöka UserFeedback-webbplatsen och registrera dig för en plan.
💡 Notera: Det finns en gratisversion av UserFeedback att utforska dess funktioner, men du behöver Elite-planen för att låsa upp Heatmaps-funktionen.
När du har registrerat ett konto omdirigeras du till din UserFeedback-kontopanel, där du hittar nedladdningslänken till UserFeedback zip-filen och din licensnyckel.
Nu är det dags att installera pluginet.
Från din WordPress-instrumentpanel måste du gå till Plugins » Lägg till ny.
På nästa skärm, låt oss söka efter UserFeedback.
Du kan sedan installera och aktivera pluginet som du skulle göra med vilket annat WordPress-plugin som helst.
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 popupen som visas, expandera rullgardinsmenyn för att välja den specifika sidan du vill spåra. Du kan till exempel skapa en värmekarta 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 över flera kanaler kan du också filtrera data efter UTM-kampanj, 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 dina besökare går på en sida. Om viktigt innehåll är begravt för långt ner på sidan, kanske de flesta aldrig ser det.
Du kan prova att flytta nyckelelement som CTA:er eller erbjudanden högre upp på sidan, och dela 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ökarbeteendet över tid.
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 ofta 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 (knappar för uppmaning till handling) 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.
🧑💻 Proffstips: Att göra ändringar i ditt innehåll och din design är bara början. Jag rekommenderar också starkt att du ställer in A/B-tester för att jämföra olika versioner av en sida eller ett element, som knapplacering, färger eller rubriktext, för att se vad som presterar bäst.
För detaljerade instruktioner, se vår guide om hur man gör A/B-testning i WordPress.
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 gör A/B-delningstestning i WordPress
- 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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.