creepx
Declarative user event tracking system. :squirrel:
Last updated 3 years ago by oreqizer .
MIT · Original npm · Tarball · package.json
$ cnpm install creepx 
SYNC missed versions from official npm registry.

Creepx

Build Status codecov npm styled with prettier

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),
  });
})

License

MIT

Current Tags

  • 0.4.2                                ...           latest (3 years ago)

8 Versions

  • 0.4.2                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.3.2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (2)
Dev Dependencies (20)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |