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 heatmaps som jag verkligen förstod hur människor 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 heatmaps ge dig några svar.

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

I den här guiden går jag igenom varje installationsprocess steg för steg. I slutet kommer du att ha de verktyg du behöver för att göra datadrivna ändringar på din webbplats. 🔥

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

En heatmap är ett visuellt verktyg som visar exakt hur besökare interagerar med din WordPress-webbplats. Den 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ökarna klickar, trycker eller tillbringar 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 kan du sluta gissa vad som fungerar och vad som inte gör det. Med andra ord hjälper värmekartor till att ta bort gissningarna genom att ge dig tydliga insikter i besökarnas beteende.

De hjälper dig att besvara viktiga frågor som t.ex:

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

Med den här informationen kan du göra smarta ändringar på din webbplats. Du vet vad som ska åtgärdas, vad som ska flyttas och vad som ska förbättras.

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

I följande avsnitt kommer jag att dela med mig av hur du ställer in WordPress-värmekartor med hjälp av 2 av de bästa verktygen för att lägga till värmekartor. Det ena är helt gratis, och det andra är ett premiumalternativ med extra funktioner.

Använd gärna hopplänkarna nedan för att komma till den metod du föredrar:

Steg 0: Förbereda din WordPress-webbplats för Heatmaps

Innan du lägger till heatmaps på din WordPress-webbplats är det viktigt att se till att din webbplats är ordentligt förberedd. Genom att vidta några försiktighetsåtgärder kan du förhindra eventuella problem när du kommer igång.

Om du lägger till värmekartor på din live-webbplats för första gången är det ett smart drag att testa allt på en staging-webbplats först.

En staging-site är i princip en kopia av din live-webbplats, där du kan göra ändringar och testa nya funktioner utan att påverka din riktiga webbplats. Det gör att du kan prova nya verktyg, som värmekartor, på ett säkert sätt utan att riskera några störningar i användarupplevelsen.

Sedan kan du helt enkelt skicka ändringarna live för att tillämpa dem på din riktiga webbplats.

Om du använder Bluehost kan du enkelt skapa en staging-webbplats tack vare deras snabba 1-klickslösning.

Som sagt, om du inte har tillgång till staging via din hosting kan du också använda plugins som WP Stagecoach för att skapa staging-webbplatser.

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

Dessutom bör du alltid säkerhetskopiera din webbplats innan du gör några större ändringar. En säkerhetskopia säkerställer att du, om något går fel under installationsprocessen, enkelt kan återställa din webbplats till dess tidigare tillstånd utan att förlora några viktiga data.

Slutligen, kom ihåg att heatmaps fungerar bäst när de används tillsammans med andra analysverktyg och feedback från användarna.

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

Metod 1: Skapa värmekartor för WordPress med hjälp av Microsoft Clarity

Microsoft Clarity är ett kostnadsfritt, lättanvänt verktyg för värmekartor och sessionsinspelning som integreras sömlöst med WordPress. Det är bäst för övergripande webbplatsanalys, perfekt för nybörjare, bloggare och småföretagare som vill förstå besökarnas beteende.

Det är därför vi använder det på några av våra partners webbplatser för att spåra heatmaps och få insikter om användarinteraktioner.

Steg 1: Skapa ett kostnadsfritt Microsoft Clarity-konto

För att skapa 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 ska jag välja “Logga in på Google”.

Efter det kan du följa registreringsprocessen genom att välja lämpligt konto.

Klicka sedan på “Fortsätt” på bekräftelsesidan.

När du registrerar dig kommer du att bli ombedd att bekräfta din e-postadress.

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

Därefter uppmanas du att skapa ett nytt projekt för din WordPress-webbplats.

Du behöver bara ge ditt projekt ett namn, ange webbadressen till din webbplats och välja bransch i rullgardinsmenyn.

När du har gjort det klickar du på “Lägg till nytt projekt” för att slutföra installationen.

När du har gjort det är du redo att installera Microsoft Clarity WordPress-plugin för att skapa värmekartor på din webbplats.

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

I det här steget installerar du plugin-programmet Microsoft Clarity och ansluter det till det konto du just skapat.

Från din WordPress instrumentpanel, låt oss gå till Plugins ” Lägg till nytt plugin.

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

Klicka bara på “Installera nu” på det relevanta sökresultatet och återigen på “Aktivera” när det visas.

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

När plugin-programmet har aktiverats är nästa steg att välja ett Clarity-projekt för att koppla ihop de båda verktygen.

Du kan navigera till Clarity från ditt WordPress-adminområde och välja det projekt du just har skapat i rullgardinsmenyn.

Inom de närmaste sekunderna bör du se meddelandet “Project integrated successfully”.

Mer information finns i vår guide om hur du installerar Microsoft Clarity Analytics i WordPress.

💡 O bs: Om du använder ett WordPress-cacheplugin måste du rensa WordPress -cachen efter att du har 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: Ställ in 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 röra med temafiler.

I Claritys instrumentpanel hittar du användbara rapporter som ger dig en överblick över hur människor interagerar med din WordPress-blogg eller WordPress-webbplats.

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

• Sessions – Här visas hur många enskilda besök din webbplats har fått.
• Sidor per session – visar hur många sidor en besökare har tittat på under en session.
• Scroll depth – Visar hur långt ner användarna scrollar på varje sida.
• Aktiv tid – Spårar hur länge användarna aktivt engagerar sig i din sida (inte bara lämnar den öppen i en bakgrundsflik).

Du hittar också förbyggda widgetar som “Användaröversikt”, som belyser besökartyper och enheter.

Dessutom finns det beteendemässiga insikter som ” rage clicks” (när användare klickar upprepade gånger i frustration) och ” excessive scrolling ” (när användare scrollar för mycket, kanske för att leta efter något).

