Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atlassian/browser-interaction-time
⏰ A JavaScript library (written in TypeScript) to measure the time a user is active on a website
https://github.com/atlassian/browser-interaction-time
active activity browser interaction performance time tracking typescript
Last synced: 6 days ago
JSON representation
⏰ A JavaScript library (written in TypeScript) to measure the time a user is active on a website
- Host: GitHub
- URL: https://github.com/atlassian/browser-interaction-time
- Owner: atlassian
- License: mit
- Created: 2019-01-02T11:06:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-07T08:37:34.000Z (7 months ago)
- Last Synced: 2024-04-14T12:07:26.639Z (7 months ago)
- Topics: active, activity, browser, interaction, performance, time, tracking, typescript
- Language: TypeScript
- Homepage: https://atlassian.github.io/browser-interaction-time/
- Size: 5.03 MB
- Stars: 211
- Watchers: 25
- Forks: 14
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- awesome - browser-interaction-time - ⏰ A JavaScript library (written in TypeScript) to measure the time a user is active on a website (TypeScript)
README
# browser-interaction-time
[](https://github.com/atlassian/browser-interaction-time/issues)
[](https://raw.githubusercontent.com/atlassian/browser-interaction-time/master/LICENSE)
[](https://travis-ci.org/atlassian/browser-interaction-time)
[](https://www.npmjs.com/package/browser-interaction-time)
[](http://semver.org/spec/v2.0.0.html)
[](https://github.com/semantic-release/semantic-release) [](https://greenkeeper.io/)
BrowserInteractionTime lets you track the time a user is active on your webpage while ignoring time spent on a different tab or with a minimized window. It also ignores the time spent while the user is idle on a web page meaning after a certain amount of time (idleTimeoutMs) without any user interactions (scroll, mousemovement etc) the time will stop until the next user interaction.
## Importing BrowserInteractionTime
You can import the generated bundle to use the whole library like this:
```javascript
import BrowserInteractionTime from 'browser-interaction-time'
```
Additionally, you can import the transpiled modules from `dist/lib`:
```javascript
import BrowserInteractionTime from 'browser-interaction-time/dist/lib/'
```
## API
### Initialize
```js
import BrowserInteractionTime from 'browser-interaction-time'
const browserInteractionTime = new BrowserInteractiontime({
timeIntervalEllapsedCallbacks: [],
absoluteTimeEllapsedCallbacks: [],
browserTabInactiveCallbacks: [],
browserTabActiveCallbacks: [],
idleTimeoutMs: 3000,
checkCallbacksIntervalMs: 250
})
```
### Start timer
```js
browserInteractionTime.startTimer()
```
### Stop timer
```js
browserInteractionTime.stopTimer()
```
### Adding a callback that is executed on interval
```js
const cb = {
multiplier: time => time * 2,
timeInMilliseconds: 1000,
callback: () => console.log('callback')
}
browserInteractionTime.addTimeIntervalEllapsedCallback(cb)
```
### Adding a callback that is executed on absolute time
```js
const callbackData = {
timeInMilliseconds: 1000,
callback: () => console.log('callback')
pending: true
}
browserInteractionTime.addAbsoluteTimeEllapsedCallback(callbackData)
```
### Adding callback executed when browser tab becomes inactive
```js
const callback = () => console.log('some callback')
browserInteractionTime.addBrowserTabInactiveCallback(callback)
```
### Adding callback executed when browser tab becomes active
```js
const callback = () => console.log('some callback')
browserInteractionTime.addBrowserTabActiveCallback(callback)
```
### Set a mark on modified timeline (see https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark)
```js
browserInteractionTime.mark('a-mark')
browserInteractionTime.mark('b-mark')
```
### Get marks by name (see https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark)
```js
browserInteractionTime.getMarks('a-mark')
```
### Set measure time between 2 marks (see https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure)
```js
browserInteractionTime.measure('a-measure', 'a-mark', 'b-mark')
```
### Get measure by name
```js
browserInteractionTime.getMeasures('a-measure') // Array of measures with name
```
### Get Time in Milliseconds
```js
browserInteractionTime.getTimeInMilliseconds() // number
```
### Check if timer is running
```js
browserInteractionTime.isRunning() // boolean
```
### Reset all times
```js
browserInteractionTime.reset()
```
### Cleanup event listeners and timers
```js
browserInteractionTime.destroy()
```
## NPM scripts
- `npm t`: Run test suite
- `npm start`: Run `npm run build` in watch mode
- `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)
- `npm run test:prod`: Run linting and generate coverage
- `npm run build`: Generate bundles and typings, create docs
- `npm run lint`: Lints code
- `npm run commit`: Commit using conventional commit style ([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:)
## Author
Maximilian Heinz [@_meandmax_](https://twitter.com/_meandmax_)
## Collaborators
❤️ Logo Design by [Dominik Straka](http://www.dominikstraka.de/)