Cosa registra il tracciamento dei clic su un sito web e quali clic perde

Che cos'è il click tracking su un sito web?

Su un sito web, il click tracking è la pratica di registrare quale elemento ha cliccato un visitatore, su quale pagina e in quale momento, per poi inviare questa registrazione a uno strumento di analytics. In questo modo i clic si possono contare, confrontare e collegare alle conversioni. Un piccolo script ascolta l'evento click del browser, legge cosa è stato cliccato e invia un breve payload a un endpoint di raccolta. Prima di tracciare qualsiasi altra cosa, traccia i clic sugli elementi che decidono se un visitatore converte, come il pulsante di iscrizione, il selettore dei prezzi e il link al checkout.

Il click tracking è il livello di dati che sta sotto diversi report dall'aspetto molto diverso. Un obiettivo conta i clic su un solo pulsante. Una heatmap colora i clic in base alla posizione. Un passaggio di un funnel può essere un clic. Il metodo che scegli decide quali di questi report potranno usare i dati.

Che cosa conta come clic per un browser?

Un browser genera un evento click quando un pulsante del puntatore viene premuto e rilasciato dentro lo stesso elemento, quando un gesto touch lo raggiunge o quando un utente da tastiera lo attiva. Un solo listener copre quindi mouse, touch e tastiera. La documentazione di MDN afferma che "click viene generato dopo che sono stati generati sia mousedown sia mouseup, in quest'ordine", e indica come equivalenti "un gesto touch" e "la pressione del tasto Spazio o Invio mentre l'elemento ha il focus".

La regola della tastiera ha un'insidia che rompe il tracciamento sui controlli personalizzati. MDN precisa che l'equivalenza di Invio e Spazio "vale solo per gli elementi con un gestore di eventi da tastiera predefinito, e quindi esclude gli altri elementi resi focalizzabili impostando l'attributo tabindex". Un <div tabindex="0"> stilizzato come pulsante non riceve nessun click dalla tastiera, quindi gli utenti da tastiera spariscono dal suo conteggio dei clic. Usa un vero <button> o <a> per tutto ciò che vuoi tracciare.

L'evento conta anche le ripetizioni. MDN dice che la proprietà detail contiene "il numero di volte in cui il bersaglio è stato cliccato", quindi vale 2 per un doppio clic e 3 per un triplo clic. Quel contatore è la materia prima per il rilevamento dei rage click.

Quali sono i tre modi per tracciare i clic?

I tre metodi sono un evento con nome su elementi scelti, un unico listener delegato che registra ogni clic della pagina e la cattura delle coordinate, che salva in quale punto dello schermo è caduto ogni clic. Ognuno risponde a una domanda diversa e fallisce in un modo diverso.

Gli eventi con nome sono il metodo alla base dell'event tracking, dove il nome dell'evento indica l'azione e le proprietà portano i dettagli. Il listener delegato è ciò che i fornitori chiamano autocapture. La cattura delle coordinate alimenta la heatmap del sito web, che aggrega le posizioni di molte visite in un'unica immagine. Una divisione pratica è usare eventi con nome per i pochi clic che contano e il session replay per tutti gli altri.

Che cosa deve registrare un evento di clic?

Un evento di clic deve registrare l'identificatore stabile dell'elemento, la pagina in cui è avvenuto, la destinazione per i link e un timestamp, e niente di ciò che ha digitato il visitatore. Questi quattro campi rispondono a "cosa, dove, verso dove e quando" senza salvare nulla di personale.

Escludi il testo del link nelle pagine che mostrano dati dell'account e non leggere mai i valori dei campi di un modulo vicino. Un pulsante con il nome di un cliente sull'etichetta invierebbe quel nome a ogni clic. Un attributo data-track dedicato è l'identificatore più sicuro, perché cambia solo quando qualcuno lo cambia di proposito.

Il listener qui sotto usa un solo gestore per l'intero documento, filtra gli elementi che hanno data-track e invia i dati con navigator.sendBeacon():

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

