Kategorie: ProgramowanieProgramowanie webowe

Heatmapy twojej witryny z wykorzystanie JS i PHP

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
<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>
</body>

</html>

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:

Dzięki za wizytę,
Mateusz Mazurek
10 lat ago
Mateusz M.

Zostaw komentarz

Podobne wpisy

Ostatnie wpisy

Podsumowanie: maj, czerwiec, lipiec i sierpień 2024

Oj daaawnoo mnie tu nie było. Ale wakacje to był czas dużej liczby intensywnych wyjazdów i tak naprawdę, dopiero jakoś… Read More

2 miesiące ago

Podsumowanie: kwiecień 2024

Cześć! Zapraszam na krótkie podsumowanie kwietnia. Wyjazd do Niemiec A dokładniej pod granicę z Francją. Chrześnica miała pierwszą komunię. Po… Read More

6 miesięcy ago

Podsumowanie: luty i marzec 2024

Ostatnio tygodnie były tak bardzo wypełnione, że nie udało mi się napisać nawet krótkiego podsumowanie. Więc dziś zbiorczo podsumuję luty… Read More

7 miesięcy ago

Podsumowanie: styczeń 2024

Zapraszam na krótkie podsumowanie miesiąca. Książki W styczniu przeczytałem "Homo Deus: Historia jutra". Książka łudząco podoba do wcześniejszej książki tego… Read More

9 miesięcy ago

Podsumowanie roku 2023

Cześć! Zapraszam na podsumowanie roku 2023. Książki Zacznijmy od książek. W tym roku cel 35 książek nie został osiągnięty. Niemniej… Read More

10 miesięcy ago

Podsumowanie: grudzień 2023

Zapraszam na krótkie podsumowanie miesiąca. Książki W grudniu skończyłem czytać Mein Kampf. Nudna książka. Ciekawsze fragmenty można by było streścić… Read More

11 miesięcy ago