Controlling MouseView.js with methods

This gives you an idea of the methods available on the mouseview object. For a summary of setting attributes checkout Configuration.

initiate the overlay#

mouseview.init()

Tracking#

To start recording mouse movements you use the following functions

mouseview.startTracking() // this starts a record and logs timestamps in console
mouseview.stopTracking() // this stops and logs the data into the console 

Local Storage#

Mouseview.js allows you to store and retrieve data on the clients browser. This is helpful for tracking accross multiple pages, or presenting previous data on screen. When you store data it appends that page path to the beginning of the data array. When you retrieve data it will append the path of the page to the end of data array, so you can tell the difference between site pages.

// run this  before user navigates away
mouseview.storeData() // this starts a record and logs timestamps in console

// then on a new page to retrieve
mouseview.getData()

// now the namespace contains all the old data, but with the old path name at the start, and the new one at the end 
console.log(mouseview.datalogger.data)

Core Methods#

The table below describes all available core methods

Method	Description
`mouseview.init()`	This function initiates the MouseView.js with the current settings.
`mouseview.removeAll()`	This function removes any overlays generated by MouseView.js
`mouseview.startTracking()`	This starts the recording of the current mouse or touch coordinates, in intervals specified by the mouseview.timing.sampleRate variable.
`mouseview.stopTracking()`	This stops all the recording.
`mouseview.logEvent(event_txt)`	A utility function that will log a string (event_txt) in the sample data, along with a timestamp, whenever it is called.
`mouseview.storeData()`	A utility function which stores all the current mousetracking data in the browser’s local storage, and automatically appends the current webpage path to the data. It will overwrite any currently stored data.
`mouseview.getData()`	Retrieves any stored data, and appends the current page. New data is added to this object.
`mouseview.clearData()`	Clear working data.
`mouseview.updateOverlayCanvas()`	Forces the overlay to be updated, it recaptures the screenshot if the gaussian blur setting is in use.

Visualisation Methods#

We also bundle in heatmap.js, allowing you to plot data on the screen. This is used in the demo on this website.

Method	Description
`mouseview.plotHeatMap()`	Plot a heatmap on a new transparent overlay, over the screen.
`mouseview.clearHeatMap()`	Clear the heatmap and remove the overlay.