201004Nov

Webentwicklung: Echtzeit-Heatmap mit HTML5

Durch Heatmaps lassen sich die zurückgelegten Mausbewegungen von Benutzern auf einer Website festhalten. So lässt sich herausfinden, welche Bereiche einer Seite besonders häufig genutzt werden. Bekannte Heatmaps stehen beispielsweise von Crazy Egg oder Labsmedia bereit.
Eine Echtzeit-Lösung, die auf JavaScript und HTML5 (Canvas) baut, hat nun Patrick Wied ins Leben gerufen: Mit seiner Real-time Heatmap wird sehr schön demonstriert, wie sich eine solche Anwendung in rund 170 Zeilen umsetzen lässt.

Real-time heatmap example with Javascript and HTMLCanvas

Das Skript kann anhand eines Bildes getestet werden. In einem Intervall von 50 Millisekunden wird die Mausposition festgestellt — durch ein weiches Kreiselement wird die Verweildauer durch entsprechende Farben gekennzeichnet.
Das Ergebnis kann sich sehen lassen und stellt sicherlich eine gute Inspirationsquelle dar. Die Heatmap-Daten können exportiert werden und auf dem iPhone funktioniert das Skript ebenfalls. In diesem Artikel wird die Technik genauer beschrieben.