Links
Demo - https://pdfviewer-30543.bubbleapps.io/version-test/activetimetracker

Editor - https://bubble.io/page?id=pdfviewer-30543&tab=Design&name=activetimetracker&type=page&elements=bTHMJ


How it works (high level)


The Active Time Tracker element sits invisibly on a page and tracks total time vs active time for the current user session.
It listens for activity (mouse, keyboard, scroll, touch, resize, visibility) and treats the user as Idle after a configurable number of silent seconds. If any <video> or <audio> tag is playing, the user is forced to Active, even if they aren’t touching the mouse or keyboard. Every few seconds it updates its exposed Bubble states, and at a configurable interval it fires a save tick event and resets its internal counters so you can log activity in your database. It also has logic to safeguard your database from being bloated with unnecessary data from a tab that is continously open but the user is not engaging with it. 

Implementation Instructions

1. Drop the element on your page

Install the plugin.
On any page you want to track, add the Active Time Tracker element (you only need one per page).

The element can be any size and will not be visible to users.

2. Configure the properties

a) Idle threshold (seconds) - time in seconds before user is considered idle.

What it does:
Controls how long the user can be inactive before the tracker switches status from Active to Idle.

Typical values:
20–30 seconds for tight engagement tracking.

60–120 seconds for more relaxed reading sessions.


b) Save tick interval (minutes) 

What it does:
Controls how often the tracker fires the “When tracker save tick fires” event and resets its counters. Each tick represents a “block” of tracked time you can write to the database.

Trade-offs:

Shorter interval (e.g. 1–5 minutes) = more granular analytics, more database writes.

Longer interval (e.g. 10–30 minutes) = coarser data, fewer writes.

c) Session Time Out
The maximum amount that the timer will run for when a user is in idle mode before completely timing out


3. Exposed states (what you can read)

On the page, the element exposes these states:

total_time_seconds – total tracked time since the last save tick.

active_time_seconds – time the user was considered Active (not Idle, tab visible).

tracking_status – "Active" or "Idle" at the current moment.

last_save_timestamp – timestamp (in ms since epoch) when the last save tick fired.

You can use these in conditions, text elements, or workflows like any other element state.


4. Create the logging workflow (save tick)

Go to Workflow tab.

Add a new event:
Element → Active Time Tracker → When tracker save tick fires.

In the action, create or update a Thing in your database, for example:

Type: Session Info

Fields:

Total time (seconds) = This Active Time Tracker's total_time_seconds

Active time (seconds) = This Active Time Tracker's active_time_seconds

(optional) Status = This Active Time Tracker's tracking_status

(optional) Timestamp = This Active Time Tracker's last_save_timestamp:converted to date

Every time the save tick interval elapses and there has been some active time, this event will run and log a new row. If there has been no activity, the save tick event does not trigger. This is a safe guard to protect your database in the event that a user leaves a tab open for days on end.