Heatmapy twojej witryny z wykorzystanie JS i PHP

Mateusz M. 11/07/2014

🕑 4 minuty czytania

Cześć! Cieszę się, że mnie odwiedziłeś/aś. Zanim przejdziesz do artykułu chciałbym zwrocić Ci uwagę na to, że ten artykuł był pisany kilka lat temu (2014-07-11) miej więc proszę na uwadzę że rozwiązania i przemyślenia które tu znajdziesz nie muszą być aktualne. Niemniej jednak zachęcam do przeczytania.

Tworząc strony internetowe nie mogłem uciec od czegoś co szumnie nazwane jest optymalizacją stron WWW. Strony optymalizuje się pod wieloma względami, np. pod względem SEO, w celu osiągnięcia wyższej pozycji w Google, pod względem objętości, w celu zwiększenia szybkości ładowania się strony a także, np. pod względem usability, w celu zwiększenia użyteczności strony. Zajmijmy się tym ostatnim przypadkiem a raczej jakąś małą częścią tego ogromnego zagadnienia.

Usability strony internetowej to ogrom zagadnień, których studiowanie prowadzi do zwiększenia się efektywnego wykorzystania strony przez jej użytkowników. Co to dokładnie znaczy? Np. jeśli sprzedajemy książki w Internecie to zwiększenie użyteczności może polegać na przebudowanie UI, zmianie/zwiększeniu/zmniejszeniu punktów na stronie zwanych „call to action” itp, wszystko w celu zwiększenia owej użyteczności, czyli takim przeprojektowaniu strony aby mogła ona możliwie najlepiej spełniać swoje zdania – sprzedawać książki.

Ciężko jest ocenić co może powodować niskie konwersje na stronach, często jest to kwestia wyczucia i/lub doświadczenia, jednak bardzo dobrą praktyką jest obserwowanie użytkowników strony. Niestety nie mamy możliwości siedzieć przy każdym internaucie i patrzeć mu na ręce, na szczęście z pomocą przychodzi nam termin znany jako heatmap, jest to wizualna prezentacja zachowań użytkowników na strony, tj. ruchów myszką i kliknięć w formie indywidualnych kolorów nanoszonych na ową stronę. Przykłady takich map:

Napiszemy dziś podobną funkcjonalność.

Część kliencka będzie napisana w JS a serwerowa w PHP. Dane gromadzimy w plikach xml.

Biblioteka zbierająca dane jest dostępna na GitHubie – sklonuj sobie to repo.

Wykorzystując tą bibliotekę, napiszmy proste demo – niech nim będzie strona z jednym kwadratem. Przy zatwierdzeniu asynchronicznie będą wysyłane zebrane dane do części serwerowej, która będzie je przetwarzać i zachowywać w plikach XML. Na koniec napiszemy prosty podgląd zebranych danych nadkładając je na stronę.

Zacznijmy od strony która będzie owym kwadratem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Korzystając z dokumentacji biblioteki piszemy skrypt zbierający dane i dołączamy go do strony głównej co daje nam w wyniku:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<html>
<head>

<script src="heatmap.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>Demo</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.sqrt{
width: 200px;
height: 200px;
border:5px solid #000000;
margin: 0 auto;
margin-top: 40px;
}
</style>
<body>

<div class="sqrt"></div>
<button id="send">Zapisz</button>

<script type="text/javascript">

