¿Cómo medir el tiempo pasado en una página?

Question

Me gustaría medir un tiempo (en segundos en enteros o minutos en flotadores) que un usuario pasa en una página. Sé que hay un evento de descarga que puedo activar cuando salen de la página. Pero, ¿cómo conseguir un tiempo que ya hayan pasado allí?

Answer 1

Si utiliza Google Analytics, proporcionan esta estadística, aunque no estoy seguro de cómo la obtienen.

Si desea hacer su propia versión, necesitará tener alguna solicitud AJAX que se envíe a su servidor para iniciar sesión.

jQuery tiene un método .unload (...) se puede utilizar como:

$(document).ready(function() { 
    var start = new Date(); 

    $(window).unload(function() { 
     var end = new Date(); 
     $.ajax({ 
     url: "log.php", 
     data: {'timeSpent': end - start}, 
     async: false 
     }) 
    }); 
}); 

Ver más aquí: http://api.jquery.com/unload/

La única advertencia aquí es que utiliza evento beforeunload de Javascript, que doesn No siempre se dispara con tiempo suficiente para hacer una solicitud de AJAX como esta, por lo que es razonable que pierda una gran cantidad de datos.

Otro método sería sondear periódicamente el servidor con algún tipo de mensaje "STILL HERE" que se puede procesar de manera más consistente, pero obviamente mucho más costoso.

Answer 2

Creo que la mejor manera es almacenar el tiempo de carga y descarga de los controladores de eventos en las cookies, p. y luego analizarlos en scripts del lado del servidor

Answer 3

Diría que su mejor opción es realizar un seguimiento del tiempo de las solicitudes por ID de sesión en su servidor. El tiempo que el usuario pasó en la última página es la diferencia entre el momento de la solicitud actual y el momento de la solicitud anterior.

Esto no captará la última página de las visitas del usuario (es decir, cuando no vaya a haber otra solicitud), pero seguiría con este enfoque, ya que de lo contrario tendrías que enviar una solicitud en onunload, que sería extremadamente propenso a errores.

Answer 4

La respuesta aceptada es buena, pero (como alternativa) he puesto algo de trabajo en una pequeña biblioteca de JavaScript que mide el tiempo que un usuario está en una página web. Tiene el beneficio adicional de hacer un seguimiento más preciso (aunque no perfectamente) del tiempo que un usuario realmente está interactuando con la página. Ignora las veces que un usuario cambia a diferentes pestañas, se queda inactivo, minimiza el navegador, etc. El método de Google Analytics sugerido en la respuesta aceptada tiene el inconveniente (según tengo entendido) de que solo verifica cuando una nueva solicitud es manejada por su dominio. Compara el tiempo de solicitud anterior con el nuevo tiempo de solicitud y lo llama el "tiempo pasado en su página web". En realidad, no sabe si alguien está viendo su página, ha minimizado el navegador, ha cambiado las pestañas a 3 páginas web diferentes desde la última vez que cargó su página, etc.

Editar: He actualizado el ejemplo para que incluya la API actual uso.

Edición 2: Actualización de dominio en el proyecto se hospeda

https://github.com/jasonzissman/TimeMe.js/

Un ejemplo de su uso:

incluir en su página:

<!-- Download library from https://github.com/jasonzissman/TimeMe.js/ --> 
<script src="timeme.js"></script> 
<script type="text/javascript"> 
TimeMe.initialize({ 
    currentPageName: "home-page", // page name 
    idleTimeoutInSeconds: 15 // time before user considered idle 
}); 
</script> 

Si desea para informar los tiempos usted mismo a su servidor:

xmlhttp=new XMLHttpRequest(); 
xmlhttp.open("POST","ENTER_URL_HERE",true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); 
xmlhttp.send(timeSpentOnPage); 

TimeMe.js también es compatible con el envío de datos de tiempo a través de WebSockets, por lo que no tienen que tratar de forzar una petición HTTP completa en el caso document.onbeforeunload.

Answer 5

Según la respuesta correcta, creo que esa no es la mejor solución. Porque de acuerdo a la documentación de jQuery:

El manejo exacto del evento de descarga ha variado desde la versión de versión de los navegadores. Por ejemplo, algunas versiones de Firefox activan el evento cuando se sigue un enlace, pero no cuando la ventana está cerrada. En el uso práctico de , el comportamiento debe probarse en todos los navegadores compatibles y en contraste con el evento de descarga previa similar.

Otra cosa es que no debe usarlo después de la carga de documentos porque el resultado de la resta de tiempo puede ser falso.

Así que la mejor solución es añadir al evento onbeforeunload en el extremo de la sección <head> así:

<script> 
var startTime = (new Date()).getTime(); 

window.onbeforeunload = function (event) { 
    var timeSpent = (new Date()).getTime() - startTime, 
     xmlhttp= new XMLHttpRequest(); 
    xmlhttp.open("POST", "your_url"); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); 
    xmlhttp.send(timeSpent); 
}; 
</script> 

Por supuesto, si desea contar el tiempo usando un detector de inicio Puede utilizar:

https://github.com/serkanyersen/ifvisible.js/

TimeMe es una envoltura para el paquete que me pegue más arriba.

Answer 6

Además de la respuesta de Jason, aquí hay una pequeña porción de código que debería funcionar bien si usted prefiere no usar una biblioteca, considera cuando el usuario cambia de pestaña o enfoca otra ventana.

let startDate = new Date(); 
let elapsedTime = 0; 

const focus = function() { 
    startDate = new Date(); 
}; 

const blur = function() { 
    const endDate = new Date(); 
    const spentTime = endDate.getTime() - startDate.getTime(); 
    elapsedTime += spentTime; 
}; 

const beforeunload = function() { 
    const endDate = new Date(); 
    const spentTime = endDate.getTime() - startDate.getTime(); 
    elapsedTime += spentTime; 

    // elapsedTime contains the time spent on page in milliseconds 
}; 

window.addEventListener('focus', focus); 
window.addEventListener('blur', blur); 
window.addEventListener('beforeunload', beforeunload); 

Answer 7

<body onLoad="myFunction()"> 
<script src="jquery.min.js"></script> 
<script> 
var arr = []; 
window.onbeforeunload = function(){ 
var d = new Date(); 
var n = d.getTime(); 
arr.push(n); 
var diff= n-arr[0]; 
var sec = diff/1000; 
var r = Math.round(sec); 
return "Time spent on page: "+r+" seconds"; 
}; 
function myFunction() { 
var d = new Date(); 
var n = d.getTime(); 
arr.push(n); 
} 
</script>