Creepx NPM | npm.io

Creepx

Declarative user event tracking system. :squirrel:

TODO

Add minimum distance to creepmove and shakemove
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:

<button data-creepx='{"id":"pressbutton"}'>
  Press
</button>

JS:

import creep from 'creepx';

creep(document, payload => {
  // do stuff with payload
});

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:

import {
  creepClicks,    // click events
  creepMousemove, // mousemove events
  creepKeydown,   // keydown events
  creepClipboard, // clipboard events
  creepWheel,     // wheel events
  creepSelect,    // select events
} from "creepx";

If you just want to track everything, import default:

import creep from "creepx"; // 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 attached
callback - the callback to fire when an event happens

Example

import creep, { creepClicks } from 'creepx';

// track everything happening on document if it has 'data-creepx' on it
creep(document, payload => {
  if (payload.data) {
    fetch('http://localhost:8081/logstash', {
      method: 'POST',
      body: JSON.stringify(payload),
    });
  }
});

// track clicks on this specific button extra
const btn = document.getElementById("trackme")
creepClicks(btn, payload => {
  fetch('http://localhost:8081/trackme', {
    method: 'POST',
    body: JSON.stringify(payload),
  });
})