thecreazy / cerbero

Track your users interactions

🐾 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

1. Install
2. Usage
3. Contributing
4. Contributors
5. License

Install

You can download Cerbero directly from npm/yarn

yarn add cerbero

Or include it from a cdn

<script src="https://unpkg.com/[email protected]/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

License

MIT

cerbero's Issues

https://web.dev/idle-detection/

[Chore] Code coverage > 90%

[Chore] Test with jest

[Service] time in page

Autodeploy on npm action

[Chore] Code coverage test with github action

https://web.dev/custom-metrics/?utm_source=devtools#server-timing-api

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Write a very interesting readme.md

[Service] Page screenshot (https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots/6678156#6678156)