Options
All
  • Public
  • Public/Protected
  • All
Menu

browser-interaction-time

PRs Welcome license Build Status npm SemVer semantic-release Greenkeeper badge

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:

import BrowserInteractionTime from 'browser-interaction-time'

Additionally, you can import the transpiled modules from dist/lib:

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

Index

Type aliases

BasicCallback

BasicCallback: (timeInMs: number) => void

Type declaration

    • (timeInMs: number): void
    • Parameters

      • timeInMs: number

      Returns void

Variables

Const documentIdleEvents

documentIdleEvents: string[] = ['wheel','keydown','keyup','mousedown','mousemove','touchstart','touchmove','click','contextmenu',]

Const windowIdleEvents

windowIdleEvents: string[] = ['scroll', 'resize']

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc