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.
You can download Cerbero directly from npm/yarnyarn add cerberoOr include it from a cdn
<script src="https://unpkg.com/[email protected]/dist/cerbero.umd.js"></script>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"
}
}- Open a GitHub issue
- Open a new GitHub pull request with the patch.
- Ensure the PR description clearly describes the problem and solution.
Thecreazy Core |
TheBous Core |