Registrazione dei dati utente per heatmap con JavaScript

Question

Mi chiedevo come siti come crazyegg.com memorizzano i dati di clic dell'utente durante una sessione. Ovviamente c'è uno script sottostante che memorizza i dati di ogni clic, ma come vengono inseriti i dati in un database? Mi sembra che la soluzione semplice sarebbe quella di inviare dati via AJAX, ma se consideri che è quasi impossibile ottenere una configurazione della funzione di scaricamento della pagina cross-browser, mi chiedo se ci sia forse un altro modo più avanzato per ottenere i dati delle metriche.

Ho persino visto un sito che registra ogni movimento del mouse e suppongo che non stiano sicuramente inviando i dati a un database su ciascun evento di spostamento del mouse.

Quindi, in poche parole, che tipo di tecnologia avrei bisogno per monitorare l'attività degli utenti sul mio sito e quindi memorizzare queste informazioni al fine di creare dati metrici? Non sto cercando di ricreare GA, sono solo molto interessato a sapere come viene fatto questo genere di cose.

Grazie in anticipo

Answer 1

L'idea fondamentale utilizzata da molti sistemi di tracciamento utilizza un'immagine 1x1px richiesta con parametri GET aggiuntivi. La richiesta viene aggiunta al file di log del server, quindi i file di log vengono elaborati per generare alcune statistiche. Quindi una funzione di tracciamento click minimalista potrebbe assomigliare a questo:

document.onclick = function(e){ 
    var trackImg = new Image(); 
    trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY; 
} 

AJAX non sarebbe utile perché è soggetta alla politica stessa origine (non sarà in grado di inviare le richieste al server di monitoraggio). E dovresti aggiungere il codice AJAX al tuo script di monitoraggio. Se si desidera inviare più dati (come i movimenti del cursore), si memorizzano le coordinate in una variabile e si esegue periodicamente il polling di una nuova immagine con percorso aggiornato nel parametro GET.

Ora ci sono molti molti problemi:

• compatibilità cross-browser - per rendere il lavoro di funzione di cui sopra in tutti i browser che contano in questo momento si sarebbe probabilmente necessario aggiungere altri 20 righe di codice
• ottenere dati utili
  • molte pagine sono a larghezza fissa, centrato, quindi X crudo e coordinate Y non vi consentono di creare sovrapposizione visiva di click n pagina
  • alcune pagine hanno elementi liquidi larghezza, o utilizzare una combinazione di min-max-height e
  • gli utenti possono utilizzare font di diverse dimensioni
  • elementi dinamici che appaiono sulla pagina in risposta alle azioni dell'utente
• ecc ecc

Quando hai elaborato lo script di monitoraggio devi solo creare uno strumento che tenga registri del server non elaborati e li trasformi in heatmap lucidi :)

Answer 2

Non so gli esatti dettagli di implementazione di come CrazyEgg lo fa, ma il modo in cui lo farei è quello di memorizzare gli eventi del mouse in un array che manderei periodicamente su AJAX per la backend – es gli eventi del mouse catturati vengono raccolti e inviati ogni 30 secondi al server. Questo distoglie lo sforzo di creare una richiesta per ogni evento, ma garantisce anche che io perderà solo 30 secondi di dati al massimo. Puoi anche aggiungere l'invio all'evento di scaricamento che aumenta la quantità di dati che ottieni, ma non dipenderai da esso.

Qualche esempio su come mi piacerebbe implementare (usando jQuery come le mie competenze di vaniglia JS sono un po 'arrugginito):

$(function() { 

    var clicks = []; 

    // Capture every click 
    $().click(function(e) { 
     clicks.push(e.pageX+','+e.pageY); 
    }); 

    // Function to send clicks to server 
    var sendClicks = function() { 
     // Clicks will be in format 'x1,y1;x2,y2;x3,y3...' 
     var clicksToSend = clicks.join(';'); 
     clicks = []; 
     $.ajax({ 
      url: 'handler.php', 
      type: 'POST', 
      data: { 
       clicks: clicksToSend 
      } 
     }); 
    } 

    // Send clicks every 30 seconds and on page leave 
    setInterval(sendClicks, 30000); 
    $(window).unload(sendClicks); 
}); 

Si noti che non ho ancora testato o provato questo in qualsiasi modo, ma questo dovrebbe darti un'idea generale

Answer 3

Se stai cercando solo l'interazione, puoi sostituire il tuo <input type="button"> con <input type="image">. Questi vengono automaticamente inviati con le coordinate X, Y di dove l'utente ha fatto clic.

jQuery ha anche una buona implementazione dello mousemove even binding che può tracciare la posizione corrente del mouse. Non conosco il risultato finale desiderato, ma è possibile impostareTimeOut (submitMousePosition, 1000) per inviare una chiamata ajax con la posizione del mouse ogni secondo o qualcosa del genere.

Answer 4

Non vedo davvero perché pensi che sia impossibile archiviare tutti punti di clic in una sessione utente nel database?

La loro moto è "Vedere dove le persone Fare clic su" Una volta che si raccolgono dati sufficienti è abbastanza facile creare mappe di calore in processi batch.

Le persone stanno davvero sottovalutando database, indicizzazione e condivisione. L'unica cosa difficile qui è raccogliere abbastanza soldi per l'architettura sottostante :)

Answer 5

L'analisi della mappa termica risulta essere più complicata della semplice acquisizione delle coordinate del cursore. Alcuni siti Web sono allineati a destra, alcuni sono allineati a sinistra, alcuni sono al 100%, alcuni sono a larghezza fissa, "centrati" ... Un elemento di pagina può essere posizionato assolutamente o relativamente, fluttuato ecc. Oh, e c'è anche diverse risoluzioni dello schermo e persino configurazioni multi-monitor.

Ecco come funziona in HeatTest (io sono uno dei fondatori, hanno a rivelare che a causa delle regole): gestisce l'evento onClick

1. JavaScript: document.onclick = function(e){ } (questo non funzionerà con <a> e <input> elementi, devono incidere il vostro senso intorno)
2. script registra l'XPath-indirizzo dell'elemento cliccato (dal momento che le coordinate non sono affidabili, vedi sopra) in una forma //body/div[3]/button[id=search]e le coordinate all'interno dell'elemento.
3. Script invia una richiesta JSONP al server (JSONP viene utilizzato a causa delle limitazioni tra domini nei browser)
4. Il server registra questi dati nel database.

Ora, la parte interessante: il server.

1. Per calcolare la heatmap il server lancia un'istanza virtuale di un browser in memoria (usiamo Cromo e IE9)
2. mostra la pagina
3. prende uno screenshot,
4. trova gli elementi "coordina e poi costruisce la heatmap.

Richiede molta potenza di cpu e l'utilizzo della memoria. Molto. Quindi la maggior parte dei servizi heatmap, inclusi noi e CrazyEgg, hanno stack di macchine virtuali e server cloud per questa attività.