🐾 Cerbero
Cerbero is a simple js library that gives you the ability to track everything your users are doing on your web page. Furthermore, Cerbero, is designed to weigh as little as possible on the main thread by delegating the most complex computations to a webworker.
Table of Contents
Install
You can download Cerbero directly from npm/yarnyarn add cerberoOr include it from a cdn
<script src="https://unpkg.com/cerbero@1.0.0/dist/cerbero.umd.js"></script>Usage
Use cerbero is really simple. After installation, listen for events.import cerbero from "cerbero";
cerbero.addEventListener((event) => {
JSON.stringify(event);
});You can also set the following properties
| Function | Receive | Default | Usage |
| setTimeInPageInterval(Number) | Number | 2500 | Change the interval to receive the timeInPage event |
The events received may be the following:
1. timeInPage
Example
{
"type":"timeInPage",
"time":1611403802219,
"data":{
"timePassed":69564
}
}2. selection
Example
{
"type":"selection",
"time":1611404033755,
"after":301101,
"data":{
"text":"These three method",
"elements":{
"anchorNode":{
"type":"#text",
"domType":"Text",
"identifier":"#text",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > div#dd1f > p > mark > #text",
"position":{
},
"data":"These three methods are ",
"wholeText":"These three methods are ",
"nodeValue":"These three methods are ",
"textContent":"These three methods are ",
"offset":0
},
"focusNode":{
"type":"#text",
"domType":"Text",
"identifier":"#text",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > div#dd1f > p > mark > #text",
"position":{
},
"data":"These three methods are ",
"wholeText":"These three methods are ",
"nodeValue":"These three methods are ",
"textContent":"These three methods are ",
"offset":18
},
"baseNode":{
"type":"#text",
"domType":"Text",
"identifier":"#text",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > div#dd1f > p > mark > #text",
"position":{
},
"data":"These three methods are ",
"wholeText":"These three methods are ",
"nodeValue":"These three methods are ",
"textContent":"These three methods are ",
"offset":0
},
"extentNode":{
"type":"#text",
"domType":"Text",
"identifier":"#text",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > div#dd1f > p > mark > #text",
"position":{
},
"data":"These three methods are ",
"wholeText":"These three methods are ",
"nodeValue":"These three methods are ",
"textContent":"These three methods are ",
"offset":18
}
}
}
}3. scroll
Example
{
"type":"scroll",
"time":1611403973496,
"after":240842,
"data":{
"scroll":{
"fromTop":5608,
"domHeight":10693,
"percentage":53
},
"elements":{
"srcElement":{
"type":"#document",
"domType":"HTMLDocument",
"identifier":"#document",
"domStructure":" > #document",
"position":{
}
},
"target":{
"type":"#document",
"domType":"HTMLDocument",
"identifier":"#document",
"domStructure":" > #document",
"position":{
}
}
}
}
}4. mouseExit
Example
{
"type":"mouseExit",
"time":1611403836778,
"after":104124,
"data":{
"position":{
"screenX":744,
"screenY":694,
"clientX":744,
"clientY":614,
"pageX":744,
"pageY":2470,
"x":744,
"y":614,
"offsetX":124,
"offsetY":239
},
"keys":{
"ctrlKey":false,
"shiftKey":false,
"altKey":false,
"metaKey":false
},
"elements":{
"fromElement":{
"id":"",
"name":"",
"className":"pb sk s t u hr ai ib",
"type":"IMG",
"domType":"HTMLImageElement",
"identifier":"img",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > figure > div > div > div > div > img",
"position":{
"x":620,
"y":375.171875,
"width":680,
"height":661.859375,
"top":375.171875,
"right":1300,
"bottom":1037.03125,
"left":620
}
}
}
}
}5. performance
Example
{
"type":"performance",
"time":1611403732932,
"data":{
"timing":{
"navigationStart":1611403731806,
"unloadEventStart":1611403731816,
"unloadEventEnd":1611403731816,
"redirectStart":0,
"redirectEnd":0,
"fetchStart":1611403731806,
"domainLookupStart":1611403731809,
"domainLookupEnd":1611403731809,
"connectStart":1611403731809,
"connectEnd":1611403731809,
"secureConnectionStart":0,
"requestStart":1611403731809,
"responseStart":1611403731812,
"responseEnd":1611403731885,
"domLoading":1611403731827,
"domInteractive":0,
"domContentLoadedEventStart":0,
"domContentLoadedEventEnd":0,
"domComplete":0,
"loadEventStart":0,
"loadEventEnd":0
},
"navigation":{
}
}
}6. click
Example
{
"type":"click",
"time":1611403891403,
"after":158749,
"data":{
"position":{
"screenX":752,
"screenY":244,
"clientX":752,
"clientY":164,
"pageX":752,
"pageY":3609,
"x":752,
"y":164,
"offsetX":388,
"offsetY":414
},
"keys":{
"ctrlKey":false,
"shiftKey":false,
"altKey":false,
"metaKey":false
},
"elements":{
"target":{
"id":"",
"name":"",
"className":"hp hq s t u hr ai ib",
"type":"IMG",
"domType":"HTMLImageElement",
"identifier":"img",
"domStructure":" > html > body > div#root > div > article > div > section > div > div > div > figure > div > div > div > div > img",
"position":{
"x":364,
"y":-249.90625,
"width":1192,
"height":626.765625,
"top":-249.90625,
"right":1556,
"bottom":376.859375,
"left":364
}
}
}
}
}7. webVitals
{
"type":"webVitals",
"time":1633546442076,
"after":741,
"data":{
"name":"FCP",
"value":313,
"delta":313,
"entries":[
{
"name":"first-contentful-paint",
"entryType":"paint",
"startTime":313,
"duration":0
}
],
"id":"v2-1633546441339-3230881544559"
}
}Contributing
Reporting bugs
- Open a GitHub issue
Contributing with patches and bug fixes
- Open a new GitHub pull request with the patch.
- Ensure the PR description clearly describes the problem and solution.
Contributors
Thecreazy Core |
TheBous Core |