Heatmap

Questo progetto permette di tracciare i movimenti del mouse o i tocchi sullo schermo degli utenti e visualizzare una heatmap per analizzare dove gli utenti interagiscono di più su un sito web. I dati di tracciamento vengono inviati al server e memorizzati in un database, da cui vengono poi estratti per generare la heatmap in tempo reale.

Caratteristiche

• Tracciamento del mouse/touch: Rileva i movimenti del mouse e i tocchi dello schermo.
• Visualizzazione della heatmap: Crea una heatmap basata sui movimenti dell'utente.
• Supporto multi-dispositivo: Traccia separatamente i movimenti su desktop, tablet e mobile.
• Aggiornamenti in tempo reale: La heatmap viene aggiornata ogni volta che l'utente interagisce con la pagina.
• Interfaccia utente semplice: Un'interfaccia utente minimale che mostra la heatmap e fornisce notifiche di aggiornamento.

Struttura del Progetto

Il progetto è composto da diversi file PHP, HTML, CSS e JavaScript:

1. Frontend

• index.php: La pagina principale che raccoglie i dati di tracciamento del mouse e li invia al server.
• heatmap.php: La pagina che visualizza la heatmap basata sui dati inviati.

2. Backend

• api/save_cursor.php: Endpoint che riceve e memorizza i dati del movimento del mouse nel database.
• api/get_heatmap_data.php: Endpoint che recupera i dati di tracciamento dal database e li invia alla pagina heatmap.html per la visualizzazione.
• includes/db_connect.php: Connessione al database MySQL.

Requisiti

• PHP 7.4+ o versione successiva.
• MySQL (o MariaDB) per il database.
• heatmap.js (incluso tramite CDN).
• jQuery (incluso tramite CDN).

Installazione

1. Impostare il Database

Esegui il seguente script SQL per creare il database e la tabella necessaria per memorizzare i dati di tracciamento:

CREATE DATABASE heatmap_db;

USE heatmap_db;

CREATE TABLE cursor_data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    x FLOAT(5,2),
    y FLOAT(5,2),
    device ENUM('desktop', 'tablet', 'mobile'),
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Configurare il File di Connessione al Database

Nel file includes/db_connect.php, inserisci i dettagli di accesso al tuo database MySQL:

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "heatmap_db";

3. Caricare i File sul Server

Carica tutti i file nella tua cartella di lavoro sul server web (ad esempio, una cartella public_html o www).

4. Verifica il Funzionamento

Accedi a index.php per iniziare a tracciare i movimenti del mouse. I dati verranno inviati al server e salvati nel database. Poi, accedi a heatmap.php per visualizzare la heatmap.

Come Funziona

1. Tracciamento dei Movimenti: Ogni volta che un utente muove il mouse o tocca lo schermo, le coordinate vengono registrate in percentuale rispetto alla dimensione della finestra del browser.
2. Salvataggio dei Dati: I dati vengono inviati al server tramite una richiesta POST ogni 5 secondi, dove vengono salvati nel database.
3. Generazione della Heatmap: I dati vengono recuperati dal server e utilizzati per generare la heatmap nella pagina heatmap.html.

Notifiche

Quando i dati vengono inviati correttamente al server, viene mostrata una notifica nella pagina principale.

Licenza

Distribuito sotto la MIT License. Vedere il file LICENSE per ulteriori dettagli.