@nelsonroque/watchthis

Description

@nelsonroque/watchthis is a simple open-source logger of all browser events for behavioral research studies (i.e., those with participant consent).

Features

• 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.

Installation

You can install the package using npm:

npm install @nelsonroque/watchthis

Here’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']
});

Demo

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.

Github Repo

https://github.com/nelsonroque/watchthis

Roadmap

• Unit tests
• Logging to API every N seconds
• More graphs (mouse movements?)

License

MIT License. See the LICENSE file for more details.