$(document).ready(function(){
var xx = h337.create({"element":document.getElementsByTagName("body")[0], "radius":25, "visible":false});

(function(){
var active = false,
lastCoords = [],
mouseMove = false,
mouseOver = false,
activate = function(){
active = true;
},
$ = function(id){
return document.getElementById(id);
},
timer = null,
simulateEv = function(){
xx.store.addDataPoint(lastCoords[0], lastCoords[1]);
},
antiIdle = function(){
if(mouseOver && !mouseMove && lastCoords && !timer){
timer = setInterval(simulateEv, 1000);
}
};

(function(fn){
setInterval(fn, 1000);
}(antiIdle));
var tmp = document.getElementsByTagName("body")[0];

tmp.onmouseout = function(){
mouseOver = false;
if(timer){
clearInterval(timer)
timer = null;
}
};

tmp.onmousemove = tmp.onclick = function(ev){
mouseMove = true;
mouseOver = true;
if(active){
if(timer){
clearInterval(timer);
timer = null;
}

var pos = h337.util.mousePosition(ev);

xx.store.addDataPoint(pos[0], pos[1]);
lastCoords = [pos[0], pos[1]];

active = false;
}
mouseMove = false;
};
tmp["ontouchmove"] = function(ev){
var touch = ev.touches[0],
simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent("mousemove", true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
ev.preventDefault();
};

(function(fn){
setInterval(fn, 50);
}(activate));
})();

$("#send").click(function(){var dataSet = xx.store.exportDataSet();
$.ajax({
type: "POST",
url: "parseJs.php",
data: { "data" : dataSet }
})
});

});

</script>
</body>

</html>

Jak widać wysyłamy dane do pliku parseJs który wygląda tak:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php

$data = $_POST['data']["data"];
$xml = new SimpleXMLElement('<steps/>');

foreach ($data as $key => $value) {
$step = $xml->addChild('step');
$step->addChild("x", $value['x']);
$step->addChild("y", $value['y']);
$step->addChild("count", $value['count']);
}
file_put_contents('xml_files/'.date("d-m-Y G-i").'.xml', $xml->asXML());
?>

Ogólnie jest bardzo prosty. Odbiera dane po czym przepisuje je do formatu XML i zapisuje. W rezultacie dostaniemy pliki o strukturze podobnej do:

Napiszmy teraz pogląd.
Mamy zebrane dane, czyli x, y oraz ilość skupień się na tym punkcie. Napiszmy skrypt php które zwróci nam taki plik xml w formie JSON (czyli robimy w drugą stronę):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
$xml = simplexml_load_file($_GET['xml']);

$s=array();

foreach ($xml->step as $key => $value) {
$s[]= array(

"x"=>(string)$value->x,
"y"=>(string)$value->y,
"count"=>(string)$value->count

);
}
echo json_encode($s);
?>

Zauważ że skrypt jest uzależniony od elementu z tablicy GET. Napiszmy teraz stronę html o takiej samej strukturze co nasza strona demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="heatmap.js"></script>

<style type="text/css">
.sqrt{
width: 200px;
height: 200px;
border:5px solid #000000;
margin: 0 auto;
margin-top: 40px;
}
</style>

</head>
<body>

<div class="sqrt"></div>
</body>
<script type="text/javascript">

$(document).ready(function(){

$.ajax({
type: "GET",
url: "getObject.php?xml=<?=$_GET['xml']?>"
}).done(function( html ) {

var xx = h337.create({"element":document.getElementsByTagName("body")[0], "radius":25, "visible":true});

xx.store.setDataSet({ max: 10, data: JSON.parse(html)});

});
});
</script>
</html>

Tę stronę również uzależniliśmy od elementu tablicy GET, propagujemy tę wartość do poprzedniego skryptu. Całość tego dema zamyka lista plików xml do pokazania, które generuje dla każdego pliku owy element tablicy GET:

1
2
3
4
5
6
7

<?php

foreach (glob("xml_files/*.xml") as $key => $value) {
echo '<a href="preview.php?xml='.$value.'" target="_blank">'.$value.'</a><br>';
}

?>

Zobacz demo

UWAGA!!!!! Instrukcja obsługi:
1. Po kliknięciu na „Zobacz demo” poklikaj sobie nad kwadratem.
2. Kliknij na ten link i nie zamykaj go
3. Gdy już znudzi Ci sie klikanie nad kwadratem kliknij „Zapisz” i odśwież stronę z punktu 2.

Przykładowy efekt: