Integrated the timeonsite JS tracker in my Angular application in HTML tag as follows,
<script type="text/javascript">
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() {
var config = {
trackBy: 'seconds',
blacklistUrl: ['http://nature-home.local/#contact'],
developerMode: true, //optional setting
callback: function(data) {
console.log(data);
// give your endpoint URL/ server-side URL that is going to handle your TOS data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB
var endPointUrl = 'http://nature-home.local/api/tos'; // replace with your endpoint URL
if (data && data.trackingType) {
if (data.trackingType == 'tos') {
if (Tos.verifyData(data) != 'valid') {
console.log('Data abolished!');
return;
}
}
// makes use of sendBeacon API in your browser.
if (navigator && typeof navigator.sendBeacon === 'function') {
var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
navigator.sendBeacon(endPointUrl, blob);
}
}
}
};
if(TimeOnSiteTracker) {
Tos = new TimeOnSiteTracker(config);
}
};
js.src = file;fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'TimeOnSiteTracker', 'js/timeonsitetracker.js'));
On page reloads and refresh, I'm able to see data captured in tracking table correctly. I'm using sendBeacon() API to capture data in a real-time & loss-less fashion.
From http://nature-home.local/#home page, I see the record captured as:
{
"TOSId": 10271953114371370,
"TOSSessionKey": "6454165596535779179057",
"TOSUserId": "anonymous",
"URL": "http://nature-home.local/#home",
"title": "Nature Posts - Home",
"entryTime": "2022-06-23 06:22:37.787",
"currentTime": "2022-06-23 06:22:49.489",
"timeOnPage": 12,
"timeOnPageTrackedBy": "second",
"timeOnSite": 12,
"timeOnPageByDuration": "0d 00h 00m 12s",
"timeOnSiteByDuration": "0d 00h 00m 12s",
"trackingType": "tos"
}
From http://nature-home.local/#product page, I see the record captured as:
{
"TOSId": 15426974499706884,
"TOSSessionKey": "6454165596535779179057",
"TOSUserId": "anonymous",
"URL": "http://nature-home.local/#home",
"title": "Nature Posts - Home",
"entryTime": "2022-06-23 06:24:49.449",
"currentTime": "2022-06-23 06:24:52.497",
"timeOnPage": 3,
"timeOnPageTrackedBy": "second",
"timeOnSite": 15,
"timeOnPageByDuration": "0d 00h 00m 03s",
"timeOnSiteByDuration": "0d 00h 00m 15s",
"trackingType": "tos"
}
From http://nature-home.local/#photos page, I see the record captured as:
{
"TOSId": 4699630142561574,
"TOSSessionKey": "6454165596535779179057",
"TOSUserId": "anonymous",
"URL": "http://nature-home.local/#home",
"title": "Nature Posts - Home",
"entryTime": "2022-06-23 06:25:18.873",
"currentTime": "2022-06-23 06:25:29.624",
"timeOnPage": 11,
"timeOnPageTrackedBy": "second",
"timeOnSite": 26,
"timeOnPageByDuration": "0d 00h 00m 11s",
"timeOnSiteByDuration": "0d 00h 00m 26s",
"trackingType": "tos"
}
As you see, the URL field is pointing to http://nature-home.local/#home - home page only in all three page navigation instead of /products and /photos pages respectively.
Is it a bug in timeonsitetracker.js library or am I missing anything here? For your information, I haven't seen this issue in web application (non single-page app). Thanks in advance.
Is it a bug in timeonsitetracker.js library or am I missing anything here? For your information, I haven't seen this issue in web application (non single-page app). Thanks in advance.
It's neither a bug timeonsite.js nor a misbehavior in Angular app's routing module but you are missing a very significant setting while initializing the Single-page apps. Timeonsite.js is a capture of continuous stream of timing data, real-time in web and mobile browsers; That means there is nothing that stops or restarts tracking the stay time of users. It just cuts real-time session as pageviews and time-on-page based on page refresh, reaload or browser exits. But for single-page/Angular apps, there is a strategic navigation called "Hash-based" routing. In this case, since the refresh or reload doesn't occur, timeonsite.js thinks that the users stays on page 1 as is. Hence this custom setting trackHistoryChange: true, applicable for any hash-based routing apps.
So, potentially you are missing trackHistoryChange: true,, a mandatory setting for single-page/Angular app. Any app that works based on hash routing should include this.
var config = {
trackBy: 'seconds',
....
....
....
trackHistoryChange: true, //mandatory setting for single-page app
....
....
....
}
Add this missing setting and retry. It should work as expected i.e page titles and URLs would be captured on navigation properly.
Documentation, TOS-configuration-option (Look for Tracking single-page apps)