Mar 2026

Come usare Microsoft Clarity e Google Tag Manager per analizzare carrelli e form abbandonati

Avere automazioni di marketing per recuperare vendite e conversioni è un’ottima cosa.

Se ci pensi però è un po’ come mettere un asciugamano sotto un tubo che perde acqua, invece di capire la causa e riparare la perdita.

Risolvere il problema dei tassi di abbandono di checkout e moduli di contatto significa, rispondere alla domanda più importante:

cosa succede esattamente nel momento in cui l’utente cerca di completare un pagamento, o inizia a compilare un form di richiesta preventivo, e poi non succede nulla?

Ma soprattutto: “come faccio a sapere se il mio funnel marketing sta perdendo conversioni a causa di problemi nelle pagine di checkout o form che non sto vedendo?”

Microsoft Clarity di default registra già i Rage Clicks (click ripetuti e frenetici su un elemento che non funziona) e i Dead Clicks (click su elementi che non generano le azioni attese).

Questi segnali sono preziosi, ma da soli non bastano per capire se il problema è tecnico lato codice, o di UX (né sono sufficienti a raccogliere insights per capire COME risolverlo).

Hai bisogno di sapere esattamente quando, in quale pagina e in quale sezione della pagina è scattato un errore JavaScript, un errore di validazione del form, o un errore di risposta del server.

E una volta stanato l’eventuale problema analizzando i report Recordings e Heatmap di Clarity, potrai identificare azioni chiave per rimuovere l’ostacolo che blocca gli utenti e aumentare cosìì il tasso di conversione.

In questa guida ti mostro come farlo: configurando 3 eventi in Google Tag Manager riuscirai a intercettare gli errori tecnici e inviarli a Microsoft Clarity, per poi analizzare le sessioni di navigazione filtrate per fare analisi mirate.

Sei pronto? Iniziamo!

Cosa sono Click Errors e JavaScript Error Details

Prima di mettere le mani in pasta, facciamo chiarezza.

JavaScript Error Details è una funzionalità che intercetta tutti gli errori che si verificano durante il percorso di navigazione dell’utente: dai click di cambio pagina, al caricamento di un elemento multimediale, etc.

Clarity li raggruppa per tipo e le ordina in base alla frequenza in cui si verificano.

Come immaginerai esistono svariate casistiche, ma in particolare Clarity monitora 4 principali tipologie di errori JavaScript e che trovi spiegate qui:

1- Illegal Invocation: non viene eseguita una determinata funzione del browser legata a un elemento specifico di pagina (animazione pulsante, contatore pricing, etc.).

2- Unexpected Token: il browser trova del codice JavaScript “rotto” (ad esempio, quando un tag <script>), rallentando il caricamento di elementi o dell’intera pagina.

3- (il meno problematico) ResizeObserver Loop Limit Exceeded: funzionalità adibite a controllare il ridimensionamento degli elementi di pagina (zoom, rotazione verticale > orizzontale del monitor del telefono, etc.) si bloccano, eseguendo azioni di controllo in loop, consumando CPU rallentando scroll e animazioni

4- JQuery is not defined: il codice del tuo sito prova a usare funzioni di jQuery (una libreria JavaScript comune per animazioni e interattività), ma jQuery non viene caricato, causando malfunzionamenti di esecuzione di elementi della pagina.

Click Errors è un subset di errori JavaScript che si verificano immediatamente dopo un click dell’utente: aggiunta prodotto al carrello, l’invio di un form, play di un video embeddato, etc.

In altre parole, la funzionalità JavaScript Error Details intercetta malfunzionamenti che si registrano sotto il cofano della tua auto (radiatore, livello dell’olio, etc.).

Mentre Click Errors ti ragguaglia su cosa si è rotto nella carrozzeria o nei componenti interni dell’auto (freno, cambio, specchietto, etc.).

I 3 eventi personalizzati di Google Tag Manager per monitorare abbandono carrello e form in Clarity

Non fraintendere.

Le due funzionalità Clarity Click Errors e JavaScript Error Details sono di grande aiuto per trovare malfunzionamenti impattanti su UX e tassi di conversione.