L'opzione capture: true esegue il gestore durante la discesa nel DOM, prima di qualsiasi gestore sul pulsante stesso. Un componente che chiama event.stopPropagation() nel proprio gestore di clic non può quindi nascondere il clic al tracker.

Perché alcuni clic tracciati non arrivano mai nel report?

I clic spariscono quando la pagina si scarica prima che la richiesta parta, quando un blocker scarta la richiesta o quando l'elemento cliccato non corrispondeva mai al listener. I link hanno in più il rischio della prima causa, perché il clic che avvia la navigazione è anche quello che smantella la pagina che sta inviando il dato.

MDN descrive il problema senza giri di parole: "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." La soluzione è navigator.sendBeacon(), che "asynchronously sends an HTTP POST request containing a small amount of data to a web server" ed è pensato proprio per questo caso. Il confronto tra sendBeacon e fetch keepalive spiega i limiti di dimensione e quando conviene di più fetch con keepalive: true.

Quando i conteggi sembrano bassi, controlla le cause in quest'ordine:

1. Confronta con un totale noto. I clic su un pulsante di checkout non possono superare le visualizzazioni della pagina di checkout. Un rapporto molto sotto le attese indica una perdita di dati, non un interesse scarso.
2. Prova il caso del link. Clicca l'elemento con il pannello di rete aperto e "Preserve log" attivo. Una richiesta segnata come annullata è il problema dello scaricamento della pagina.
3. Prova la tastiera. Raggiungi l'elemento con Tab e premi Invio. Se non arriva nessun evento, hai un div reso focalizzabile al posto di un pulsante.
4. Prova con un blocker attivo. Una richiesta che sparisce con un content blocker va persa, in ogni report, per quella quota di visitatori.
5. Controlla il selettore. Una definizione scritta su un nome di classe smette di corrispondere dopo un restyling, e il conteggio scende a zero senza alcun errore.

Come fa GA4 a tracciare i clic senza codice aggiuntivo?

GA4 traccia automaticamente due tipi di clic sui link tramite la misurazione avanzata, cioè i clic in uscita e i download di file, e non traccia i clic sui pulsanti che restano nel tuo dominio. Il centro assistenza di Google dice che l'evento click scatta "each time a user clicks a link that leads away from the current domain and to another website" e raccoglie "link_classes, link_domain, link_id, link_url, outbound (boolean)." L'evento file_download scatta "when a user clicks a link leading to a file (with a common file extension)."

Tutto il resto, compreso il pulsante di iscrizione e lo switch del listino prezzi, richiede un evento personalizzato. Le guide su come tracciare i link in uscita e i download di file trattano nel dettaglio i due casi automatici.

Cosa rivelano i pattern di clic sulle pagine che non funzionano?

I clic ripetuti su un solo elemento e i clic che non producono nessuna risposta sono i due pattern che indicano una pagina rotta, non un interesse scarso. Un rage click è una raffica di clic sullo stesso elemento, mentre un dead click è un clic dopo il quale nella pagina non cambia nulla. Nel conteggio grezzo dei clic entrambi sembrano coinvolgimento, ed è per questo che un report dei clic senza il contesto della sessione sopravvaluta quanto funziona bene una pagina. La guida rage click e dead click elenca le soglie pubblicate da ciascun fornitore.

Flowsery copre entrambe le metà del lavoro. Gli eventi personalizzati tracciano qualsiasi interazione con una chiamata all'API JavaScript, inclusi clic sui pulsanti, invii di moduli e download di file, e il tracciamento degli obiettivi trasforma quegli eventi in tassi di conversione, come spiegato nella pagina sul tracciamento di obiettivi ed eventi. La registrazione delle sessioni riproduce movimenti del cursore, clic, scroll e input nei moduli, e l'IA di Flowsery segnala rage click, dead click ed errori JavaScript in ogni sessione registrata, poi li raggruppa in problemi ordinati per numero di sessioni coinvolte. Il tracciamento funziona senza cookie e senza banner di consenso.

