I have integrated the timeonsite library to store the time users spend on the site in a MySQL database. I’m using the following code to achieve the same.
However, the data is not getting stored in IOS devices like iPhone or iPad but works in all other browsers like Chrome, Edge, Opera, Firefox, etc. including Android chrome and firefox.
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',
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
// replace with your endpoint URL
var endPointUrl="http://localhost:4500/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.
// sendBeacon is experimental technology; it may not work well
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', 'https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.2.0/timeonsitetracker.js'));
What’s the reason for this issue and how to get it resolved?
2
What if you use
fetch
to make the request?@double-beep It doesn’t work at all. Tested in Chrome and Firefox. sendBeacon is the only API designed to capture last moment data traffic; fetch will work mostly fine in normal scenarios but when it comes to unload events, which this timeonsite tracker seems to be utilizing, fetch just fails silently.