Tuttavia, quando si tratta di ecommerce o siti web strutturati con numerose pagine, prodotti, articoli di blog con call to action, è necessario aggiungere lenti d’ingrandimento più accurate.

Per farlo, ti basterà configurare solamente 3 eventi personalizzati in Google Tag Manager (GTM).

Creerai così un sistema che monitora alcuni degli errori più frequenti che portano con più frequenza gli utenti ad abbandonare il processo di acquisto o di invio form.

Ora ti spiego perché ti suggerisco vivamente di configurare questi 3 fantastici eventi in GTM che invieranno a Clarity set di dati e informazioni preziosissime per analizzare le sessioni di abbandono.

Evento js_error — Errore JavaScript

Immagina un utente su una pagina prodotto di un ecommerce di abbigliamento.

Clicca su “Aggiungi al carrello”. Non succede nulla. Il tasto sembra non rispondere.

In realtà, in background, uno script del plugin del carrello è andato in conflitto con uno script del chatbot appena installato.

L’utente non vede nessun messaggio d’errore — vede solo un bottone che non funziona.

Questo è un errore JavaScript. E succede più spesso di quanto pensi, soprattutto dopo aggiornamenti di plugin o integrazioni di terze parti.

E con GTM abbiamo già comodo comodo un trigger nativo per intercettare questo genere di errori!

Evento form_validation_error — Errore di Validazione

Un utente compila un form di richiesta preventivo. Inserisce il numero di telefono senza il prefisso internazionale. Appare il messaggio “Formato non valido” in rosso sotto il campo.

L’utente non capisce cosa correggere, si frustra, e abbandona.

Questo tipo di errore è di User Experience: il sito funziona correttamente, ma la validazione è poco chiara o troppo rigida.

Tracciarlo ti permette di capire quali campi generano più attriti — e intervenire con una UX migliore o un messaggio d’errore più esplicito.

Evento api_error — Errore di risposta del server

L’utente ha fatto tutto bene: ha scelto il prodotto, compilato l’indirizzo, inserito i dati della carta. Clicca su “Conferma ordine”.

Il server risponde con un errore 500 (errore interno) o un timeout. La pagina si blocca o mostra un generico “Ops… Qualcosa è andato storto”, e l’utente chiude la pagina.

Questo è l’errore più insidioso di tutti: infatti, nella maggior parte dei casi è quasi impossibile sapere se, quando e dove si è verificato, perché non genera risposte esplicite da parte dell’utente, come ad esempio il rage click.

Verifica i prerequisiti tecnici

Prima di procedere alla configurazione, assicurati di avere:

✅ Microsoft Clarity già installato sul tuo sito (via GTM)
✅ Google Tag Manager configurato e funzionante
✅ Eventi da tracciare già presenti nel dataLayer

Se ancora non l’hai fatto segui questa guida per configurare Microsoft Clarity in modo semplice e sicuro.

Configurare evento js_error (Errore JavaScript) in GTM

Step 1 – Attiva le Variabili Integrate (Built-In Variables)

Accedi al tuo contenitore Google Tag Manager e segui queste istruzioni:

Vai su Variabili > Configura (nel pannello Variabili integrate)
Spunta tutte le voci sotto “Errori”: Error Message, Error URL, Error Line

Step 2 – Crea l’Attivatore (Trigger)

Vai su Attivatori > Nuovo > Configurazione attivatore
Tipo di attivatore: Errore JavaScript
Condizione: scegli Tutti gli errori JavaScript (oppure limitati alle pagine dove sono caricati i carrelli o form strategici di contatto usando Some JavaScript Errors -> Page Path contains e inserisci il percorso delle pagine che vuoi monitorare, ad esempio /checkout/)
Salva il trigger: MC – JS Error

Step 3 – Crea il Tag

Vai su Tag > Nuovo > Modelli (Template Gallery) > cerca e scegli il template “Microsoft Clarity by luratic”
Nel campo “Clarity Project ID” inserisci il codice ID del tuo account Clarity (deve essere il medesimo che hai usando al momento della configurazione del tag di attivazione di Clarity su tutte le pagine del tuo sito web, come ti mostro in questa guida)
Metti la spunta su Add Custom Events (Aggiungi Eventi Personalizzati)
Nel campo Event Name che appare, scrivi: js_error
Metti la spunta su Add Custom Tags e nel campo Key scrivi js_error_msg; nel campo Value invece clicca sull’icona del mattoncino (Variabili) e seleziona {{Error Message}}
Collega l’attivatore JS Error creato nello step 2
Dai un nome e salva l’evento: MC Event – JS Error

