Quando ho iniziato a lavorare sui miei siti WordPress, per lo più indovinavo cosa volessero i visitatori. Solo quando ho iniziato a usare le heatmap ho capito veramente come le persone interagivano con il mio sito: dove cliccavano, quanto scorrevano e cosa catturava effettivamente la loro attenzione.
Se stai cercando di migliorare il tuo sito WordPress ma non sei sicuro di cosa funzioni e cosa no, le heatmap possono darti alcune risposte.
Dopo aver testato diversi strumenti, ho ristretto le opzioni a due modi semplici per impostare le heatmap in WordPress: Microsoft Clarity e UserFeedback.
In questa guida passo passo, ti illustrerò come impostare entrambi i metodi, in modo che tu abbia gli strumenti necessari per apportare miglioramenti basati sui dati al tuo sito. 🔥
Perché devi impostare le heatmap di WordPress?
Le heatmap ti mostrano esattamente come le persone interagiscono con il tuo sito web, in modo da poter migliorare i tuoi contenuti, il layout e le conversioni in base al comportamento reale dei visitatori. Utilizzano codici colore per evidenziare le aree più e meno attive di una pagina:
- Aree rosse, arancioni e gialle ("calde") mostrano dove i visitatori cliccano, toccano o trascorrono la maggior parte del tempo.
- Aree blu e verdi ("fredde") mostrano i punti che ricevono poca o nessuna attenzione.
Vedendo questa attività mappata sul tuo sito web WordPress, puoi smettere di indovinare cosa funziona e cosa no. In altre parole, le heatmap aiutano a eliminare le congetture fornendoti informazioni chiare sul comportamento dei visitatori.
Le heatmap ti aiutano a rispondere a domande importanti, come:
- Le persone cliccano sui tuoi pulsanti CTA?
- Scorrono abbastanza in basso da vedere i tuoi contenuti?
- Fanno clic su elementi che non fanno nulla?
Con queste informazioni, puoi apportare modifiche intelligenti al tuo sito. Saprai cosa correggere, cosa spostare e cosa migliorare.
Puoi utilizzare queste informazioni per ottenere più lettori, aumentare le vendite o incrementare le richieste da potenziali clienti. Tutto ciò apportando semplici modifiche basate su come le persone utilizzano effettivamente il tuo sito.
Nelle sezioni seguenti, ti mostrerò come impostare le heatmap in WordPress utilizzando due dei migliori strumenti per heatmap e registrazione sessioni. Uno è uno strumento di analisi completamente gratuito, mentre l'altro è un'opzione premium con funzionalità aggiuntive.
Sentiti libero di utilizzare i collegamenti rapidi qui sotto per passare al tuo metodo preferito:
- Passaggio 0: Preparare il tuo sito WordPress per le heatmap
- 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 🔥
- Guide correlate all'ottimizzazione delle conversioni in WordPress
Passaggio 0: Preparare il tuo sito WordPress per le heatmap
Prima di aggiungere le heatmap al tuo sito WordPress, è importante preparare correttamente il tuo sito. Adottare alcuni passaggi precauzionali aiuterà a prevenire problemi e garantirà dati più accurati.
Se stai aggiungendo le heatmap al tuo sito live per la prima volta, è una buona idea testare tutto prima su un sito di staging.
Un sito di staging è una copia privata del tuo sito web live dove puoi testare in sicurezza nuove funzionalità come le heatmap, senza rischiare interruzioni per l'esperienza utente dei visitatori reali.
Una volta che sei soddisfatto delle modifiche, puoi renderle attive sul tuo sito web reale.
Se utilizzi Bluehost, puoi creare un sito di staging con un solo clic utilizzando il loro strumento integrato.
Detto questo, se il tuo host non supporta lo staging, puoi utilizzare plugin come WP Stagecoach per creare un sito di staging.
Per una guida completa, puoi consultare la nostra guida su come creare un sito di staging per WordPress.
Inoltre, crea sempre un backup completo del tuo sito prima di apportare modifiche importanti. Ciò garantisce che, se qualcosa va storto, puoi ripristinare il tuo sito al suo stato precedente senza perdere dati.
Le heatmap sono uno strumento potente, ma per avere un quadro più completo del comportamento dei visitatori, utilizzale insieme ad altri strumenti di analisi e feedback degli utenti.
Considerale un punto di partenza per scoprire potenziali problemi o opportunità, non l'unica fonte di informazioni. Combinare le informazioni delle heatmap con dati più ampi ti offre un quadro più chiaro e accurato di come i visitatori interagiscono con il tuo sito.
Metodo 1: Configura le Heatmap di WordPress utilizzando Microsoft Clarity
Microsoft Clarity è uno strumento gratuito e facile da usare per heatmap e registrazioni di sessioni che si integra con WordPress. È ideale per l'analisi generale del sito ed è perfetto per principianti, blogger e piccole imprese che desiderano comprendere automaticamente come i visitatori interagiscono con il loro sito.
Ecco perché viene utilizzato su molti siti web di partner per tracciare le heatmap e ottenere informazioni sulle interazioni degli utenti.
📌 Importante: Clarity raccoglie dati di utilizzo anonimizzati per migliorare i propri servizi, e questo può aiutarti a rispettare il GDPR e altre leggi sulla privacy. Per maggiori dettagli, consulta la nostra guida a WordPress e al GDPR.
Passaggio 1: Crea un Account Gratuito di Microsoft Clarity
Per configurare le heatmap di WordPress con Microsoft Clarity, avrai prima bisogno di un account.
Vai al sito web di Microsoft Clarity e fai clic su ‘Inizia’.
Nel popup che appare, vedrai che puoi registrarti con un account Microsoft, Facebook o Google. Fai semplicemente clic su quello che preferisci.
Per questo tutorial, selezionerò ‘Accedi con Google’.
Dopodiché, puoi seguire il processo di registrazione scegliendo l'account appropriato.
Quindi, fai clic su ‘Continua’ nella pagina di conferma.
Al momento della registrazione, ti verrà chiesto di confermare il tuo indirizzo email.
Non dimenticare di controllare i Termini di utilizzo di Clarity e di selezionare la casella prima di continuare.
Ti verrà quindi richiesto di creare un nuovo progetto per il tuo sito WordPress.
Devi solo dare un nome al tuo progetto, inserire l'URL del tuo sito web e scegliere il tuo settore dal menu a discesa.
Fatto ciò, fai clic su ‘Aggiungi nuovo progetto’ per completare la configurazione.
Fatto ciò, sei pronto per installare il plugin Microsoft Clarity per WordPress per impostare le heatmap sul tuo sito web.
Passaggio 2: Installa Microsoft Clarity nel tuo sito WordPress
In questo passaggio, installerai il plugin Microsoft Clarity e lo collegherai all'account che hai appena creato.
Dalla tua bacheca di WordPress, vai su Plugin » Aggiungi nuovo plugin.
Usa la barra di ricerca per trovare rapidamente il plugin Microsoft Clarity.
Fai semplicemente clic su ‘Installa ora’ sul risultato di ricerca pertinente, e ancora una volta su ‘Attiva’ quando appare.
Per istruzioni dettagliate, consulta la nostra guida su come installare un plugin WordPress.
Alla attivazione del plugin, il passo successivo è scegliere un progetto Clarity per connettere entrambi gli strumenti.
Puoi navigare su Clarity dalla tua area di amministrazione di WordPress e scegliere il progetto che hai appena creato dal menu a discesa.
Nei secondi successivi, dovresti vedere una notifica 'Progetto integrato con successo'.
Per maggiori dettagli, puoi consultare la nostra guida su come installare Microsoft Clarity Analytics in WordPress.
💡 Nota: Se stai utilizzando un plugin di caching di WordPress, dovrai svuotare la cache di WordPress dopo aver collegato Microsoft Clarity al tuo sito web. Questo è importante perché, altrimenti, Microsoft non sarà in grado di verificare il tuo sito per alcune ore.
Passaggio 3: Configura le heatmap in Microsoft Clarity
Una volta collegato Microsoft Clarity, inizierà automaticamente a tracciare i tuoi visitatori, senza bisogno di incollare manualmente alcun codice o di modificare i file del tema.
All'interno della tua dashboard di Clarity, troverai report utili che ti daranno una panoramica di come le persone interagiscono con il tuo blog o sito WordPress.
Alcune delle metriche chiave includono:
- Sessioni – Questo mostra quante visite individuali ha ricevuto il tuo sito.
- Pagine per sessione – Indica quante pagine un visitatore ha visualizzato durante una sessione.
- Profondità di scorrimento – Mostra fino a che punto gli utenti scorrono ogni pagina.
- Tempo attivo – Traccia quanto tempo gli utenti interagiscono attivamente con la tua pagina (non solo lasciandola aperta in una scheda in background).
Troverai anche widget predefiniti come 'Panoramica utente', che evidenzia i tipi di visitatori e i dispositivi.
Inoltre, ci sono approfondimenti comportamentali come rage clicks (quando gli utenti cliccano ripetutamente per frustrazione) ed eccessivo scorrimento (quando gli utenti scorrono troppo, forse cercando qualcosa).
Per vedere le tue heatmap, vai avanti e passa alla scheda 'Heatmap'.
Una volta dentro, vedrai un elenco di tutte le heatmap delle pagine che Clarity ha registrato automaticamente.
Fai clic su una pagina che desideri analizzare.
Una volta aperto un heatmap, vedrai tre visualizzazioni principali: Clic, Scorrimento e Attenzione.
Puoi passare a 'Clic' per vedere dove i visitatori fanno più clic.
Per scoprire la tua profondità di scorrimento, spostati semplicemente sulla scheda 'Scorrimento'.
Qui, Clarity rivelerà fino a che punto gli utenti scorrono la tua pagina. Questo aiuta a identificare se perdono i tuoi contenuti chiave.
Infine, fai clic sul pulsante 'Attenzione' per vedere il tempo medio che i visitatori trascorrono su diverse parti della pagina.
Le zone rosse indicano maggiore attenzione, mentre le aree blu ne ricevono meno.
Tutto qui: hai configurato correttamente gli heatmap di WordPress utilizzando Microsoft Clarity!
Metodo 2: Configurare gli heatmap di WordPress utilizzando UserFeedback
UserFeedback by MonsterInsights ti consente di creare sondaggi che includono una domanda con heatmap visiva, permettendo agli utenti di cliccare su un'immagine per fornire feedback.
È un'ottima opzione per siti web in crescita, negozi online e agenzie che desiderano approfondire le informazioni e avere un maggiore controllo sulla raccolta del feedback dei visitatori.
Su WPBeginner, abbiamo utilizzato UserFeedback per ottenere informazioni su ciò che i nostri clienti di web design desiderano e si aspettano da noi. Abbiamo avuto un'ottima esperienza con esso, e puoi consultare la nostra recensione completa di UserFeedback per capire perché lo raccomandiamo.
Passaggio 1: Installa e attiva UserFeedback
Innanzitutto, dovrai creare un account UserFeedback. Puoi farlo visitando il sito web di UserFeedback e iscrivendoti a un piano.
💡 Nota: Esiste una versione gratuita di UserFeedback per esplorare le sue funzionalità, ma avrai bisogno del piano Elite per sbloccare la funzionalità Heatmaps.
Una volta registrato un account, verrai reindirizzato alla dashboard del tuo account UserFeedback, dove potrai trovare il link per scaricare il file zip di UserFeedback e la tua chiave di licenza.
Ora è il momento di installare il plugin.
Dalla tua dashboard di WordPress, devi andare su Plugin » Aggiungi Nuovo.
Nella schermata successiva, cerchiamo UserFeedback.
Puoi quindi installare e attivare il plugin come qualsiasi altro plugin di WordPress.
Nuovo nell'installazione di plugin? Ecco una guida dettagliata su come installare un plugin di WordPress.
Una volta attivato, puoi inserire la tua chiave di licenza per sbloccare tutte le funzionalità pro incluse nel tuo piano.
Per fare ciò, puoi navigare su UserFeedback » Impostazioni. Quindi, copia e incolla semplicemente la tua chiave di licenza dalla tua dashboard di UserFeedback nel campo 'Chiave di licenza'.
Fai clic sul pulsante 'Verifica' per avviare il processo di verifica.
In pochi secondi, dovresti vedere un messaggio di successo della verifica.
Passaggio 2: Abilita l'addon Heatmaps
Ora, andiamo su UserFeedback » Addons per installare l'addon Heatmaps.
Puoi semplicemente scorrere la pagina per trovare l'addon Heatmaps e fare clic su 'Installa Addon' nella casella appropriata.
Una volta installato, assicurati che sia attivato facendo clic sul pulsante 'Attiva'.
Passaggio 3: Crea una nuova Heatmap
Con l'addon Heatmaps attivato, puoi ora creare la heatmap del tuo sito.
Andiamo su UserFeedback » Heatmaps nella tua dashboard di WordPress e facciamo clic sul pulsante 'Nuova Heatmap'.
Nel popup che appare, espandi il menu a discesa per selezionare la pagina specifica che desideri tracciare. Ad esempio, puoi creare una heatmap per la tua homepage, landing page o post del blog.
Fai clic sul pulsante 'Crea' per configurare la heatmap.
Passaggio 4: Visualizza i risultati della tua Heatmap
Dopo aver creato una heatmap, UserFeedback inizierà immediatamente a raccogliere dati sugli utenti.
Andiamo su UserFeedback » Heatmaps e facciamo clic su una heatmap per vedere approfondimenti visivi dettagliati.
Nella schermata successiva, potrai visualizzare informazioni dettagliate sui tuoi visitatori, tra cui:
- Filtro Dispositivo – Confronta il comportamento degli utenti su desktop, tablet e mobile.
- Click – Vedi esattamente dove le persone cliccano sulla tua pagina.
- Movimenti del Mouse – Tieni traccia di come gli utenti muovono il mouse sullo schermo.
Se stai promuovendo il tuo sito su più canali, puoi anche filtrare i dati per campagna UTM, sorgente o mezzo. Questo ti aiuta a capire come i visitatori provenienti da diversi sforzi di marketing interagiscono con il tuo sito.
E questo è tutto: hai configurato correttamente le heatmap di WordPress utilizzando UserFeedback!
Passaggi bonus: Massimizza le tue analisi delle heatmap 🔥
Le heatmap sono utili solo se sai come agire in base a ciò che ti dicono. Ecco come trasformare queste informazioni in miglioramenti pratici per il tuo sito WordPress.
Correggi i punti in cui i visitatori abbandonano
Puoi utilizzare le mappe di scorrimento per vedere fino a che punto scendono i tuoi visitatori in una pagina. Se contenuti importanti sono sepolti troppo in basso nella pagina, la maggior parte delle persone potrebbe non vederli mai.
Puoi provare a spostare elementi chiave come le CTA o le offerte più in alto nella pagina e suddividere le pagine lunghe con sezioni più piccole e titoli chiari. Puoi anche utilizzare i filtri data per monitorare come queste modifiche influenzano il comportamento dei visitatori nel tempo.
Questa piccola modifica può ridurre i tassi di rimbalzo e mantenere i tuoi visitatori più a lungo impegnati.
Individua e risolvi la confusione degli utenti
A volte, i visitatori cercano di fare clic su immagini, icone o testo che non sono cliccabili. Ciò dimostra che sono confusi o si aspettano qualcosa di diverso.
Puoi rivedere le tue mappe di clic e i movimenti del mouse per individuare queste aree. Se necessario, puoi collegare tali immagini o aggiungere pulsanti nelle vicinanze per semplificare le cose agli utenti.
Puoi anche impostare un rapido sondaggio UserFeedback per chiedere cosa gli utenti si aspettavano di trovare.
Identifica e correggi i problemi di navigazione
Se vedi visitatori che saltano frequentemente tra le pagine senza una direzione chiara, è un segno che la tua navigazione potrebbe essere confusa.
Semplifica la tua navigazione assicurandoti che le informazioni siano facili da trovare e modificando tutto ciò che potrebbe causare confusione. Puoi anche ripercorrere i passaggi importanti sul tuo sito come un visitatore alle prime armi per assicurarti che tutto funzioni correttamente.
Potresti anche voler consultare la nostra guida su come creare un menu di navigazione personalizzato in WordPress.
Rendi i tuoi pulsanti CTA impossibili da non notare
Se le tue CTA (pulsanti di invito all'azione) non ricevono abbastanza clic, prova a cambiare il loro colore, testo o posizionamento in modo che risaltino di più.
Utilizza le informazioni sui movimenti del mouse per individuare esitazioni prima di fare clic e controlla i filtri dei dispositivi per assicurarti che i tuoi CTA siano visibili e facili da cliccare su tutti i dispositivi, in particolare su quelli mobili.
🧑💻 Suggerimento Pro: Apportare modifiche ai contenuti e al design è solo l'inizio. Raccomando vivamente anche di impostare test A/B per confrontare diverse versioni di una pagina o di un elemento, come la posizione dei pulsanti, i colori o il testo dell'intestazione, per vedere cosa funziona meglio.
Per istruzioni dettagliate, consulta la nostra guida su come eseguire test A/B split in WordPress.
Guide correlate all'ottimizzazione delle conversioni in WordPress
Speriamo che questo articolo ti abbia aiutato a configurare le heatmap di WordPress.
Successivamente, potresti voler consultare il nostro elenco curato da esperti di suggerimenti avanzati per le landing page per aumentare le conversioni o la nostra guida definitiva al targeting geografico in WordPress:
- Suggerimenti per le Landing Page per Far Schizzare alle Stelle le Conversioni di WordPress
- Migliori Pratiche CTA per Migliori Conversioni delle Landing Page
- Come fare il test A/B split in WordPress
- Come eseguire facilmente il test di regressione visiva in WordPress
- Guida Definitiva al Targeting Geografico in WordPress
- I migliori strumenti di ottimizzazione delle conversioni per WordPress
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.