🐾 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

yarn add cerbero

Or 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

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.

MIT