Configurable and Lightweight JS Library for user behaviour tracking from the browser, using mouse movements, clicks, scroll, and time on page.
This Javascript Library allows to track user's behaviour by recording mouse activities:
- Movements
- Clicks
- Exact element in CSS format
- Timestamp
- Scroll
- Time on page
There are two ways to include userBehaviour.js to your browser:
- jsDelivr CDN
<script src="https://cdn.jsdelivr.net/gh/TA3/web-user-behaviour/userBehaviour.min.js"></script>- Local file
<script src="/path/to/userBehaviour.js"></script>The library requires a configuration object. Pass the object to the library with:
userBehaviour.config({.....});If no configuration was passes the libray will use the default configuration:
{
userInfo: true,
clicks: true,
mouseMovement: true,
mouseMovementInterval: 1,
mouseScroll: true,
timeCount: true,
clearAfterProcess: true,
processTime: 15,
processData: function(results){
console.log(results);
},
}| Config Key | Description | Type | Default |
|---|---|---|---|
| userInfo | record browser/device details | bool | true |
| clicks | track mouse clicks | bool | true |
| mouseMovement | track mouse movement | bool | true |
| mouseMovementInterval | time between tracking mouse movements | int (seconds) | 1 |
| mouseScroll | track mouse scroll | bool | true |
| timeCount | track time | bool | true |
| clearAfterProcess | clear results object after processing the data | bool | true |
| processTime | time between processing the data automatically (false will enable manual only data processing) |
int/bool (seconds) | 15 |
| processData | function that processes the results object | function | ... |
This is a list of all available methods that can be called:
| Method | Description | Example |
|---|---|---|
| showConfig | returns current config | userBehaviour.showConfig() |
| config | sets the configuration | userBehaviour.config(config_object) |
| start | starts tracking | userBehaviour.start() |
| stop | stops tracking | userBehaviour.stop() |
| showResult | returns current result | userBehaviour.showResult() |
| processResults | calls the process function set in config | userBehaviour.processResults() |
Start tracking with:
userBehaviour.start();Stop tracking with:
userBehaviour.stop();To view the results at anytime after the tracking has started:
userBehaviour.showResult();The result will be passed to a function set regularly with an interval set in the configuration section.
The data could also be sent via a POST request using any HTTP request libraries e.g axios, ajax, ...
processData: function(results){
axios.post('https://example.com', results);
}If processTime was set to false, data will not be processed automatically. Therefore, you might require to process the data manually with:
userBehaviour.processResults();This method will still require processData to be set in the configuration.
{
"userInfo": {
"appCodeName": "Mozilla",
"appName": "Netscape",
"vendor": "Google Inc.",
"platform": "MacIntel",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36"
},
"time": {
"startTime": 1572725042761,
"currentTime": 1572725069204
},
"clicks": {
"clickCount": 3,
"clickDetails": [
[
554,
542,
"html>body>div#login>div.ui.container.animated.fadeInDown>div.ui.center.aligned.colored.trends.segment>form.ui.form>div.fields>div.ten.wide.field>input",
1572725045313
]
]
},
"mouseMovements": [
[
1031,
328,
1572725043646
]
],
"mouseScroll": []
}- https://github.com/shnere/user-behavior for inispiration.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent