@nelsonroque/watchthis is a simple open-source logger of all browser events for behavioral research studies (i.e., those with participant consent).
- Logs common browser events (e.g.,
click,mousemove,keydown). - Dynamically creates UI elements (floating button and modal).
- Uses Plotly for visualizing event logs in a scatter plot.
- Allows downloading event logs in JSON format.
You can install the package using npm:
npm install @nelsonroque/watchthisHere’s a simple example of how to use the EventLogger class:
import EventLogger from '@nelsonroque/watchthis';
// Initialize the event logger
const logger = new EventLogger();
// By default, the event logger will track events like clicks, keypresses, and mouse movements.
To display the floating "Show Graph" button, add ?show_graph=true to your URL.
Using Custom Event Types: If you want to log only specific event types, pass them as an array when initializing the class:
const logger = new EventLogger(['click', 'mousemove']);
Initialize with anonymization and a blacklist of element IDs
const logger = new EventLogger(null, {
anonymize: true,
blacklist: ['passwordInput', 'creditCardForm']
});
Use watchthis to dynamically creates UI elements like a floating button and modal to display logged events in a graphical format using Plotly, and supports downloading the logged events as JSON.
https://github.com/nelsonroque/watchthis
- Unit tests
- Logging to API every N seconds
- More graphs (mouse movements?)
MIT License. See the LICENSE file for more details.