How I implemented user active time tracking

So I work for a startup and we used to use google analytics, until I realized that there’s literally no way for me to tell which user is which, so I cannot build a dashboard around that. especially when it comes to telling companies how long their employees stay on the site.

So the solution is to implement my own active tracking which is a lot more and less complicated than I think.

Before we start:
Active by my definition is when the user has the site open and is actively clicking… scrolling etc.

so if they leave the site open overnight… only counts as active for the first 30 seconds. OK?

Data structure:
Login:
active_duration (number) - This is the time they are active on the site in seconds. I hope you are tracking login data in the first place, if not, then start doing it.

Plugins needed:
Detect inactivity Detect Inactivity Plugin | Bubble - to detect if the user is still active

toolbox to run javascript.

Step 1:
Identify an reuseable element that appears on literally every single page, for me that element is the header. You can just make a tracker reusable element if you want and sprinkle it on every page.

step2:
go to the reusable element

create a new state for the reusable element called isActive and default that to yes, this tracks if the user is active or not while the tab is still open

drag JAVASCRIPT TO BUBBLE element into the editor and use the following settings:


optional: set the javascript element size to 1x1px

Step3:
drag Detect element into the editor as well
and set the idle time to what ever you want, this is the time that it would take for the user to not interact with the page at all for this element to fire a “user is inactive” workflow, for me its 30 seconds of inactivity.

step 4: set up workflows
1:
workflow: on page loads:
run Javascript
then copy and paste the following javascript:


text:

document.addEventListener("visibilitychange", () => {     
// use the document's hidden property to check if the current tab is active!
     if (document.hidden) {
        console.log("Hidden")
        bubble_fn_active("hidden");
     } else {
        console.log("Active")
        bubble_fn_active("active");
     }
  });

This will detect if the tab that user is currently on your tab or not, so say if they switch tabs to watch youtube, they obviously isn’t active, This will track that and set your bubbleToJavascript element to “hidden”

Now under your workflows you should see these 2 options:
image

make a workflow for both
A Detect User has become inactive and
A Detect User has become active

and when they are run, set the isActive state of the reusable element to either yes or no,
if user became inactive, then isActive should be no, and vice versa.

Step 5: payoff:

create a new workflow:
Do every X seconds, you can determine the seconds, but I choose 7 because I don’t want it running constantly.

set the condition to this:
image

this way the thing will only run if:
user is logged in
the tab is on your page’s tab
and the user is actively using the site, not just letting it open and walking away.

and every time the seconds are up, update the login object’s active_duration by however many seconds you set. by doing:
image

things for optimization: Every time the page is loaded, I store the login object as a state in the reusable element that I would be modifying so I don’t have to search for it every X seconds.

Note:
Detect breaks down when users switch tabs, which is why we have to use javascript to determine if the user is still on our tab.

Let me know how you did it and possible areas of improvements

3 Likes