Skip to content

Watch Users & get Site Heatmaps using Cursor Tracking (node)

Notifications You must be signed in to change notification settings

gautamarora/heatwave

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What is HeatWave?

HeatWave is a Node.js + Socket.io server to add the capability to watch users in realtime and generate heatmaps to your existing web application using cursor tracking. It can hook into your exsiting backend to pull the required user information to show recognizable users browsing the site. HeatWave was built as a hackathon project last year, and I am currenlty working on cleaning it up, adding simple configuration options as well turning it into an easy to use npm module.

How It Works

HeatWave works by tracking cursor movement and clicks on the client side and sending this information to the server over websockets. The server acts as a proxy for information being recieved from all clients, logging it and forwarding it to an admin UI where an authenticated user can watch the aggregated stream of user activity. The admin UI also provides an 'insights' interface to display a heatmap of the user activity.

Heatwave is built using:

  • Node.js
  • Socket.io (for sending tracking data over WebSockets)
  • JQuery (for client side cursor tracking)
  • MongoDB (for persisting tracking data)
  • Heatmap.js (for generating heatmaps)

Setup

Checkout source: git clone [email protected]:gautamarora/heatwave.git

Install

Embed client_loader.js or admin_loader.js on your webpage based on the role of the user (sample .jade and .html code is available)

<script type="text/javascript" src="http://127.0.0.1:3000/javascripts/client_loader.js"></script>
<script type="text/javascript">
    hwloader.load('http://'+'127.0.0.1', '3000', function() {
        hwclient.init({uid : 1, host : '127.0.0.1', port : '3000'});
    });
</script>

Run

  • Start the mongo server mongod and redis server redis-server
  • Start the node server node app.js
  • To load client version of webpage, access the url: http://127.0.0.1:3000/test/client/999 . You can access this page in multiple browsers to simulate multiple clients visiting the page
  • To load admin version of webpage, access the url: http://127.0.0.1:3000/test/admin/0
  • Move the cursor on the client page, to see the cursor move in realtime on admin interface
  • Click 'Get Insights' on the admin interface, to get an instant geatmap of the client activity

Screenshots

  • Heatwave running in realtime tracking mode

  • HeatWave running in heatmap insights mode

About

Watch Users & get Site Heatmaps using Cursor Tracking (node)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published