javascript - rendimiento - tiempo transcurrido entre dos fechas js
¿Cómo medir el tiempo pasado en una página? (7)
Me gustaría medir un tiempo (en segundos en enteros o minutos en flotadores) que un usuario gasta 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í?
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 cuándo 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);
Creo que la mejor manera es almacenar el tiempo de carga y descarga de los manejadores de eventos en las cookies, por ejemplo, y luego analizarlos en scripts del lado del servidor.
De acuerdo con la respuesta correcta, creo que esa no es la mejor solución. Porque de acuerdo con los documentos de jQuery:
El manejo exacto del evento de descarga ha variado de una versión a otra de los navegadores. Por ejemplo, algunas versiones de Firefox activan el evento cuando se sigue un enlace, pero no cuando se cierra la ventana. En el uso práctico, el comportamiento debe probarse en todos los navegadores compatibles y debe contrastarse con el evento de descarga previa similar.
Otra cosa es que no debes usarla después de cargar los documentos porque el resultado de la resta de tiempo puede ser falso.
Entonces, la mejor solución es agregarlo al evento onbeforeunload al final de la sección <head> como este:
<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 el detector de inactividad, puede usar:
https://github.com/serkanyersen/ifvisible.js/
TimeMe es un contenedor para el paquete que pego arriba.
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 incluir el uso actual de la API.
Editar 2: actualizar el dominio donde se aloja el proyecto
https://github.com/jasonzissman/TimeMe.js/
Un ejemplo de su uso:
Incluir en tu 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 quieres reportar los tiempos tú mismo a tu back-end:
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 admite el envío de datos de temporización a través de websockets, por lo que no tiene que intentar forzar una solicitud http completa en el document.onbeforeunload . Antes de descargar el evento.
Si usa Google Analytics, proporcionan esta estadística, aunque no estoy seguro exactamente cómo la obtienen.
Si desea lanzar el suyo, necesitará tener alguna solicitud AJAX que se envíe a su servidor para iniciar sesión.
jQuery tiene un método .unload (...) que puedes usar 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
})
});
});
Vea más aquí: http://api.jquery.com/unload/
La única advertencia aquí es que utiliza el evento beforeunload de javascript, que no siempre se activa con el tiempo suficiente para hacer una solicitud AJAX como esta, por lo que es probable que pierda una gran cantidad de datos.
Otro método sería sondear periódicamente el servidor con algún tipo de mensaje "AQUÍ AQUÍ" que se puede procesar de manera más consistente, pero obviamente mucho más costoso.
Yo diría que su mejor apuesta es hacer 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 que visita el usuario (es decir, cuando no va a haber otra solicitud), pero yo seguiría con este enfoque, ya que de lo contrario tendría que enviar una solicitud en onunload , que sería extremadamente propenso a errores.
<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>