Microsoft Clarity per PrestaShop: scopri come i clienti usano davvero il tuo negozio

Clarity è ancora gratuito, senza limite di sessioni, e i passaggi qui sotto per il consenso preventivo e il mascheramento su PrestaShop riflettono le attuali pratiche GDPR.

I tuoi strumenti di analisi possono dirti che il 40% dei visitatori abbandona una determinata pagina prodotto. Non possono dirti che la abbandonano perché il pulsante di aggiunta al carrello si trova sotto un blocco alto di selettori degli attributi che, su telefono, lo spinge fuori dalla prima schermata. I numeri descrivono la perdita; non ti mostrano il punto esatto da cui passa. Microsoft Clarity è lo strumento che te lo mostra, registra sessioni reali e aggrega i clic in mappe di calore, così puoi osservare come i clienti si muovono davvero nel tuo negozio PrestaShop invece di tirare a indovinare da una frequenza di rimbalzo. È gratuito, senza limite di sessioni: ed è proprio questo che rende difficile sostenere il contrario rispetto a "perché non installarlo?".

Questa guida riguarda in modo specifico l'uso di Clarity su PrestaShop e la sua lettura da commerciante, dove inserire lo script perché un aggiornamento del tema non lo cancelli, cosa rivelano in modo affidabile le registrazioni sui tipi di pagina propri di PrestaShop e quale mascheramento GDPR devi davvero configurare. Per la domanda più ampia su quali metriche meritano attenzione, il discorso è diverso, vedi analisi per negozi online: cosa monitorare e cosa ignorare.

Cosa ti dice Clarity che GA4 non potrà mai dirti

Conviene essere precisi sulla divisione dei compiti, perché molti commercianti perdono settimane aspettandosi che uno strumento faccia il lavoro dell'altro. Google Analytics 4 è quantitativo e aggregato: conteggi, percentuali, segmenti, funnel. Clarity è qualitativo e individuale: ti mostra una singola persona alle prese con una singola schermata. Ti servono entrambi, ma per domande diverse.

Il flusso di lavoro pratico è lasciare che GA4 ti dica quale pagina sta perdendo utenti, poi aprire Clarity per capire perché. Il tasso di abbandono è una torcia puntata su una stanza; una registrazione di sessione è entrarci dentro.

Le tre cose che Clarity registra

Registrazioni delle sessioni

Clarity riproduce le visite reali come video, movimento del cursore, scorrimento, clic, esitazioni. In un negozio PrestaShop, i momenti in cui tutto diventa chiaro sono spesso banali e risolvibili: un cliente passa più volte il mouse sopra l'immagine del prodotto perché si aspetta uno zoom che il tema non ha collegato, qualcuno supera con lo scorrimento il pulsante di aggiunta al carrello su mobile perché i menu degli attributi lo hanno spinto più in basso, un acquirente apre il campo coupon e non torna più (è uscito per cercare un codice). Nulla di tutto questo emerge dai dati aggregati. Tutto diventa evidente alla seconda registrazione che guardi.

Mappe di calore

Le mappe di calore aggregano tutti i visitatori in un'unica sovrapposizione, così l'aneddoto di una singola registrazione diventa un modello ricorrente:

• Mappe dei clic mostrano dove si concentra l'attenzione. Se il punto più caldo di una pagina prodotto è un badge non cliccabile o un'immagine statica delle funzionalità, c'è un'aspettativa UX che non stai soddisfacendo.
• Mappe dello scorrimento mostrano la realtà della prima schermata. Se l'80% dei visitatori non arriva mai al blocco di vendita incrociata o al testo rassicurante su cui hai passato una giornata, quel contenuto è di fatto invisibile, e nel template prodotto predefinito di PrestaShop la posizione della piega cambia molto tra varianti del tema e dimensioni dello schermo.
• Mappe delle aree mostrano quali zone della pagina ottengono coinvolgimento, e quindi cosa conviene spostare più in alto.