Configurare form_validation_error (Errore di validazione)

Qui configuriamo un tag che si aggancia al messaggio di errore quando si interagisce con un form di contatto.

Quando l’utente si dimentica di compilare un campo di un form o un checkout, o completa un campo con un formato di testo non valido, il sito mostra un messaggio (ad esempio, “Campo obbligatorio”, o “Formato non valido”).

L’evento GTM form_validation_error è perfetto per mappare problemi comuni legati alla corretta compilazione di un form, che può essere spesso causa di frustrazione e di abbandono.

Step 1 – Identifica il selettore CSS dell’errore di campi del form

Vai sul tuo sito, apri una pagina che contiene un form e invialo vuoto per far apparire i messaggi di errore
Clicca col tasto destro sul messaggio di errore rosso > Ispeziona
Trova la classe CSS che identifica quell’errore (ad esempio, <span class=”wpcf7-not-valid-tip”>)
Prendi nota del nome di questa classe (nel mio esempio: _error-inner).

Step 2 – Crea l’Attivatore (Trigger)

Sempre nel tuo contenitore GTM, vai su Attivatori > Nuovo
Tipo di attivatore: Visibilità elemento
Metodo di selezione: Selettore CSS
Selettore elemento: inserisci la classe trovata prima (nel mio caso, ._error-inner)
Regola di attivazione: “Ogni volta che un elemento compare sullo schermo”
Nel campo “Percentuale minima visibile” (Minimum Percent Visible) imposta il valore a 1 (questo garantisce che il trigger scatti non appena anche solo un pixel dell’errore compare a schermo)
Spunta “Osserva le modifiche del DOM” (fondamentale perché i messaggi d’errore spesso compaiono dinamicamente senza ricaricare la pagina)
Dai un nome e salva il trigger: MC – Form Validation Error.

Step 3 – Crea il Tag

Vai su Tag > Nuovo > vai su Modelli (Template Gallery) > cerca e scegli il template “Microsoft Clarity by luratic”
Nel campo “Clarity Project ID” inserisci il codice ID del tuo account Clarity (deve essere il medesimo che hai usando al momento della configurazione del tag di attivazione di Clarity su tutte le pagine del tuo sito web, come ti mostro in questa guida)
Nel campo Event Name che appare, scrivi: form_validation_error
Collega l’attivatore creato nello step 2: MC – Form Validation Error
Dai un nome e salva l’evento: MC Event – Form Validation Error

Tracciare gli errori di risposta del server (API Error)

Questo è l’evento più complesso da implementare, ma anche quello con il maggiore impatto sul tasso di conversione (specialmente per gli ecommerce).

In pratica, il fantastico API Error di GTM ascolta tutte le chiamate che una pagina invia al server (ad esempio, invio dei dati del carrello, caricamento prodotti richiesti nella barra di ricerca, etc.).

Se la risposta del server restituisce un codice di errore HTTP (400, 422, 500, 502, 503…), allora GTM invia l’evento a Clarity per analizzare le specifiche sessioni di navigazione ed elementi che hanno causato l’errore.

Step 1 – Configura il Trigger

Per un ecommerce, ti consiglio di attivare questo tag solo sulle pagine critiche del funnel, in modo da non avere dati sporcati da falsi positivi o da pagine non strategiche per il business.

Nel tuo GTM vai su Attivatori (Trigger)
Crea un trigger Page View con condizione: Page Path → matches RegEx → checkout|carrello|pagamento|conferma
Dai un nome al tag e salva: DL – API Error Detected

Step 2 – Crea il Tag Custom HTML

Non si tratta del tag vero e proprio che invia il segnale e i dati delle sessioni con errori API a Clarity.

Si tratta di un listener JavaScript, un codice che ascolta e intercetta l’errore.

Una volta configurato il listener degli errori API, creeremo il tag vero e proprio che invierà le informazioni a Clarity.

Per creare il listener degli errori API:

Vai in Tag → Nuovo → Configurazione tag → HTML personalizzato
Inserisci questo codice:

<script>
(function() {
var originalFetch = window.fetch;
window.fetch = function() {
return originalFetch.apply(this, arguments).then(function(response) {
if (!response.ok && response.status >= 400) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'api_error_detected',
'api_error_status': response.status,
'api_error_url': response.url
});
}
return response;
});
};

var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener('load', function() {
if (this.status >= 400) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'api_error_detected',
'api_error_status': this.status,
'api_error_url': this.responseURL
});
}
});
origOpen.apply(this, arguments);
};
})();
</script>

Attenzione: questo codice deve attivarsi il prima possibile sulla pagina, prima che altri script effettuino chiamate di rete.

Per farlo, apri il menu a tendina “Advanced Settings” e imposta la priorità di attivazione del tag con un valore alto. Ad esempio “100”.

Collega il tag al trigger creato nello step precedente: DL – API Error detected
Dai un nome al tag e salva: DL – API Error listener

Step 3 – Crea il il Trigger dell’evento API Error vero e proprio

Ora configuriamo l’attivatore GTM per creare il tag di invio a Clarity degli errori API registrati dal listener creato nello step precedente.

Vai su Attivatori > Nuovo > Evento personalizzato
Imposta come nome evento: api_error_detected (È lo stesso nome che abbiamo usato nel codice del listener dello step precedente)
Dai un nome al trigger e salva: MC – API Error monitoring

Step 4 – Crea la Variabile dell’evento API Error vero e proprio

Questa variabile permetterà a GTM di leggere il codice di errore (es. 404, 500) intercettato dal listener del datalayer impostato nello step 2.

Vai su Variabili > Nuova > Variabili definite dall’utente (User-defined Variables)
Seleziona il tipo di variabile: Variabile di livello dati (Data Layer Variable)
Inserisci il nome della variabile di livello dati: api_error_status (È lo stesso nome che abbiamo usato nel codice del listener dello step 2)
Dai un nome alla variabile e salva: API Error status

Step 5 – Crea il Tag dell’evento API Error

Vai su Tag > Nuovo > vai su Modelli (Template Gallery) > cerca e scegli il template “Microsoft Clarity by luratic”
Nel campo “Clarity Project ID” inserisci il codice ID del tuo account Clarity (deve essere il medesimo che hai usando al momento della configurazione del tag di attivazione di Clarity su tutte le pagine del tuo sito web, come ti mostro in questa guida)
Metti la spunta su Add Custom Events (Aggiungi Eventi Personalizzati)
Nel campo Event Name che appare, scrivi: api_error
Metti la spunta su Add Custom Tags e nel campo Key scrivi status_code. Nel campo Value invece clicca sull’icona del mattoncino (Variabili) e seleziona {{API Error Status}}
Come attivatore scegli quello creato nello step 3: MC – API Error monitoring
Dai un nome al tag e salva: MC – API Error Event

Verifica con il Debug di GTM

Come sempre, prima di pubblicare usa la modalità Preview di GTM.

Clicca su Preview in alto a destra in GTM, inserisci l’URL del tuo sito e clicca Connect.

Per testare ogni evento:

js_error: Apri la Console del browser (clicca F12 oppure fai clic col tasto destro del mouse e vai sulla sezione “Console”).
Digita “throw new Error(‘test’)”. Dovresti vedere il trigger MC – JS Error attivarsi nella timeline del debug e il tag MC Event – JS Error passare fra i Tags Fired
form_validation_error: Vai sulla pagina del form, compila un campo in modo errato (ad esempio, inserisci una email senza il simbolo @) e invia. Verifica che il tag MC Event – Form Validation Error si attivi
api_error: Apri la Console del browser (clicca F12 oppure fai clic col tasto destro del mouse e vai sulla sezione “Console”).
Scrivi questa stringa di testo e premi invio: “fetch(‘/url-finto’)”. Verifica che il tag MC – API Error Event si attivi

Come usare i Custom Events e i filtri in Clarity per analizzare carrelli e form abbandonati

Ora è il momento di trovare e di guardare da vicino le sessioni di navigazione con abbandoni carrello o di form contatto che hanno registrato gli errori tecnici o di UX che abbiamo configurato in GTM.