Domande frequenti

Qual è la differenza tra tracciamento dei clic e heatmap?

Il tracciamento dei clic è la raccolta dei record dei clic, e una heatmap è uno dei modi per mostrarli. Una mappa dei clic aggrega le posizioni x e y di molti clic in una sovrapposizione colorata sull'immagine di una pagina. Gli eventi con nome non portano alcuna posizione e alimentano invece obiettivi e funnel.

Il tracciamento dei clic conta anche i tocchi su mobile?

Sì. Un gesto touch su un elemento fa scattare lo stesso evento click della pressione e del rilascio del mouse, quindi un solo listener conta entrambi. I clic da mobile richiedono una vista heatmap a parte, perché le coordinate cambiano con il layout più stretto.

Perché i clic sui miei link in uscita sono sottostimati?

La pagina inizia a scaricarsi appena il visitatore segue il link, e il browser può scartare una richiesta ordinaria durante lo scaricamento. Inviare l'evento con navigator.sendBeacon() o con fetch e keepalive: true permette alla richiesta di sopravvivere alla pagina. I content blocker eliminano un'ulteriore quota che nessun metodo di invio riesce a recuperare.

Devo tracciare ogni clic o solo quelli importanti?

Traccia come eventi con nome i clic legati a una conversione e lascia il resto alla riproduzione delle sessioni o a una heatmap. Eventi con nome su ogni elemento producono uno schema che nessuno mantiene. Un listener delegato su tutto produce volume, con selettori che si rompono al prossimo restyling.

Il tracciamento dei clic raccoglie dati personali?

Un record di clic contiene un identificatore dell'elemento, un percorso di pagina e un timestamp, e nessuno di questi identifica una persona. I dati personali entrano in gioco quando il payload include il testo del link o valori di moduli che rendono riconoscibili i dati di un cliente, oppure quando i clic vengono collegati a un identificatore persistente. Invia un valore data-track fisso invece del testo visibile per mantenere il record anonimo.

GA4 può tracciare automaticamente i clic sui pulsanti?

No. La misurazione avanzata di GA4 registra i clic sui link che portano fuori dal tuo dominio e sui link a tipi di file comuni. Un pulsante che resta sul tuo sito richiede un evento personalizzato, inviato con il tuo codice o tramite un tag manager.

Perché un <div tabindex="0"> non registra i clic dalla tastiera?

L'equivalenza da tastiera di MDN per Invio e Spazio vale solo per gli elementi con un gestore di eventi tastiera predefinito, il che esclude gli elementi resi focalizzabili solo con tabindex. Un <div tabindex="0"> stilizzato come pulsante non genera mai un evento click quando chi usa la tastiera preme Invio o Spazio, quindi quegli utenti spariscono dal suo conteggio dei clic. Usa un vero <button> o <a> per tutto ciò che vuoi tracciare.

Cosa misura la proprietà detail dell'evento click?

La proprietà detail contiene il numero di volte in cui il bersaglio è stato cliccato, quindi vale 2 per un doppio clic e 3 per un triplo clic. Quel contatore è la materia prima su cui lavora il rilevamento dei rage click. Un evento con nome che registra anche detail può segnalare clic ripetuti su un solo elemento senza alcun listener aggiuntivo.

Qual è la differenza tra rage click e dead click?

Un rage click è una raffica di clic sullo stesso elemento, mentre un dead click è un clic dopo il quale nella pagina non cambia nulla. Nel conteggio grezzo dei clic entrambi sembrano coinvolgimento, quindi un report dei clic senza il contesto della sessione può far passare una pagina rotta per una pagina molto cliccata.

Cosa fa l'opzione capture: true in un listener di click?

Esegue il gestore di tracciamento durante la discesa nel DOM, prima di qualsiasi gestore di click collegato all'elemento stesso. Un componente che chiama event.stopPropagation() nel proprio gestore viene comunque registrato, perché il tracker è già stato eseguito prima che quel gestore scattasse.