Segnali di frustrazione

Qui Clarity si guadagna il suo posto, ed è l'insieme di funzionalità in cui supera davvero la maggior parte dei concorrenti nel rilevamento. Segnala automaticamente i clic rabbiosi (clic rapidi e ripetuti su un elemento, di solito qualcosa di rotto o che non risponde), i clic morti (clic su elementi che sembrano interattivi ma non lo sono) e i ritorni rapidi (un visitatore che atterra sulla pagina e torna subito indietro, segnalando che la pagina non era ciò che il link prometteva). Ogni segnale diventa una coorte filtrabile, così puoi passare direttamente a "mostrami ogni sessione con un clic rabbioso sulla pagina del carrello" invece di guardare registrazioni a caso.

Installare Clarity su PrestaShop senza romperlo al prossimo aggiornamento del tema

Clarity è un singolo snippet JavaScript che va inserito nel <head>, caricato su ogni pagina. La trappola è dove lo metti, perché il punto più ovvio è anche quello più fragile.

Non incollarlo nel template del tema. Modificare themes/your-theme/templates/_partials/head.tpl funziona fino al successivo aggiornamento del tema o fino a un cambio tema che lo sovrascrive e fa morire il tracciamento in silenzio, e non te ne accorgerai per settimane, perché non si rompe nulla di visibile. L'intero valore dell'analisi comportamentale viene compromesso da un vuoto nei dati di cui non sapevi nulla.

Due strade solide, in ordine di preferenza:

• Tramite Google Tag Manager. Se usi già un contenitore GTM, aggiungi Clarity come tag HTML personalizzato attivato su All Pages, bloccato dietro il trigger di consenso (ne parliamo più sotto). In questo modo ogni script di terze parti resta in un unico posto verificabile e fuori dal tema, lo stesso ragionamento che spieghiamo in configurare il tracciamento con GTM senza toccare codice. Quindi? Un aggiornamento del tema non può toccarlo, e puoi attivarlo o disattivarlo da un'unica dashboard.
• Tramite un modulo di inserimento nell'intestazione agganciato a displayHeader. Un piccolo modulo "codice personalizzato / HTML nell'header" registrato sull'hook displayHeader inserisce lo snippet nell'head di ogni pagina, vive nel database invece che in un file template e sopravvive ai cambi di tema. È la strada senza sviluppatore se non usi GTM.

In entrambi i casi: crea un progetto gratuito su clarity.microsoft.com, copia lo snippet di tracciamento, distribuiscilo con uno dei metodi sopra e verifica con l'anteprima live nella dashboard di Clarity prima di considerare finito il lavoro. I dati di solito iniziano a comparire entro un paio d'ore. Un controllo specifico per PrestaShop, svuota la cache (Parametri avanzati → Prestazioni → Svuota cache) dopo la distribuzione, perché un head servito dalla cache nasconderà il nuovo script ai visitatori reali anche se a te sembra tutto corretto.

Caricare lo snippet solo dopo il consenso

L'errore più comune dei commercianti è avviare Clarity al caricamento della pagina e applicare il consenso dopo. Bloccalo fin dall'inizio. Se lo inserisci tramite un modulo di codice personalizzato invece che con GTM, lo schema è tenere il loader di Clarity dentro una funzione e chiamarlo solo quando il tuo banner cookie ha registrato l'accettazione della categoria analitica:

<script>
// Clarity's own snippet, wrapped so it only runs after consent
function loadClarity() {
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
}

// Call loadClarity() only when your CMP reports analytics consent.
// Example: most banners expose an event or a stored flag you can read.
if (window.localStorage.getItem("analytics_consent") === "granted") {
  loadClarity();
}
// And subscribe to the consent-change event your banner fires, e.g.:
document.addEventListener("cmp:analytics-accepted", loadClarity);
</script>

