Short answer: Yes, with increased sendBeacon/Fetch API support from most browsers, you can track time on site real-time now. For N "pageviews", you'll have N "time on site" records in your favorite database table.

Long answer: We know, a lot of our users have been quite interested for real-time tracking of time on site parameter for web analytics since our tracker is more transparent, open and accurate in terms of leveraging this metric. The problem with most analytics providers is that this metric is captured with the help of polling or ping techniques. That is, the API will hit the DB table every 5 or 10 seconds continuously to update the time on page & time on site for the given user session. On the other hand, this tracker, from the very beginning, has been on the goal that it should not overload the server with polling or pings (you'll see that on Network tab when using other analytics) thus preventing CPU overheads and costs incrementally.

So, what's the change/Update on this?
We have been working with various browser vendors by raising the issue to fix the problems associated with sendBeacon and Fetch API so that we can experience "time on site" real-time and avoid the old, boring polling/ping techniques. As per our requests and other developers all over the world, sendBeacon and Fetch API's security issue have been fixed and allowed now back again in leading browsers like Chrome, Firefox, Edge, Safari etc. It's a great and big news for all of us interested in user analytics.

As your know, we have two ways to save data with this state-fo-the-art time-on-site tracker,
1, callback function option: this is real-time. For N page views, you'll have N "time on site" records grouped by unique sessions in your DB table (most preferred and lossless approach in analytics)
2, request object option: this is not real-time but delayed approach. For N page views, you'll have N-1 "time on site" records grouped by unique sessions in your DB table(lossy approach. Last 1 record will be available in next page load). But, this option has been used by our users using this timeonsitetracker.js around the world since the mid of 2018 due to "sendBeacon" security issue in Chrome/Firefox and other browsers.

Are there any known problems we need to overcome?
Mostly "Big NO" for most browsers except one scenario. "beforeunload" event is not at all supported in IOS devices like Iphone, Ipad and mobile safari browser. For these devices alone, we have to fallback to "request option/localStorage" for the time being by checking Navigator.platform while initiating the tracker. It's a win-win situation for us since we can track all devices real-time except IOS devices for which we can safely apply "request object option" and get the last record later on for now.

Could you share that configuration that will help us achieve this efficiency while tracking in my websites?

var Tos;
(function(d, s, id, file) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.onload = function() {
        // give your endpoint URL/ server-side URL that is going to handle your TOS/activity data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB
        var endPointUrl = 'http://localhost:4500/tos'; // replace with your endpoint URL

        // checking for IOS based browser or not
        var isIOS = (/iPad|iPhone|iPod/i.test(navigator.platform)) && !window.MSStream;

        if (!isIOS) { /* All browsers desktop and mobile except IOS devices */
            var config = {
                // track page by seconds. Default tracking is by milliseconds
                trackBy: 'seconds',
    
                callback: function(data) { /* callback denotes your data tracking is real-time */
                    console.log(data);
                    if (data && data.trackingType) {
                        if (data.trackingType == 'tos') {
                            if (Tos.verifyData(data) != 'valid') {
                                console.log('Data abolished!');
                                return; 
                            }
                        }
                        
                        // make use of sendBeacon if this API is supported by your browser.
                        if (navigator && typeof navigator.sendBeacon === 'function') {
                            data.trasferredWith = 'sendBeacon';
                            var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                            navigator.sendBeacon(endPointUrl, blob);
                        }
                    }
                }
            };

        } else { /* For IOS devices only since "beforeunload" event is not supported */
            var config = {
                // track page by seconds. Default tracking is by milliseconds
                trackBy: 'seconds',
            
                request: { /* Presence of request object denotes we're going to use Localstorage */
                    url: endPointUrl
                }
            };

        }
        
        if (TimeOnSiteTracker) {
            Tos = new TimeOnSiteTracker(config);
        }
    };
    js.src = file;fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'TimeOnSiteTracker', 'timeonsitetracker.min.js'));

If you are testing in non-production environment, I'd recommend you setting,
developerMode: true
in configuration since that will help you tracking any issues in setting up the tracker.

• You hitting a "star" gives more confidence for us to keep building the tracker more transparent, accurate & free for non-production & non-profit organizations.

Adding all members who have contributed to this tracker in one way or other to increase the visibility of the feature.
@evonsdesigns @hoangtrucit @skaught @evandrix @skpear @blueoceanideas @Manikant92 @D33P4K @Akimyou @AndreaMorone
@littlethumb123 @mtasuandi @awright415 @XPilot @milton-alvarenga @bfblackjack @JStika @rene-giretzlehner @niitprachi @nomanilyas16 [only a small set of users have been added for notification]

