Track How Long You Interact With The Page/Element – TimeMe.js

Preview:

Description:

TimeMe.js is a pure JavaScript library which displays a timer to display how long you are actively viewing the current webpage.

Not only the whole page, the library also gives you the ability to track how long you interact with a specific element within the document.

The timer will pause when no interactions on the page or specific elements. For example: minimize the browser, switch to another browser tab, etc.

It also automatically pauses the timer if you go idle for a specific period of time.

The library listens for the following events and determines the user interactions on the page:

• mouseover
• mousemove
• mouseleave
• keypress
• focus

How to use it:

Install & download.

# NPM
$ npm install timeme.js --save

Import the timeme.js library into the document.

<script src="timeme.js"></script>

Initialize the timeme.js library.

TimeMe.initialize({
  currentPageName: "my-home-page", // current page
  idleTimeoutInSeconds: 5, // stop recording time due to inactivity
  websocketOptions: { // optional
    websocketHost: "ws://your_host:your_port",
    appId: "insert-your-made-up-app-id"
  }
});

Get the time spent (in seconds) on the current page/element.

TimeMe.getTimeOnCurrentPageInSeconds();
TimeMe.getTimeOnPageInSeconds(pageName);
TimeMe.getTimeOnElementInSeconds(elementId);
TimeMe.getTimeOnAllPagesInSeconds();

Track the interaction on a specific element.

TimeMe.trackTimeOnElement('myElement');

Execute a function after the user has interacted with this page for a specific period of time.

TimeMe.callAfterTimeElapsedInSeconds(timeInSeconds, callback);

Execute a function after the user leaves the current page/element.

TimeMe.callWhenUserLeaves(callback, [[numberOfInvocations]]);

Execute a function after the user returns to the page/element.

TimeMe.callWhenUserReturns(callback, [[numberOfInvocations]]);

Set the page name.

TimeMe.setCurrentPageName(newPageName);

Set the idle time.

TimeMe.setIdleDurationInSeconds(durationInSeconds);

Start/stop the timer manually.

TimeMe.startTimer();
TimeMe.stopTimer();

Reset the timer.

TimeMe.resetRecordedPageTime(pageName);
TimeMe.resetAllRecordedPageTimes();

Changelog:

v2.0.4 (10/21/2019)

• Reset Idle flag when timer starts.