Sostituisci YOUR_PROJECT_ID con l'ID della tua dashboard Clarity e sostituisci il controllo del consenso con il segnale che il tuo modulo cookie emette davvero, i moduli di consenso per PrestaShop differiscono per nome del flag ed evento esposto, quindi leggi la documentazione del tuo modulo invece di copiare alla lettera i nomi segnaposto.

Leggere Clarity rispetto ai tipi di pagina reali di PrestaShop

Il consiglio generico "guarda qualche registrazione" spreca lo strumento. Clarity rende quando lo punti sui template specifici di PrestaShop e fai domande precise.

Pagine prodotto (controller product)

• Nella mappa dello scorrimento: il pulsante di aggiunta al carrello è sopra la piega su mobile, oppure selettori degli attributi e selettore quantità lo spingono più in basso? È la perdita più comune che Clarity espone su PrestaShop.
• I clienti cliccano l'immagine principale del prodotto aspettandosi zoom o galleria? Se la mappa dei clic si illumina lì ma non succede nulla (clic morti), l'interazione con l'immagine nel tuo tema manca o non è evidente.
• Usano i selettori degli attributi (taglia, colore) senza intoppi, oppure ci sono clic rabbiosi che suggeriscono una logica delle combinazioni confusa o una variante esaurita senza un messaggio chiaro?
• Arrivano davvero alla scheda descrizione e alle vendite incrociate, o abbandonano prima?

Pagine categoria e ricerca a faccette

• I visitatori usano i filtri della navigazione a livelli (ps_facetedsearch) o li superano scorrendo? Se la barra laterale dei filtri non riceve clic su mobile, potrebbe essere compressa in un punto che non trovano mai.
• Quanto scorrono prima di cliccare un prodotto o andarsene, un segnale per capire se ordinamento predefinito e numero di prodotti per pagina corrispondono all'intento.
• Dove arriva il primo clic: immagine, nome o prezzo? Ti dice quale elemento sta facendo il lavoro di persuasione.

Procedura di acquisto (controller order)

• In quale fase della procedura di acquisto di PrestaShop, dati personali, indirizzi, consegna, pagamento, si bloccano i clienti che poi abbandonano? Le registrazioni mostrano il momento esatto.
• Quali campi del modulo generano tentativi ripetuti o lunghe pause (un caso comune: campi indirizzo che vengono riconvalidati e svuotati, o un campo telefono con formattazione rigida)?
• Il campo coupon manda via le persone? Un riquadro coupon aperto e ben visibile nella procedura di acquisto è una nota rampa di uscita, i clienti vanno su Google a cercare un codice e non tutti tornano.

La procedura di acquisto è il punto in cui le scoperte di Clarity diventano interventi dal valore più alto, perché ogni visitatore che ci arriva vuole già comprare. Se le registrazioni continuano a indicare la stessa frizione nel flusso a passaggi, sezioni che si riconvalidano, troppi blocchi, un riquadro coupon che fa danni. Non è una semplice rifinitura: è un problema strutturale della procedura di acquisto. Ripensare il flusso stesso (una sola schermata, totale aggiornato in tempo reale, acquisto come ospite predefinito) è ciò per cui è stato costruito il nostro modulo Checkout Revolution, configurabile dal back office invece che tramite una fattura da sviluppatore, il tipo di cambiamento che fai dopo che Clarity ti ha mostrato esattamente dove si trova l'attrito.

GDPR: il mascheramento che devi davvero configurare

Clarity maschera per impostazione predefinita testo e contenuto degli input (la sua modalità di mascheramento "Balanced"), ma il comportamento predefinito è configurabile e, in un negozio PrestaShop, ci sono esposizioni specifiche da bloccare esplicitamente, e "la registrazione ha catturato nome e indirizzo completo di un cliente connesso nell'area account" è una violazione reale, comune ed evitabile.

