He integrado la biblioteca timeonsite para almacenar el tiempo que los usuarios pasan en el sitio en una base de datos MySQL. Estoy usando el siguiente código para lograr lo mismo.
Sin embargo, los datos no se almacenan en dispositivos IOS como iPhone o iPad, pero funcionan en todos los demás navegadores como Chrome, Edge, Opera, Firefox, etc., incluidos Android Chrome y 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'));¿Cuál es la razón de este problema y cómo resolverlo?
" NO "
El motivo se da aquí (tomado de https://github.com/saleemkce/timeonsite/issues/9 )
El evento "beforeunload" no se admite en absoluto en dispositivos IOS como Iphone, Ipad y el navegador safari móvil. Solo para estos dispositivos, tenemos que recurrir a "opción de solicitud/almacenamiento local" por el momento al verificar Navigator.platform mientras inicia el rastreador. Es una situación en la que todos ganamos, ya que podemos rastrear todos los dispositivos en tiempo real, excepto los dispositivos IOS, para los cuales podemos aplicar de manera segura la "opción de solicitud de objeto" y obtener el último registro más adelante por ahora.
La API en tiempo real falla solo en dispositivos IOS debido a las razones mencionadas anteriormente, pero lo bueno es que puede usar la opción de solicitud para capturar los datos de manera retrasada. Ir a través del enlace una vez para entenderlo mejor. Pero la pregunta sigue siendo, si uso la opción de solicitud para dispositivos IOS, ¿cómo capturo en tiempo real para todos los demás navegadores en dispositivos móviles y de escritorio? El ajuste es simple, reemplace el
var configobjetar con esto,
// checking for IOS based browser or not var isIOS = (/iPad|iPhone|iPod/i.test(navigator.platform)) && !window.MSStream; if (!isIOS) { /* All browsers desktop and mobile except IOS devices */ var config = { // track page by seconds. Default tracking is by milliseconds trackBy: 'seconds', callback: function(data) { /* callback denotes your data tracking is real-time */ console.log(data); 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); } } } }; } else { /* For IOS devices only since "beforeunload" event is not supported */ var config = { // track page by seconds. Default tracking is by milliseconds trackBy: 'seconds', request: { /* Presence of request object denotes we're going to use Localstorage */ url: endPointUrl } }; }Ahora, podrá capturar datos de ambas formas. Visitas de página con enfoque diferido (N-1) para dispositivos IOS y visitas de página en tiempo real (N) para todos los demás navegadores en dispositivos móviles y de escritorio.