Creepx
Declarative user event tracking system. :squirrel:
TODO
- Add minimum distance to
creepmove
andshakemove
- Finish docs
What
Creepx attaches event listeners to the supplied DOM element, then fires your callback with event payload when various events occur.
Put a JSON string into the data-creepx
attribute onto DOM elements you want to track and the data will be attached to your events.
Note: events that had
stopPropagation
called on them will not be registered.
Example
HTML:
Press
JS:
; ;
When a user clicks on the button, your callback will receive the following payload:
const payload = event: 'click' data: id: 'pressbutton' ;
You can then send the data to your log server!
Events
You can import the following functions:
;
If you just want to track everything, import default:
; // yolo
Click
Located in creepClicks
.
click
doubleclick
multiclick
Mousemove
Located in creepMousemove
.
creepmove
shakemove
Keydown
Located in creepKeydown
.
keydown
Clipboard
Located in creepClipboard
.
cut
copy
paste
Wheel
Located in creepWheel
.
scroll
Select
Located in creepSelect
.
select
Dependencies
rxjs
>= 5
API
The package exports a set of functions as well as a default function with two parameters:
target
- the DOM element to which should events be attachedcallback
- the callback to fire when an event happens
Example
; // track everything happening on document if it has 'data-creepx' on it; // track clicks on this specific button extraconst btn = document
License
MIT