• Il consenso preventivo non è facoltativo. Lo script Clarity non deve caricarsi finché il visitatore non ha accettato i cookie analitici. Se lo avvii tramite GTM, collegalo al trigger di consenso; se tramite un modulo header, attivalo in base al segnale analitico della tua CMP. Caricarlo prima del consenso è l'errore più comune ed è quello che un'autorità nota.
• Maschera esplicitamente le aree con dati personali di PrestaShop. Usa le regole di mascheramento di Clarity (e l'attributo data-clarity-mask, oppure una configurazione di mascheramento tramite selettori CSS) sul blocco account cliente (template my-account / identity), sulla pagina di conferma ordine e su qualsiasi visualizzazione di indirizzi, così le registrazioni non salvano nomi, indirizzi o dettagli dell'ordine. Il mascheramento però nasconde solo il contenuto visivo nella riproduzione, non rimuove i dati personali che finiscono altrove. Abbinalo alla pulizia degli identificatori da URL e stringhe di query, a non passare mai dati personali in tag, attributi o eventi personalizzati, e alla verifica che eventuali sondaggi o raccolte feedback non catturino testo libero che espone un cliente.
• Dichiaralo. Inserisci Microsoft Clarity come responsabile del trattamento nella tua informativa sulla privacy e collocalo nella categoria "analitica" del tuo banner cookie.

Se stai valutando questo tipo di trattamento dati da parte di terzi rispetto al mantenere l'analisi internamente, è una scelta deliberata che merita una decisione a sé, ne parliamo in analisi privacy-first per il tuo negozio.

Dove si colloca Hotjar, e dove no

Il corrispettivo più vicino a Clarity è Hotjar; entrambi offrono mappe di calore e registrazioni. La versione breve e onesta: Clarity è gratuito con sessioni illimitate e un rilevamento della frustrazione più forte, mentre Hotjar aggiunge sondaggi sul sito e widget di feedback per cui Clarity non ha un equivalente. Per la maggior parte dei negozi PrestaShop, il piano gratuito di Clarity copre completamente il lavoro di analisi comportamentale, e sceglieresti Hotjar soprattutto quando vuoi fare domande ai visitatori invece di limitarti a osservarli. Facciamo il confronto completo funzionalità per funzionalità, incluse le specifiche di configurazione su PrestaShop per ciascuno, in Hotjar per PrestaShop, quindi non lo ripetiamo qui.

Un'insidia specifica di PrestaShop: traffico bot nelle registrazioni

Se inizi a guardare le registrazioni e trovi sessioni che aggiungono un prodotto al carrello e poi non fanno nulla di umano, nessuno scorrimento, azioni istantanee, nessuna procedura di acquisto, potresti osservare traffico automatizzato, non clienti. Sessioni bot o automatizzate possono comparire negli strumenti di analisi e registrazione, falsando la percezione di come si comportano i visitatori "reali". Prima di riprogettare una pagina attorno a uno schema mostrato da Clarity, filtra le sessioni sospette e verifica con buon senso che ciò che resta sia umano. Spieghiamo che cos'è quel traffico e perché non dovresti bloccarlo in Google Storebot fa acquisti nel tuo negozio PrestaShop.

Dal guardare all'agire, una routine che sopravvive al primo mese

Il modo in cui l'analisi comportamentale fallisce è guardare registrazioni come intrattenimento e non cambiare nulla. Collegala a una cadenza:

• Ogni settimana: guarda 10–15 sessioni, filtrate sulle sessioni della procedura di acquisto e sulle tue pagine prodotto con più uscite, non sessioni casuali. I filtri per segmento di Clarity rendono questo lavoro questione di due minuti.
• Ogni mese: rivedi le mappe di calore delle tue dieci pagine principali e controlla i punti caldi di clic rabbiosi e clic morti per individuare nuove regressioni (una modifica al tema che rompe un bersaglio di clic appare qui per prima).
• Dopo ogni modifica: quando sposti un pulsante, modifichi un template o cambi la procedura di acquisto, guarda le registrazioni della nuova versione per confermare che si comporti come previsto, invece di darlo per scontato.

Ogni osservazione dovrebbe produrre un'azione specifica e nominata: spostare l'aggiunta al carrello sopra la piega su mobile, collegare lo zoom immagine dimenticato dal tema, correggere il campo che continua a svuotarsi, nascondere il riquadro coupon dietro un link "Hai un codice?". Piccole azioni singolarmente; potenti quando si accumulano in un trimestre.

Clarity è gratuito e richiede dieci minuti per essere installato correttamente su PrestaShop. Il motivo per cui vale la pena farlo è lo stesso per cui la maggior parte dei titolari di negozi sbaglia nel valutare la propria procedura di acquisto: hai progettato tu il negozio, quindi non puoi vederlo come lo vede un visitatore alla prima visita. Clarity ti permette di guardare sopra la sua spalla. Affiancalo a GA4 per i numeri, maschera correttamente i dati dei clienti, puntalo sui tipi di pagina reali di PrestaShop e agisci su ciò che ti mostra. È questo ciclo a trasformare uno strumento di analisi gratuito in miglioramenti misurabili e difendibili per il tuo negozio.

Domande frequenti

Microsoft Clarity è davvero gratuito o c'è un trucco per un negozio PrestaShop molto trafficato?

È gratuito senza limite di sessioni, e vale sia che il tuo negozio riceva cento visite al giorno sia che ne riceva decine di migliaia. Il compromesso non è economico. È che i dati sul comportamento dei visitatori vengono elaborati da Microsoft, quindi devi indicare Clarity come responsabile del trattamento nella tua informativa sulla privacy e bloccarlo dietro il consenso analitico come qualsiasi altro tracker di terze parti. Se per te è importante non inviare i dati comportamentali a server di terze parti, questo è l'argomento a favore di un'alternativa self-hosted, che valutiamo in Matomo vs Google Analytics.

Clarity rallenterà il mio negozio PrestaShop?

Lo script di tracciamento si carica in modo asincrono, quindi non blocca il rendering della pagina. La nota realistica sulle prestazioni è che si tratta di una richiesta di terze parti in più, e su un negozio che carica già diversi tag la somma si sente, un altro motivo per gestirli tutti tramite un unico contenitore GTM bloccato dal consenso invece di disseminare snippet. Se la velocità della pagina è già un problema, risolvi prima quella; uno strumento di registrazione non sarà il collo di bottiglia, ma non è nemmeno privo di peso.

Clarity funziona con le procedure di acquisto PrestaShop in una pagina e basate su moduli?

Sì, Clarity registra ciò che viene renderizzato nel browser, quindi cattura sia la procedura di acquisto nativa di PrestaShop in cinque passaggi sia i moduli di acquisto in una pagina. La cosa da verificare è il mascheramento: i moduli di acquisto personalizzati possono generare campi in markup che le regole di mascheramento predefinite non intercettano, quindi guarda alcune tue registrazioni della procedura di acquisto dall'inizio alla fine e conferma che nessun campo email, indirizzo o simile a una carta sia visibile prima di fidarti.

Posso usare Clarity e GA4 contemporaneamente?

Sì, e in genere dovresti, rispondono a domande diverse. GA4 ti dà conteggi e percentuali aggregati che indicano quale pagina sta perdendo utenti; Clarity ti mostra perché. Caricali entrambi tramite lo stesso contenitore GTM dietro lo stesso trigger di consenso analitico, così si attivano insieme e nessuno dei due parte prima dell'accettazione del visitatore.

Perché Clarity mostra sessioni che non si comportano come veri acquirenti?

Perché alcune non lo sono. Il traffico automatizzato, crawler e bot per lo shopping, attraversa le pagine PrestaShop e appare nelle registrazioni come sessioni istantanee, senza scorrimento e non umane. Filtrale prima di trarre conclusioni, altrimenti riprogetterai una pagina attorno a un comportamento che nessun cliente ha mai mostrato. Trattiamo il fenomeno in Google Storebot fa acquisti nel tuo negozio PrestaShop.