Der Plan
- Erfassen der X- und Y-Koordinaten des Mauszeigers, wenn auf eine Webseite geklickt wird.
- Speichern Sie diese Koordinaten in einer Datenbank
- Wenn aufgerufen, zeigen Sie eine "Klickmap" über der Webseite an, die die Positionen dieser Klicks visuell darstellt.
Warum?
Weil es ein cooles Proof of Concept ist. Sollten Sie dies in der Produktion verwenden und wichtige Designentscheidungen darauf basieren? Vielleicht nicht, aber ich kann es mir als Werkzeug zur Untersuchung des Nutzerverhaltens in einigen Situationen vorstellen.
Demo ansehen Dateien herunterladen
Die Technologien
Die Webseite wird mit PHP erstellt. Wir brauchen PHP aus mehreren Gründen. Am wichtigsten ist, dass wir eine serverseitige Sprache benötigen, um das Speichern und Abrufen aus der Datenbank zu handhaben. Außerdem werden wir diese Datenbankinteraktion in eine separate Datei auslagern, um unseren Code sauber zu halten. PHP ermöglicht es uns, Variablen zwischen diesen Dateien hin und her zu senden.
Wir verwenden JavaScript in der jQuery-Variante, um die Mausklicks zu verfolgen und diese Klickdaten an die PHP-Datei zu senden, die das Speichern in der Datenbank durchführt. jQuery hilft uns auch, die Überlagerung anzuzeigen und die kleinen Grafiken zu platzieren, die wir zur Darstellung der Klickpositionen verwenden.
Datenbank erstellen
Unser Code erstellt die notwendigen Tabellen nicht automatisch für Sie, Sie müssen eine Datenbank und die Struktur selbst erstellen. Hier ist die SQL
CREATE TABLE `clickmap` (
`id` int(10) unsigned NOT NULL auto_increment,
`x` smallint(4) unsigned NOT NULL,
`y` smallint(4) unsigned NOT NULL,
`location` varchar(255) NOT NULL,
PRIMARY KEY (`id`),
KEY `location` (`location`)
)Für die Demo halten wir die Dinge so einfach wie möglich. Wenn Sie die Idee erweitern möchten, möchten Sie vielleicht auch zusätzliche Informationen zu dieser Tabelle hinzufügen, wie IP-Adresse und Datum/Uhrzeit, damit Sie detailliertere Informationen für jeden Klick haben.
Das Markup (zu verfolgende Seite)
Nur etwas Struktur, mit der wir arbeiten können. Wir verlinken auf eine CSS-Datei, laden jQuery, verlinken auf eine eigene JavaScript-Datei sowie richten einen Platz zum Schreiben von JavaScript hier ein und legen etwas Inhalt auf die Seite.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Click Map Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/clickmap.js"></script>
<script type="text/javascript">
$(function() {
// do stuff
});
</script>
</head>
<body>
<img src="images/baywatch.jpg" alt="baywatch" />
<p class="button displayClicks"><a href="#demo">Display Click Map</a></p>
</body>
</html>Nicht viel Inhalt dort, nur ein Bild der Baywatch-Crew und ein einfacher Knopf.
Das jQuery JavaScript
Das JavaScript wird zwei Hauptaufgaben für uns erledigen: Klicks speichern und Klicks anzeigen.
Klicks speichern
Aus Effizienzgründen lagern wir dies in einige verschiedene Funktionen aus, die wir jederzeit aufrufen können. Eine, um das Speichern von Klicks zu *starten*, und eine, um es zu *stoppen*.
(function($) {
$.fn.saveClicks = function() {
$(this).bind('mousedown.clickmap', function(evt) {
$.post('/examples/ClickMap/clickmap.php', {
x:evt.pageX,
y:evt.pageY,
l:escape(document.location.pathname)
});
});
};
$.fn.stopSaveClicks = function() {
$(this).unbind('mousedown.clickmap');
};
})(jQuery); Wir binden das `mousedown`-Ereignis an das Element, auf dem es aufgerufen wird (es wird das gesamte Dokument sein), und verwenden dann die `post`-Funktion von jQuery, um einige Daten (die Koordinaten) an eine spezielle Datei (clickmap.php) zu senden. Ziemlich raffiniert, die Leute werden es nie erfahren, aber jeder dieser Klicks sendet Daten zurück an den Server.
Klicks anzeigen
Auch hier zwei Funktionen. Eine ist für die Erstellung der Überlagerung und die Anzeige der Klickgrafiken zuständig (das PHP sendet alle Daten, aber das jQuery fügt sie ein). Die andere entfernt alles. Wir nutzen die `get`-Funktion von jQuery.
$.displayClicks = function(settings) {
$('<div id="clickmap-overlay"></div>').appendTo('body');
$('<div id="clickmap-loading"></div>').appendTo('body');
$.get('/examples/ClickMap/clickmap.php', { l:escape( document.location.pathname) },
function(htmlContentFromServer) {
$(htmlContentFromServer).appendTo('body');
$('#clickmap-loading').remove();
}
);
};
$.removeClicks = function() {
$('#clickmap-overlay').remove();
$('#clickmap-container').remove();
}; Alles in Gang setzen
Wir werden etwas JavaScript direkt auf der Seite einfügen, um alles zu starten.
<script type="text/javascript">
$(function() {
$(document).saveClicks();
$('.displayClicks').click(function() {
$.displayClicks();
$('#clickmap-overlay').click(function() {
$.removeClicks();
$(document).saveClicks();
});
$(document).stopSaveClicks();
return false;
});
});
</script>Das PHP
Nun haben wir Code gesehen, der sowohl POST- als auch GET-Anfragen an eine PHP-Datei sendet, die wir noch nicht gesehen haben. Diese Magie geschieht in einer Datei, die wir nennen werdenclickmap.php. In beiden Fällen müssen wir uns mit der Datenbank verbinden und diese Verbindung dann wieder schließen. Der Rest hängt davon ab, ob wir POSTen oder GETten.
<?php
$DB = mysql_connect("localhost", "db_user", "db_password");
mysql_select_db("db_name", $DB);
if (isset($_POST['l'])) {
$query = sprintf(" INSERT INTO clickmap
SET x = '%s', y = '%s', location = '%s'",
$_POST['x'], $_POST['y'], $_POST['l']);
$result = mysql_query($query);
};
if (isset($_GET['l'])) {
$query = sprintf(" SELECT x, y FROM clickmap
WHERE location = '%s'
ORDER BY id DESC
limit 200",
$_GET['l']);
$results = mysql_query($query);
$html = '<div id="clickmap-container">';
while ($row = mysql_fetch_array($results)) {
$html .= sprintf('<div style="left:%spx;top:%spx"></div>', $row['x'] - 10, $row['y'] - 10);
}
$html .= '</div>';
echo $html;
};
mysql_close($DB);
?>Ziemlich einfach... beim POSTen die Daten in die Datenbank speichern. Beim GETten abrufen. In dieser Demo rufen wir nur die letzten 200 Klicks ab, aber Sie können diese Einschränkung nach Bedarf ändern oder entfernen. Hier sehen Sie, wie jede der Klickgrafiken positioniert wird, wenn die Überlagerung erscheint. Die exakten Koordinatendaten, die beim Erzeugen des Klicks gespeichert wurden, werden verwendet, um CSS-Werte für "top" und "left" festzulegen.
Das CSS
Die eigentliche Klickmap-Funktionalität benötigt nicht viel in Bezug auf Styling. Nur die Überlagerung selbst, ein Ladebereich (falls es eine Weile dauert, alle Klickdaten abzurufen) und die kleinen Grafiken für die Klicks selbst.
#clickmap-overlay {
position:fixed;
top:0; left:0;
width:100%; height:100%;
background-color:#000;
filter:alpha(opacity=70); opacity: 0.7;
}
#clickmap-loading {
position:fixed;
top:0; left:0;
width:100%; height:100%;
background:transparent url(images/loading.gif) no-repeat center center;
}
#clickmap-container div {
position:absolute;
width:20px; height:20px;
background:transparent url(images/click.png) no-repeat center center;
} Alles zusammen
Ich weiß, dass das Lesen all dieser Codebeispiele manchmal ganz schön anstrengend und verwirrend sein kann. Wie immer können Sie den Code gerne herunterladen und alles im Kontext sehen, damit es mehr Sinn ergibt. Besonderer Dank nochmals an Jay Salvat für die ursprüngliche Idee. Jay ist ein 35-jähriger Webentwickler, der an der französischen Riviera lebt und leitender Entwickler bei Kuantic ist. Er ist der Erfinder des sehr coolen Rich-Text-Editors markItUp! für jQuery und des neuen Projekts Sunday Morning (kommt bald).
Das ist ein schönes kleines Skript, auch wenn Sie es auf etwas anderes als eine Klickmap angewendet haben. Ich könnte mir vorstellen, dass es auf einer E-Commerce-Website implementiert wird, um zu verfolgen, auf welcher Seite ein Artikel am besten verkauft wird (d. h. zieht die Seite "Heißeste Angebote des Tages!" einer Website mehr Aufmerksamkeit auf ein Produkt oder nicht?)
Cheers Chris & Jay!
Für Ihren Fall bräuchten Sie die Mauskoordinaten nicht und könnten einfach die Produkt-ID als Identifikator verwenden.
Chris' Beispiel hingegen nutzt explizit die Cursorposition relativ zum Viewport, kümmert sich aber nicht so sehr darum, was der Bildschirm gerade anzeigt (Produktdetails, Baywatch-Bilder, ...)
-trice
Ich verstehe, was Sie sagen, und verstehe den Kommentar von "diesen Neulingen" über Google Analytics. Aber um auf den Gedanken von trice22 aufzubauen, vielleicht könnten Sie es so einrichten, dass Sie sehen können, ob ein bestimmtes Produkt in der ersten Position der Galerie besser verkauft wird oder vielleicht, wenn es sich auf der rechten Seite der Galerie befindet.
Erstens, ja, ich habe von Google Analytics gehört.
Zweitens, ich wusste genau, was ich in meinem Kopf meinte, es kam nur nicht gut im Kommentar rüber!
Ich dachte an die Methoden, die große Supermärkte anwenden, um Ihnen mehr zu verkaufen: Sie verschieben die Position der Produkte im Geschäft und verfolgen, wie viele Einheiten an jedem Standort verkauft werden. Der Prozess wird dann mit Produkten anderer Art wiederholt (erst Ambient, dann Elektro, dann Tiefkühlkost usw.).
Dies gibt ihnen ein ideales Verkaufs-Layout für das Geschäft, mit Verkaufs-Hot-Spots für bestimmte Produkttypen.
Ich hoffe, das ist etwas klarer...
Haben Sie jemals von Google Analytics gehört?
Schlau, sehr schlau, danke Chris!
Ich habe einmal einen Hit-Counter getestet, der diese Funktion nutzte, um Klicks auf der Seite selbst zu verfolgen. Er erstellte eine Überlagerung mit der "Heatmap", die zeigte, wo Besucher auf jeder Seite am meisten klickten. Eine ziemlich nette Idee, da sie den Hauptinteressensbereich auf der gesamten Website zeigt.
Das Obige könnte leicht modifiziert werden, um Farben für verschiedene Klickhäufigkeiten zu verwenden, stelle ich mir vor.
Und danke Jay, meine Entschuldigung!
Vielen Dank für dieses Tutorial, es ist super, genau wie alles andere auf CSS Tricks:)
Vielen Dank*, meinte ich, entschuldigung für den Tippfehler.
Sehr nützlich wie immer. Eine nette kleine Funktion...
Wunderbar!
Sie können daraus ein Plugin machen und verfolgen, wo und wann Benutzer auf jedes Element Ihrer Website klicken. Dies könnte ein sehr mächtiges Werkzeug für Marketing und Entwicklung sein.
Wer weiß, wo Benutzer darauf klicken, in Erwartung von etwas, aber nein, das ist nur ein einfaches Bild, kein schicker Knopf.
Sehr cool... Ich werde das auf jeden Fall ausprobieren, wenn ich das nächste Mal die Gelegenheit dazu habe.
Interessant, ein bisschen wie CrazyEgg...
Das einzige Problem ist, dass es auf Event Propagation angewiesen ist.
Ich verstehe nicht... ist das ein Problem?
Schön! Ich werde es ausprobieren, wenn ich das nächste Mal Usability-Tests durchführe.
Fantastische Anleitung, wie man Benutzeraktivitäten auf einer Seite abbildet. Sie haben nicht gelogen, als Sie gestern über Twitter ein gutes Tutorial erwähnten.
Lauf Yasmine, lauf! Das ist wirklich cool, Chris!
Vielen Dank dafür - es ist großartig. Es scheint, dass es ähnliche Prinzipien wie die Site-Overlay-Funktion von Google Analytics verwendet, obwohl diese direkt auf anklickbare Links reagiert und diese hier möglicherweise nicht. Es ist sehr hilfreich aus Sicht des UI-Designs und des Marketings zu wissen, wohin die Leute klicken und was funktioniert.
Ein Muss, um die guten Zonen Ihrer Website zu verfolgen!
Vielen Dank, Jay, ich habe gerade CSS mit großem z-index modifiziert und mysql_escape_string in die SQL-Anfrage eingefügt (SQL-Injection).
Das Skript ist auf meiner Website in Gebrauch, ich werde morgen die Ergebnisse sehen :)
Cool, aber...
LabsMedia ClickHeat ist besser :)
Nicht schlecht. Schade, dass ich kein jQuery benutze...
Es ist ein sehr schönes Skript und die Informationen, die aus den Ergebnissen gewonnen werden können, würden definitiv bei der Bestimmung der besten Positionierung von Elementen helfen.
Insgesamt wird Ihnen dies einen saubereren Prozess für die zukünftigen Richtungen geben. Normalerweise ist es ein Prozess des Ausprobierens und Testens, um die besten Bereiche für die Besucherinteraktion zu ermitteln.
Eine Plugin-Form dieses Skripts wäre großartig.
Ich erwäge, meine Website PHP-Learn-It in WordPress zu konvertieren und hätte gerne die Einfachheit eines Plugins.
Ich habe tatsächlich bereits etwas sehr Ähnliches gebaut und plante, ein Modul für CMS Made Simple zu erstellen – dann stieß ich auf ein Problem.
Wie berücksichtigt man Websites mit variabler Breite? Zentriert ausrichten ist machbar, da man die Position des umschließenden Elements ermitteln und dies in der JS-Datei berücksichtigen kann – aber bei variabler Breite... Ich schätze, man könnte die Informationen in Prozent vom linken Rand speichern, anstatt in Pixelwerten?
/ich eile los, um dies auszuprobieren.
Tadaaaa, das ist der Punkt, an dem Sie die SQL-Injection-Schwachstelle erstellen und ich bezahlt werde, um sie zu finden ;-)
Danke!
Guter Artikel – ich würde hinzufügen, dass Sie möglicherweise die Schriftgröße, die Bildschirmgröße und die Browserdetails des Benutzers aufzeichnen müssen, wenn Sie nur X-Y-Koordinaten erfassen, denn wenn Sie überlagern, sehen Sie möglicherweise eine andere Konfiguration als Ihre Benutzer. (Ich denke, Betriebssystemunterschiede wie DPI usw. könnten ebenfalls einen Einfluss haben.) Aber eine gute Idee.
Jeden einzelnen Mausklick in der Datenbank aufzuzeichnen, wird erhebliche Leistungseinbußen für den Datenbankserver verursachen, für wichtige Anwendungen nicht wirklich praktikabel. Aber trotzdem ein sehr schönes Skript.
Dies ist ein fantastisches Konzept. Ich frage mich, wie nützlich es für den durchschnittlichen Webmaster ist? Als PHP-Neuling arbeite ich am besten mit Cheat Sheets. Da ich mein iPhone immer dabei habe, behalte ich sie dort. Das beste, das ich bisher gefunden habe, stammt von diesen Leuten
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302760278&mt=8
Sie haben auch großartige Cheat Sheets für jQuery und Javascript. Ich hoffe, das ist hilfreich.
Das ist einfach super!!! Tolle Arbeit.
Tolles Tutorial. Ich portiere einige davon in ein WordPress-Plugin. Ich bin auf ein Problem gestoßen. Die meisten Websites sind in der Mitte ausgerichtet. In diesem Fall ist die x-Koordinate von links nicht korrekt, da die Mitte des Bildschirms und die Bildschirmgröße berücksichtigt werden müssen. Ich habe einige Änderungen vorgenommen. Jetzt wird die Bildschirmgröße an die Datenbank gemeldet, aber ich stecke bei der Berechnung fest, wo die Punkte genau platziert werden sollen. Hat jemand einen Rat?
Ich habe einige Änderungen vorgenommen. Jetzt wird die Bildschirmgröße an die Datenbank gemeldet, aber ich stecke bei der Berechnung fest, wo die Punkte genau platziert werden sollen. Hat jemand einen Rat?
Haben Sie eine Lösung gefunden? Ich habe das gleiche Problem mit der Genauigkeit, kann aber nicht herausfinden, wie ich es lösen soll.
Tolles Tutorial! Danke.
Da ich ziemlich neu in jQuery und JavaScript im Allgemeinen bin, wollte ich nur wissen, ob mir jemand ein Tutorial zeigen kann, in dem ich lerne, wie man die gespeicherten Werte ändert. Ich möchte auch einen Zeitstempel und einige andere Daten der Website speichern, die in einigen Eingabefeldern neben x und y versteckt sind.
Kennt jemand ein solches Tutorial?
Vielen Dank im Voraus
Hallo Andy,
Fügen Sie einfach einige Eigenschaften zur Ajax-Abfrage hinzu
$.post(’/examples/ClickMap/clickmap.php’,
{
x:evt.pageX,
y:evt.pageY,
someExtraInfoHere:$(‘#myHiddenInput’).val(),
l:escape(document.location.pathname)
});
Für den Zeitstempel fügen Sie einfach ein 'myDateField = NOW()' zur MySQL-Insert-Abfrage hinzu. Natürlich müssen auch Felder zur MySQL-Tabelle hinzugefügt werden.
Entschuldigung, dass ich Sie noch einmal belästige, aber ich habe ein Tutorial gefunden, das mir hilft.
Diese Klickmap ist fantastisch, aber ich bekomme sie auf meinem Server nicht zum Laufen. Wenn ich auf "Klickmap anzeigen" klicke, dreht sich der Spinner ewig! Ich habe die MySQL-Datenbank und die Tabelle erstellt und es funktioniert immer noch nicht. Könnte jemand wissen, wie man dieses Problem behebt?
Hallo Alex,
Vergessen Sie nicht, den Pfad /examples/ClickMap/ in der .js-Datei zu ändern? :)
Jay
Hallo!
Für diejenigen, die sich für die ursprüngliche Idee dieses Artikels interessieren, habe ich das Projekt gerade auf Github mit vielen Verbesserungen hinzugefügt.
http://github.com/jaysalvat/clicktracker/
Ich möchte wissen, wo sich diese ID "#demo" befindet, die Sie im Hyperlink-Tag erwähnt haben?
Das ist FANTASTISCH! Es ist genau das, wonach ich gesucht habe. Ich bin neugierig, ob es eine Möglichkeit gibt, die Mauspositionen aller Benutzer sowie die Klickereignisse der Benutzer in der Datenbank anzuzeigen? Irgendwelche Vorschläge? Ideen? Danke!