2

I have a requirement to track how much time the user spending time on web sites/web application. Its like a time tracking tool for websites, I have wpf application which will open the websites on IE/Chrome/Firefox. I need to track the how much time user works on the website.

Chrome and firefox provides the history which i can get from sqlite database that stores in the user system but IE doesn't provide any information about the history.

Is there a better way i can track all browser activity with the user spending time on each websites?

NullReferenceException
  • 1,641
  • 15
  • 22
  • "I have wpf application which will open the websites on IE/Chrome/Firefox." -- So they run your app, which itself then opens e.g., IE, then they work on the website for awhile, then they close IE, then close your program? If so, you could just time how long the process you launched is running. – Quantic Oct 13 '16 at 19:32
  • @Quantic Yes suggestion works the time user opened browser and closed the browser.What if the user opened website might have session expiration.? or the user will logout from website and they wont close the browser? How can i track in such scenario – NullReferenceException Oct 13 '16 at 19:37
  • I think your question is probably too broad. Pretty sure a lot of websites can be effectively used for hours and the History would only show 1 single page visited once. What if it's like StackOverflow, and I'm simply typing in my question for 30 minutes into the text box? I'm 'working on the website' but zero data has been sent to or from the server (except default stuff like notifications). It seems like you basically want a packet sniffer more so than a "history of URL's visited". This might be a better question for Server Fault, or at least change the tags as I don't think they are relevant – Quantic Oct 13 '16 at 19:58
  • @Quantic Can you suggest me how to track history of URL's visited with a packet sniffer.?Can we do this through writing AddOn to all browser? – NullReferenceException Oct 25 '16 at 09:01
  • No I don't know ways of tracking history of URL's. This is probably a question for serverfault, not SO. – Quantic Oct 25 '16 at 15:47

1 Answers1

1

I have wpf application which will open the websites on IE/Chrome/Firefox. I need to track the how much time user works on the website

It's a very important Feature Request by many for web 2.0 applications. So, I write a detailed, working and simple solution on the subject here.

You are requesting a feature already created for this workflow. It's a plugin you can include in any website. It's none other than time-on-site tracking in timeonsite.js

Look at the following code (Use latest version; don't just copy/paste),

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.2.0/timeonsitetracker.js"></script>

<script>
var config = {
    // track page by seconds. Default tracking is by milliseconds
    trackBy: 'seconds',

    trackHistoryChange: true, //Single-page React/Angular app

    callback: function(data) { /* callback denotes your data tracking is real-time */
        console.log(data);
        var endPointUrl = 'http://example.com' //Replace with your actual backend API URL http://localhost/tos
        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);
            }
        }
    }
};
var Tos;
if (TimeOnSiteTracker) {
    Tos = new TimeOnSiteTracker(config);
}
</script>

</head>

Then, when you refresh, reload or navigate the React app page,

You'll see following object directly saved into your table/printed in browser console. Select "persist" in logs,

{
    TOSId: 1129620185532,
    TOSSessionKey: "14802525481391382263",
    TOSUserId: "anonymous",
    title: "Test application - Home page",
    URL: "http://nature-blogs/pages/home.php"
    entryTime: "2021-11-27 13:15:48.663",
    currentTime: "2021-11-27 13:17:31.663",
    timeOnPage: 103,
    timeOnSite: 103,
    timeOnPageTrackedBy: "second",
    timeOnPageByDuration: "0d 00h 01m 43s",
    timeOnSiteByDuration: "0d 00h 01m 43s",
    trackingType: "tos",
}

As you can see, the actions

  • "entryTime" is captured
  • "exitTime" is captured in seconds/milliseconds depending upon configuration
  • "type:time_on_site" is captured
  • "timeOnPage" is captured // individual page time
  • "timeOnSite" is captured // session overall page time

What else you need? Since it's stored in SQL DB table, you can do analysis/reporting queries yourself. This works in any RDBMS DB smoothly.

On top of it, 1.Minimize tab, 2.Inactive tab and 3.Switch tab's idle time are all computed and ignored automatically by the tracker itself.

The only thing to note in configuration part is,

trackHistoryChange: true

If the page routing depends on Location Hash or also known as single-page app, include this setting. On the other hand if your web application is a normal page like Wikipedia, avoid setting this line. You are done. For showing the real-time stay time on screen, check this SO post. It's using Jquery to show the results. You can customize it for your React app.

This tracker can be plugged-in in any library VueJs, React, Angular, Jquery, MooTools etc. since it's plain vanilla JS library.

Let me know if you need more input on the subject. I can assist you on this.

webblover
  • 1,196
  • 2
  • 12
  • 30