Step 1: Imposta i filtri personalizzati

Apri il progetto su Microsoft Clarity.

In alto a sinistra, clicca sul bottone Filters (Filtri).

Clicca sulla sezione User actions: troverai una voce con un menu a tendina Smart events (in questa guida ti spiego come funzionano e come configurare gli Smart Events in Microsoft Clarity).

Aprendo il menu a tendina compariranno i nomi degli eventi che abbiamo impostato in GTM: js_error, form_validation_error e api_error.

Selezionane uno (ad esempio, form_validation_error) e clicca su Apply.

Step 2: Incrocia i dati

Vedere solo gli errori è utile, ma incrociarli con il comportamento dell’utente e i device è ciò che salva il fatturato.

Ecco perché ora puoi sbizzarrirti a creare scorecards e analizzare le sessioni di traffico per ciascun errore tracciato, identificando le problematiche più comuni che bloccano il percorso di conversione degli utenti.

Ad esempio, se vuoi monitorare errori tecnici o di UX per sessioni di traffico su pagine di checkout, dal menu Filters di Clarity:

vai alla sezione Path (Percorso pagina) > contains > /checkout
clicca sulla sezione User actions e apri il menu della sezione Smart Events > seleziona api_error
conferma l’impostazione dei filtri cliccando su Apply

Spostandoti poi nella sezione Recordings, potrai vedere e analizzare SOLO le sessioni di traffico nelle pagine critiche di acquisto prodotto dove, ad esempio, gli utenti hanno cliccato sul pulsante “Procedi al pagamento” e non succede nulla a causa di un errore del server, o del gateway di pagamento.

Da questa analisi potrai raccogliere insight preziosi per capire la reale ragione dell’abbandono carrello e la tipologia di errore API che l’ha provocato, trovando contromisure per risolvere il problema.

Facciamo un altro esempio.

Se vuoi analizzare le sessioni in cui gli utenti non riescono a completare l’invio di un form e iniziano a cliccare in modo compulsivo sul tasto di invio, dal menu Filters di Clarity:

clicca sulla sezione User actions e apri il menu della sezione Smart Events > seleziona form_validation_error
vai alla sezione User actions > Rage Clicks
conferma l’impostazione dei filtri cliccando su Apply

Sempre nella sezione Recordings, ad esempio potrai vedere e analizzare le sessioni in cui un utente ha sbagliato a compilare un campo

perché la password non rispettava i criteri richiesti
il prefisso del numero di telefono non era accettato
non ha visto (o non ha capito) il messaggio d’errore.

E in seguito a questi errori ha iniziato a cliccare furiosamente sul tasto “Invia” prima di abbandonare il modulo.

Da questa analisi potrai capire se il problema è nella visibilità del messaggio d’errore, nella sua formulazione, o nei criteri di validazione stessi e risolvere il problema.

Vediamo un’ultima casistica.

Vuoi capire se il tasso di abbandono carrello sono dovuti a sessioni in cui uno script JavaScript va in conflitto con la navigazione da mobile.

Sempre dal menu Filters di Clarity:

clicca sulla sezione User actions e apri il menu della sezione Smart Events > seleziona js_error
vai alla sezione Device > Mobile
conferma l’impostazione dei filtri cliccando su Apply

Grazie a questi filtri potrai analizzare le sessioni da smartphone in cui un errore JavaScript ha bloccato la navigazione dell’utente, ad esempio:

un pop-up
la live chat
il banner dei cookie

Tutti elementi che possono andare in conflitto con il carrello, rendendo impossibile procedere all’acquisto.

Conclusioni

Dopo il debug e i test tutti gli eventi scattano correttamente?

Hai dubbi su come poter vedere questi dati in Microsoft Clarity? Raccontamelo nei commenti qui sotto! 🙂

Buon Tag!

P.S.: Vuoi ricevere guide pratiche, inviti a risorse formative esclusive e a webinar formativi gratuiti sul tracciamento e analisi dati per il marketing e l’advertising direttamente nella tua inbox?

Iscriviti qui alla newsletter gratuita di Tag Manager Italia (già scelta da oltre 7.800 professionisti del web)