Our blogs on time-on-site tracking & analytics, if you had missed (these links not for ones who already visited these bogs):
Introducing time-on-site Analytics For Businesses And High-end Applications
Understand the content significance of web pages with time on-site metrics to maximize business

In chrome, this plugin executes the callback perfectly to save the TOS data.

However, the callback never executes in Safari. Tested in most recent Safari, Safari 14, and Safari 12 on two different MAC devices with same result - callback does not execute.

I'm using php Nette framework v. 2.4 (https://doc.nette.org/en/2.4/sessions).

If I use after login: Tos.startSession("user_"+tosCustomData.userId);
and if I use after logout: Tos.endSession();
I got php error, please see img.
Can you help me?

But, another issue:
if (tosSessionManager === 1) {
Tos.startSession("user_"+tosCustomData.userId);
Tos.extendSession({$cookieLifeTime|noescape});
} else if (tosSessionManager === 2) {
Tos.endSession();
}

Variable $cookieLifeTime is cookie life time from Nette framework (+14 days).
If I use Tos.extendSession({$cookieLifeTime|noescape}); I see in console current datetime and not datetime + 14 days.

Originally posted by @JStika in #4 (comment)

Hi all,

Thanks for your reporting on several issues in other time tracking JS libraries. I've seen that most of the issues raised by users like you haven't been addressed for years & years. It's time to check out a modern, user-friendly and more accurate tracker. Given below are several issues that you have reported and their statuses given here:

Issue: IOS device is not supported properly or due to absence of window unload events
Tracker's current status: yes, it had been a big challenge to support IOS devices properly for many analytics providers (they fallbacked to old polling technique) due to absence of window unload events in IOS devices and mobile safari. We had written a major patch last year to support all IOS devices like IPad, Iphone and mobile safari. It's supported elegantly in this tracker since the year (2020) from the month of July.

Issue: Timer is not reset on several occasions thus leading to incorrect time being recorded or set the timer to zero
Tracker's current status: There is nothing to set or reset in Timeonsite tracker. Everything is handled by tracker itself starting from capturing time on user entering the page till the user closes the browser tab/window. Since it's automatic, time-aware and there is no manual intervention, capture of time-on-site data is consistent and accurate as well. The behavior is consistent across single-page and normal websites. The only thing to note is, you need to specify in init config parameter in case the given website is single-page website.
When a page is closed, reloaded or refreshed, generally following data is sent to tracker table automatically if the URL (endpoint to save data in DB table) is given.

{
  "TOSId": 5968225443454776,
  "TOSSessionKey": "9289163773130862762620",
  "TOSUserId": "anonymous",
  "URL": "https://saleemkce.github.io/timeonsite/",
  "title": "Timeonsite Tracker | Real-time demo",
  "entryTime": "2021-11-25 07:05:00.595",
  "currentTime": "2021-11-25 07:05:23.595",
  "exitTime": "2021-11-25 07:05:23.595",
  "timeOnPage": 23,
  "timeOnPageTrackedBy": "second",
  "timeOnSite": 23,
  "timeOnPageByDuration": "0d 00h 00m 23s",
  "timeOnSiteByDuration": "0d 00h 00m 23s",
  "trackingType": "tos"
}

Issue: Time on site data should be attached with Google Analytics or Adobe analytics for cross reporting
Tracker's current status: This is one of the most expected features from users involved in analytics for viewing & analyzing combined reporting data. This tracker provides a session key with the help of built-in API Tos.getTimeOnPage().TOSSessionKey; You can call this session key anytime and attach it in GA, Adobe, Piwik Analytics or anything and enjoy the 365°(deg.) reporting comfortably. Since your current visitor's GA session & TimeOnSite tracker's session are linked, it's quite easy to view enhanced & advanced level reporting.

Issue: Time on site tracking behavior when multiple pages are opened by user in the browser
Tracker's current status: This is supported out-of-the-box. And this is the reason it calls itself state-of-the-art, accurate & transparent time-on-site tracker. This behavior is consistent in IOS as well. Latest version(v1.2.0) was intended for multi-tab sessions time on site accuracy in IOS devices while on the other hand, support for this capability for leading browsers like Chrome, Firefox or Edge etc. has been naive since the beginning.

Issue: Save time on page/site along with custom (e.g username, IP, country, application data etc.) data to DB table
Tracker's current status: Yes, it's provided out of the box with built-in API Tos.setCustomData({name:'John',age:25}); you need to do nothing else. It should be available in your DB table (MongoDB). For MariaDB/Mysql/other RDBMS, you just need to adjust the schema slightly; you are done. You can capture any custom or critical data very comfortably but it shouldn't be too large since it's not a drawback in TimeonsiteTracker.js itself but the capability of unload events in all modern browser vendors.

