Mappa dei click sul proprio sito

clickNon so voi, ma diverse volte mi sono chiesto quali sono i punti in cui l’utente effettuasse i click su un sito, in particolare sul mio blog. Sono varie le considerazioni che si possono fare da un’analisi del genere, ad esempio capire quali sono gli elementi più cliccati, se un elemento posto in un certo punto della pagina ha più appeal rispetto ad un altro punto, etc etc. In generale queste mappe mostrano i punti caldi di una pagina web per i quali può essere fatta una serie di analisi. Ciò detto passiamo alla pratica. Cercando un po in rete ho trovato una soluzione open-source che voglio condividere. La soluzione usa javascript per il rilevamento dei click e perl per la costruzione della mappa. Sarebbe interessante tradurre lo script in perl in un altro linguaggio, php o Java ad esempio, così da cambiarne il contesto. Ma procediamo per gradi.

Javascript

Non mi soffermerò molto sul codice javascript che realizza la rilevazione dei click, con l’utilizzo di jquery diventa veramente semplice scrivere 2 righe di codice (si fa per dire), dopo che il DOM si è reso disponibile (document.ready()), si aggancia all’evento onclick e registra le coordinate in cui è avvenuto il click assieme ad altri dati aggiuntivi. Supponiamo quindi che i dati rilevati siano:

x709y351
x350y348
x489y294
x655y346
x384y305
x332y288
x399y288

In questo modo è possibile rilevare le zone della pagina in cui sono avvenuti più click e associare loro dei valori di intensità tali da rappresentarli correttamente sulla mappa finale. A tal proposito assegnamo come valore di intensità massima 255 e come valore di intensità minima 0.

Perl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/perl
use strict;
my $imgWidth=64;
open (LOG,"log.txt") || die;
my @log=<LOG>;
close (LOG);
my (@x,@y);
my ($xMax,$yMax,$repetitionsMax,$i,$j);
my %repetitions;
foreach my $line(@log){
	(my $coords)=$line;
	$repetitions{$coords}++;
	$coords=~s/x//;
	($x[$i],$y[$i])=split("y",$coords);
	$i++;
}
while ((my $key, my $value)=each(%repetitions)){
	$repetitionsMax=$value if $repetitionsMax<$value;
}
for ($j=0;$j<$i;$j++){
	$xMax=$x[$j] if $xMax<$x[$j];
	$yMax=$y[$j] if $yMax<$y[$j];
}
print $repetitionsMax,"\n$xMax;$yMax\n";

Analizziamo il codice di sopra. Dal file di log contenente le rilevazioni sui click effettuati, vengono lette le coordinate e salvate all’interno di due array $x e $y rispettivamente. Per ciascun valore acquisito viene determinato il valore massimo assoluto e il valore massimo della x e della y. Successivamente si procede con la creazione dell’immagine: 

my $xCanvas=$xMax+int($imgWidth/2);
my $yCanvas=$yMax+int($imgWidth/2);
my $createcanvas="convert -size ". $xCanvas.#//
"x".$yCanvas." pattern:gray100 empty.png";
system ($createcanvas);

impostando le dimensioni calcolate nello step precedente e sfruttando una funzionalità di sistema.
Dopo aver creato l’immagine procediamo col disegnare i punti della nostra mappa, anzi, invece di limitarci a disegnare dei singoli punti, andiamo a creare delle regioni a partire da un file png che ci consente di farlo. Scegliamo come valore di opacità 1 e calcoliamo una formula che ci consenta di determinare il livello di sovrapposizione (overlay) da usare per ciascuna regione. In questo modo le regioni più cliccate saranno sovrapposte e quindi più scure.

my $createNormalizedSpot="convert bolilla.png -fill #//
white -colorize ".int(100/$repetitionsMax)."% bol.png";
system ($createNormalizedSpot);
 
/* Procediamo per ciascuna riga di coordinata */
 
for ($j=0;$j<$i;$j++){
    my ($x,$y);
    $x=$x[$j]-32;
    $y=$y[$j]-32;
    system ("composite -compose multiply -geometry #//
    +$x+$y bol.png empty.png empty.png\n");
    print "used $j of $i clicks\n";
}

Otteniamo quindi un’immagine del genere:

 

empty_p

 

Come piccolo tocco di classe, rendiamo l’immagine creata, in modo tale che abbia il tipico schema di colore delle mappe di calore, in cui i punti più cliccati saranni quelli più caldi e quelli meno cliccati più freddi. Per fare questo usiamo la libreria di Imagemagick, a partire da un file di immagine contenente il gradiente del colore in questione:

convert empty.png -negate full.png
convert full.png colors.png -fx "v.p{0,u*v.h}" final.png

ottenenedo come risultato:

 

map_p

 

La mappa finale

Bene, come risultato finale, prendiamo un’immagine del nostro sito web, ottenuto attraverso uno screenshot di sistema o qualunque altra cosa adatta a farlo e sovrapponiamo la mappa creata con il seguente comando:

composite -blend 40% final.png blog.png heatmap.png

heatmap

E’ facile notare che, guardare l’immagine del risultato fa totalmente un’altro effetto rispetto al piatto file di log da cui siamo partiti.
Stay tuned !!

WordPress Themes