För att se dina värmekartor, gå vidare och växla till fliken “Värmekartor”.

När du väl är inne ser du en lista över alla sidvärmekartor som Clarity automatiskt registrerade.

Klicka bara på en sida som du vill analysera.

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

Du kan växla till “Click” för att se var besökarna klickar mest.

För att ta reda på ditt rulldjup, gå bara till fliken “Scroll”.

Här avslöjar Clarity hur långt användarna scrollar ner på din sida. Detta hjälper till att identifiera om de missar ditt viktigaste innehåll.

Slutligen kan du klicka på knappen“Attention” för att se den genomsnittliga tid som besökarna tillbringar på olika delar av sidan.

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

Det är allt – du har framgångsrikt skapat WordPress-värmekartor med Microsoft Clarity!

Metod 2: Ställ in WordPress Heatmaps med hjälp av UserFeedback

UserFeedback från MonsterInsights kombinerar feedback i form av värmekartor med enkäter och avancerad målinriktning. Det är ett kraftfullt alternativ för växande webbplatser, onlinebutiker och byråer som behöver djupare insikter och mer kontroll över hur de ska samla in besökarnas feedback.

På WPBeginner har vi använt UserFeedback för att få insikter i vad våra webbdesignkunder vill ha och förväntar sig av oss. Vi har haft en bra upplevelse med det, och du kan kolla in 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 UserFeedbacks webbplats och registrera dig för en plan.

När du har registrerat dig för ett konto kommer du att omdirigeras till instrumentpanelen för ditt UserFeedback-konto, där du hittar nedladdningslänken till UserFeedback zip-filen och din licensnyckel.

Nu är det dags att installera insticksprogrammet.

Från din WordPress-instrumentpanel måste du gå till Plugins ” Lägg till nytt.

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.

Är du nybörjare på att installera plugins? Här är en detaljerad guide om hur du installerar ett WordPress-plugin.

När du är aktiverad kan du ange din licensnyckel för att låsa upp alla proffsfunktioner som ingår i ditt abonnemang.

För att göra detta kan du navigera till UserFeedback ” Inställningar. Sedan kopierar och klistrar du bara in din licensnyckel från din UserFeedback-instrumentpanel i fältet “Licensnyckel”.

Gå vidare och klicka på knappen “Verifiera” för att starta verifieringsprocessen.

Om några sekunder kommer du att se ett meddelande om att verifieringen lyckades.

Steg 2: Aktivera Heatmaps Addon

Låt oss nu gå till UserFeedback ” Addons för att installera Heatmaps-tillägget.

Du kan bara bläddra ner på sidan för att hitta Heatmaps-tillägget och klicka på “Installera tillägg” i lämplig ruta.

När du har installerat programmet ska du kontrollera att det är aktiverat genom att klicka på knappen “Activate”.

Steg 3: Skapa en ny värmekarta

Med Heatmaps-tillägget aktiverat kan du nu skapa webbplatsens värmekarta.

Låt oss gå till UserFeedback ” Heatmaps i din WordPress-instrumentpanel och klicka på knappen “Ny värmekarta”.

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

Gå vidare och tryck på knappen “Skapa” för att skapa värmekartan.

Steg 4: Visa dina Heatmap-resultat

När du har skapat en värmekarta kommer UserFeedback att börja samla in användardata omedelbart.

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

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

• Enhetsfilter – Jämför användarnas beteende på datorer, surfplattor och mobiler.
• Klicks – Se exakt var folk klickar på din sida.
• Musrörelser – Spåra hur användare flyttar musen över skärmen.

Om du marknadsför din webbplats via flera kanaler kan du även 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 som behövs – Du har framgångsrikt ställt in WordPress-värmekartor med hjälp av UserFeedback!

Bonus steg: Maximera dina Heatmap-insikter 🔥

Värmekartor är bara användbara om du vet hur du ska agera på vad de säger till dig. Så här gör du för att omvandla insikterna från dina värmekartor till verkliga förbättringar för din WordPress-webbplats.

Fixa var besökarna hoppar av

Du kan använda scroll maps 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 viktiga element som CTA:er eller erbjudanden högre upp på sidan och bryta upp långa sidor med mindre avsnitt och tydliga rubriker. Du kan också använda datumfilter för att spåra hur dessa förändringar påverkar besökarnas beteende över tid.

Denna lilla förändring kan minska avvisningsfrekvensen och få dina besökare att stanna kvar längre.

Upptäck och lös förvirring hos användaren

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 upptäcka dessa områden. Om det behövs kan du länka dessa bilder eller lägga till knappar i närheten för att göra det enklare för användarna.

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

Identifiera och åtgärda navigeringsproblem

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

Förenkla navigeringen genom att se till att informationen är lätt att hitta och justera allt som kan skapa förvirring. Du kan också gå igenom viktiga steg på din webbplats som en förstagångsbesökare för att se till att allt fungerar som det ska.

Du kanske också vill läsa vår guide om hur du skapar en egen navigeringsmeny i WordPress.

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

Om dina CTA-knappar (call-to-action-knappar) inte får tillräckligt många klick rekommenderar jag att du justerar färg, text eller placering för att få dem att sticka ut mer.

Använd dina insikter om musrörelser för att upptäcka tvekan innan du klickar och kontrollera enhetsfilter för att se till att dina CTA:er är synliga och lätta att klicka på på alla enheter, särskilt mobila.

Jag hoppas att den här artikeln har hjälpt dig att konfigurera WordPress-värmekartor. Därefter kanske du vill utforska våra expertkuraterade tips om landningssidor för att skjuta WordPress-konverteringar i höjden och vår ultimata guide om geolokaliseringsinriktning.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.