Skip to content

thecreazy/cerbero

Repository files navigation

npm codecov CI - Test GitHub license Open Source Love svg1

🐾 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/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

License

MIT