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 intercettare gli errori tecnici e inviarli a Microsoft Clarity, per poi analizzare le sessioni di navigazione filtrate per fare analisi mirate.
Sei pronto? Iniziamo!
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.).
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.
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!
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.
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.
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.
Accedi al tuo contenitore Google Tag Manager e segui queste istruzioni:
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.
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.
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.
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:
<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”.
Ora configuriamo l’attivatore GTM per creare il tag di invio a Clarity degli errori API registrati dal listener creato nello step precedente.
Questa variabile permetterà a GTM di leggere il codice di errore (es. 404, 500) intercettato dal listener del datalayer impostato nello step 2.
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:
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.
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.
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:
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:
Sempre nella sezione Recordings, ad esempio potrai vedere e analizzare le sessioni in cui un utente ha sbagliato a compilare un campo
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:
Grazie a questi filtri potrai analizzare le sessioni da smartphone in cui un errore JavaScript ha bloccato la navigazione dell’utente, ad esempio:
Tutti elementi che possono andare in conflitto con il carrello, rendendo impossibile procedere all’acquisto.
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)
Fgm04, fondata nel 2004 è una realtà di cosmeceutica professionale, evolutasi fino a diventare un…
Gli Smart Events di Microsoft Clarity sono eventi che tracciano automaticamente le azioni più importanti…
L'11 gennaio 2025 Google ha annunciato il lancio di Universal Commerce Protocol (UCP), un nuovo…
Giuseppe Zanotti, brand italiano di luxury footwear fondato nel 1994 e riconosciuto a livello internazionale…
Champion, storico brand americano fondato nel 1919 e tra i protagonisti del mondo sportswear e…
In un contesto dove AI, privacy e percorsi di navigazione omnichannel stanno cambiando il modo…