This repository uses Grunt to serve files locally.
You can set it up using
npm install
Then, once installed, you can use
grunt
to run the project locally.
When the script is loaded, it automatically starts tracking mousemove
events and storing them in a Javascript object, which is persisted to a remote server.
Users can press SHIFT + H+M
to toggle the heatmap on and off.
There is an object called currentData
, which stores information needed to render the heatmap.
When a user moves the mouse, a value is incremented inside currentData.store
.
Every 10 seconds, the data from currentData.store
is processed into the format requred by the heatmap rendering library, and moved into currentData.data
.
Now that it's ready, it is sent to the server via POST.
Since the dataset can become very large, the compactData()
function exists to compact the data and drop some counts that are very low.
The heatmaps are rendered using Heatmap.js, which can be found here: https://www.patrick-wied.at/static/heatmapjs/docs.html
Feel free to ask as many questions as you need. I can join you on chat to explain anything you need.
-
Currently, you must press
SHIFT + H+M
to toggle the heatmap on and off. Change this toCTRL + SHIFT + H
. -
Currently, the user must set a project ID (
window._GumshoeProject
). Since we are already using the md5 library, let's just use anmd5()
oflocation.hostname
instead. -
Currently,
mousemove
,click
, andtouchstart
all are tracked equally (line 297). But, we think Clicks and Taps are more important. Create a separate event listener forclick
andtouchstart
events so they can get 10 points of value instead of just 1.