browser-interaction-time

browser-interaction-time

browser-interaction-time 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 also stop until the next user interaction.

Importing BrowserInteractionTime

You can import the generated bundle to use the whole library generated by this starter:

import BrowserInteractionTime from 'browser-interaction-time'

Additionally, you can import the transpiled modules from dist/lib in case you have a modular library:

import BrowserInteractionTime from 'browser-interaction-time/dist/lib/'

API

Initialize

import BrowserInteractionTime from 'browser-interaction-time'

const browserInteractionTime = new BrowserInteractiontime({
  timeIntervalEllapsedCallbacks: [],
  absoluteTimeEllapsedCallbacks: [],
  browserTabInactiveCallbacks: [],
  browserTabActiveCallbacks: [],
  idleTimeoutMs: 3000,
  checkCallbacksIntervalMs: 250
})

Start timer

browserInteractionTime.startTimer()

Stop timer

browserInteractionTime.stopTimer()

Adding a callback that is executed on interval

const cb = {
  multiplier: time => time * 2,
  timeInMilliseconds: 1000,
  callback: () => console.log('callback')
}
browserInteractionTime.addTimeIntervalEllapsedCallback(cb)

Adding a callback that is executed on absolute time

const callbackData = {
  timeInMilliseconds: 1000,
  callback: () => console.log('callback')
  pending: true
}
browserInteractionTime.addAbsoluteTimeEllapsedCallback(callbackData)

Adding callback executed when browser tab becomes inactive

const callback = () => console.log('some callback')
browserInteractionTime.addBrowserTabInactiveCallback(callback)

Adding callback executed when browser tab becomes active

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)

browserInteractionTime.mark('a-mark')
browserInteractionTime.mark('b-mark')

Get marks by name (see https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark)

browserInteractionTime.getMarks('a-mark')

Set measure time between 2 marks (see https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure)

browserInteractionTime.measure('a-measure', 'a-mark', 'b-mark')

Get measure by name

browserInteractionTime.getMeasures('a-measure') // Array of measures with name

Get Time in Milliseconds

browserInteractionTime.getTimeInMilliseconds() // number

Check if timer is running

browserInteractionTime.isRunning() // boolean

Reset all times

browserInteractionTime.reset()

Cleanup event listeners and timers

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
• 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 will tell you to use it if you haven't :wink:)

Author

Maximilian Heinz @meandmax

Collaborators

❤️ Logo Design by Dominik Straka