Velký bratr, aneb co dělají vaši návštěvníci

Existuje mnoho možností, jak sledovat chování návštěvníků webu. Zpravidla se sledují odkazy a stránky které uživatelé navštěvují, popřípadě se sleduje i každé kliknutí a vytvářejí se takzvané "clickmapy". Mně však napadla ještě jiná věc. Sledovat jaké úseky textu si lidé na mých stránkách označují. Například já si při čtení textu na webu často myší označuji úsek který mně zajímá, nebo při menším kontrastu barvy textu a pozadí si pomáhám při čtení označováním. Zajímá mně, jestli něco takového dělá i někdo další a tak jsem si napsal takový malý skript, o který se ted rozdělím.

Nejprve si vytvoříme tabulku v databázi, do které budeme ukládat získané informace, použil jsem MySQL 5 :

CREATE TABLE `selected` (
  `id` int(11) NOT NULL auto_increment,
  `text` text NOT NULL,
  `url` varchar(150) NOT NULL,
  `dt` datetime NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `url` (`url`),
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci ;

Dalším krokem je PHP skript, který dostane informace v POST požadavku a uloží je do databáze:

<?php 
if(isset($_POST["text"]) and isset($_POST["url"])) {
    $text = $_POST["text"];
    $url = $_POST["url"];
    $connection = new MySQLi("server","name","password","database");
    if (mysqli_connect_error()) { exit; }
    $connection-?>query("SET NAMES utf8");
    $connection->query("INSERT INTO selected SET text='$text',url='$url',dt=NOW();");
    $connection->close(); 
} ?>

Třetí část zajištuje javascript. Jelikož jsem tvor líný využil jsem framework jQuery. Napsal jsem si plugin pro událost označení textu:

(function($) {
$.event.special.textselect = {
  setup: function(data, namespaces) {
    $(this).data("textselected",false);
    $(this).bind('mouseup', $.event.special.textselect.handler);
  },
  teardown: function(data) {
    $(this).unbind('mouseup', $.event.special.textselect.handler);
  },
  handler: function(event) {
    var text = $.event.special.textselect.getSelectedText().toString();
    if(text!='') {
      $(this).data("textselected",true);
      event.type = "textselect";
      event.text = text;
      $.event.handle.apply(this, arguments);
    }
  },
  getSelectedText: function() {
    var text = '';
    if (window.getSelection) {
      text = window.getSelection();
    } else if (document.getSelection) {
      text = document.getSelection();
    } else if (document.selection) {
      text = document.selection.createRange().text;
    }
    return text;
  }
}
})(jQuery);

A pak už stačí vše provázat jednoduchým AJAXovým požadavkem:

jQuery(function() {
  jQuery(document).bind('textselect', function(e) {
    jQuery.post("/save-selected.php", {text:e.text, url:escape(document.location)});
  });
});

Nakonec ještě krátký PHP skript, který bude zobrazovat výsledky:

<?php
$connection = new MySQLi("server","name","password","database");
if (mysqli_connect_error()) { 
  die('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error()); 
}
$connection->query("SET NAMES utf8");
$result = $connection->query("SELECT text,url,dt FROM selected");
echo "<h1>Texts selected by users</h1>";
echo "<br>";
echo "<table border='1'>";
echo "<tr><th>Date and Time</th><th>Text</th><th>URL</th></tr>\n";
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
  echo "<tr><td>" . $row["dt"] . "</td><td>" . $row["text"] . "</td><td>" . urldecode($row["url"]) . "</td></tr>\n";
}
echo "</table>";
$connection->close();
?>

Na konec bych jen dodal, že kod, který je v ostrém, provozu je ještě malinko jiný, snažil jsem se v tomto příspěvku o zjednodušení, hlavně mi šlo a naznačení principu na jakém to funguje.