CODEWITHSUNDEEP
angulartime-tracking
h.jalilzade
h.jalilzade

Reputation: 347

Angular 2 Track user spent time on a page

I have an website with angular 2. How can I track the time that user has spend on pages.

Upvotes: 0

Views: 4402

Answers (2)

webblover
webblover

Reputation: 1196

I have an website with angular 2. How can I track the time that user has spend on pages

With your solution ngOnDestroy event will not trigger. I think beside your solution we have to use unloadHandler or onbeforeunload

Yes, you need modern trackers that makes use of onBeforeUnload and page visibility API efficiently.

It's a very important Feature Request by many for web 2.0 applications and modern Angular apps. 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. The same is the case for NoSQL as well. Timeonsite.js is supporting both RDBMS and NoSql DB types.

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 Angular/React app.

This tracker can be plugged-in in any library not only in Angular/React app but also VueJs, 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.

Upvotes: 0

user3875721
user3875721

Reputation:

You can use Object Date. Date is object for work with date and time.

The momentJs is lib for work with time also. I like a momentJs becouse it work with date - simple.

In Angular2 are interfaces OnInit and OnDestroy. You can add to ngOnInit method dateStart and Calculate eriod to ngOnDestroy .

 import { Component, OnInit, OnDestroy} from '@angular/core';
 import * as moment from "moment";
 ...
 export class ConverterComponent implements OnInit, OnDestroy {
     ....

    ngOnInit() {

       this.dateStart = moment(); //or New Date()
    }

    ngOnDestroy() { 
       let period = moment.utc(moment(this.dateStart).diff(moment())).format("HH:mm:ss");
    }
     ....

 }

Upvotes: 1

Related Questions