Implemented the timeonsite JS tracker in my Angular web application using HTML tags as shown below,
<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);
// provide your endpoint URL/ server-side URL for handling TOS data via a POST method. Example PHP, nodejs or python URL to save 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 discarded!');
return;
}
}
// utilize the 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'));
Upon page reloads and refreshes, I can see the captured data stored in the tracking table accurately. I am leveraging the sendBeacon() API to capture data efficiently and without loss.
From the page, the recorded information appears as follows:
{
"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"
}
For the page, the captured record is displayed 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"
}
And from the page, the captured data displays 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"
}
It's worth noting that the URL field points only to the homepage across all three page navigations instead of the specific /products and /photos pages respectively.
Could this be a bug within the timeonsitetracker.js library or is there something crucial I might be overlooking? I have not encountered this issue in regular web applications (non single-page apps). Appreciate any insights provided in advance.