bhsz / time-on-page

Tracks active user time on page in seconds

Active Time on Page

Tracks active user time on page (ToP) in seconds.

Example page can be found at HERE.

Installation

To use as vanilla Javascript, simply download and import index.js into your project.

To use with NPM, run npm install active-time-on-page from the command line.

API

startTimerOnPage()

Starts timer on page. Listeners are added to the window's focus and blur events to toggle the timer.

getTimeOnPage()

Returns active user ToP.

clearTimerOnPage()

Clears the timer by using clearInterval.

Examples

Vanilla Javascript

import { startTimerOnPage, getTimeOnPage } from "./index.js";

startTimerOnPage();

setInterval(() => {
	let ToP = getTimeOnPage();
	// Do something with ToP
}, 1000);

React and NPM

import { startTimerOnPage, getTimeOnPage, clearTimerOnPage } from "active-time-on-page";

useEffect(() => {
	startTimerOnPage();

	let handler = setInterval(() => {
		let ToP = getTimeOnPage();
		// Do something with ToP
	}, 1000);

	return () => {
		clearTimerOnPage();
		clearInterval(handler);
	};
}, []);