1.1.0 • Published 3 years ago
cerbero v1.1.0
🐾 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
yarn add cerberoOr include it from a cdn
<script src="https://unpkg.com/cerbero@1.0.0/dist/cerbero.umd.js"></script>import cerbero from "cerbero";
cerbero.addEventListener((event) => {
JSON.stringify(event);
});You can also set the following properties
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"
}
}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.