Issue: Timer sometimes track huge time output issue (large time on page or time on site in unexpected manner)
Tracker's current status: Generally, it tracks data in transparent & accurate way. We've been improving a great deal since 2018, first release in this very huge top/tos data due to sleep/hibernate or unexpectedly large user inactivity. This issue should be mitigated to a great extent in near future with the improving support in browser vendors & tracker itself.

Issue: Handling idle timeout in tracker
Tracker's current status: This should be handled by tracker itself. You don't need to bother about timeout issues since the time-on-site data is a continuous stream of time and tracker carefully captures the active time and the rest is ignored. There is no external API to control time in or time out; everything is automatically handled by itself.

Issue: Using web-socket receiver to handle time on site data
Tracker's current status: Since we use sendBeacon/XMLHttpRequest APIs to capture the data on page close, using web sockets to handle the time on site data is mostly not required. But, upserting the data in our table at any given time with web sockets is also a good option; We'll be calling the Tos.getTimeOnPage() anytime and get the current status and update the table with web sockets but this option is also mostly not recommended. But, if you got special use cases and you need to update now and then with web sockets, then you can freely consider it with using page visibility APIs or pagehide events.

Issue: Blur & focus events are utilized overly yet no window beforeunload/unload event support
Tracker's current status: This tracker primarily depends on the beforeunload/unload events only; that's the reason it doesn't require polling/pinging or persistent web-socket connections to keep updating the time-on-site tracker table. Blur & focus events are internally handled very well with page visibility APIs, so you need not even think of it. You just visit the web page and then on closing the browser tab/browser shutdown itself, you are expected to receive data consistently (that's the goal of the project as well)

Issue: Tracking any activity like video, music or tracking the activity of courses/exams online
Tracker's current status: This feature is available out of the box and it's handled with Tos.startActivity({name: "Toy show episode 1", city: "Old Trafford", country: "UK"}); & Tos.endActivity({watchedFully: true}) API. The best thing about it is, current session is mapped with the activity. So, you can track in which session each activity like watching video, playing music or taking a course/exam/activity actually happened and this data can be shared with external providers like GA, Adobe or Piwik analytics as well.

I'd like you to take a look at the demo in your browser and experience it: https://saleemkce.github.io/timeonsite

Your data is private & secure here; you own the whole time on site data yourself in your preferable DB tables (unlike other 3rd party services where the analytics data is stored in public cloud) and so your data privacy is fully guaranteed.

It's for demo purposes only and the data won't be saved or persistent in your next session. It's my invitation for you to test & experience this transparent tracker. If you'd like to see how it works really for your website, just set it up in your non-prod website and test it today!

@kalimerre @martyf @yoderjen @essteffan @amitkoth @arthruwelkin @thegreenarrow @Julioocz @paulopmx @malikmalhan @yorzi @xTRiM @mewis @firstsightmedia @sburkett @enmanuelr @javatechy @redaxmedia

Hi @saleemkce. First I just wanted to say awesome work with this project.
I'm using the local data storage configuration option rather than the realtime callback option. However when receiving the TOS data at my endpoint, I always get the tos object of the first item of the current date key after every request/refresh. I'm assuming it's because of the line below.

params = itemData[0],
Shouldn't params be set to the last element in the itemData array? Kindly assist.

I've still question.

Example:
I'm testing on windows 10, xampp, PHP diresctive is date.timezone: Europe/Prague.
I got data saved to database -2 hours from JS Datetime.

I'm living in Kosice, Slovakia - +1 GTM. Now is summer time.

JS Datetime funtion returns CET time, I want current time returned by browser. How can I correct this problem?

Hi @saleemkce sorry for late reply, I've updated the response sent from server and it's now working on Safari.

For Firefox, the issue remains same.

Originally posted by @nomanilyas16 in #7 (comment)

Hi,

I cannot add a new PR.
I have a request.
Are you willing to add new items like IP and country?
E.g.:
https://stackoverflow.com/questions/37111788/how-to-get-user-country-name-from-user-ip-address-in-php

I tested TOS on an iPhone X: https://saleemkce.github.io/timeonsite/
As long as I stay on the same page (without reload) the counter goes up. When I reload the page, both counters are reset to 0.

Additionally the realtime callbacks are not firing on iOS when leaving the page or just navigating between multiple pages on the same domain.