Как измерить время, проведенное на странице?

Question

Я хотел бы измерить время (в секундах в целых числах или минутах в числах с плавающей запятой), которое пользователь проводит на странице.Я знаю, что есть событие unload, которое я могу вызвать, когда они покидают страницу.Но как получить время, которое они там уже провели?

Answer 1

Принятый ответ - хорошо, но (в качестве альтернативы) я вложил некоторую работу в небольшую библиотеку JavaScript, которая показывает, сколько времени пользователь находится на веб-странице. Это дает дополнительное преимущество более точного (хотя и не совсем) отслеживания того, как долго пользователь фактически взаимодействует со страницей. Он игнорирует время, когда пользователь переключается на разные вкладки, бездействует, сворачивает браузер и т. Д. Метод Google Analytics, предложенный в принятом ответе, имеет недостаток (насколько я понимаю), что он проверяет только когда новый запрос обрабатывается домен. Он сравнивает время предыдущего запроса с новым временем запроса и называет это «временем, проведенным на вашей веб-странице». На самом деле он не знает, просматривает ли кто-то вашу страницу, свернул ли он браузер, переключил ли вкладки на 3 разных веб-страницы с момента последней загрузки вашей страницы и т. Д.

Редактировать: я обновил пример, чтобы включить текущее использование API.

Редактировать 2: Обновление домена, на котором размещен проект

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

Пример его использования:

Включить на вашу страницу:

<!-- 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>

Если вы хотите сами сообщить время своему бэкэнду:

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 также поддерживает отправку данных о времени через веб-сокеты, поэтому вам не нужно пытаться принудительно ввести полный http-запрос в событие document.onbeforeunload.

Answer 2

Если вы используете Google Analytics, они предоставляют эту статистику, хотя я точно не знаю, как они ее получают.

Если вы хотите свернуть свою собственную, вам понадобится AJAX-запрос, который будет отправленна ваш сервер для регистрации.

jQuery имеет метод .unload (...), который вы можете использовать, например:

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

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

Подробнее здесь: http://api.jquery.com/unload/

Единственное предостережение здесь состоит в том, что он использует событие javascript beforeunload, которое не всегда срабатывает с достаточным количеством времени для выполнения AJAX-запроса, подобного этому, поэтому разумно вы потеряете много данных.опросите сервер с помощью сообщения типа «ЗДЕСЬ ЗДЕСЬ», которое можно обрабатывать более согласованно, но, очевидно, намного дороже.

Answer 3

Я бы сказал, что вам лучше всего следить за временем выполнения запросов по идентификатору сеанса на вашем сервере.Время, проведенное пользователем на последней странице, является разницей между временем текущего запроса и временем предыдущего запроса.

Это не отразит самую последнюю страницу, которую посетил пользователь (т. Е. Когдадругого запроса не будет), но я бы все-таки воспользовался этим подходом, так как в противном случае вам пришлось бы отправить запрос на onunload, что было бы чрезвычайно подвержено ошибкам.

Answer 4

я думаю, что лучший способ - хранить время в onload и выгружать обработчики событий в cookie, например, а затем анализировать их в серверных сценариях

Answer 5

В дополнение к ответу Джейсона, вот небольшой фрагмент кода, который должен помочь, если вы предпочитаете не использовать библиотеку, он учитывает, когда пользователь переключает вкладки или фокусирует другое окно.

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 6

В соответствии с правильным ответом я думаю, что это не лучшее решение.Потому что в соответствии с документацией jQuery:

Точная обработка события unload варьируется от версии к версии браузера.Например, некоторые версии Firefox инициируют событие при переходе по ссылке, но не при закрытии окна.При практическом использовании поведение должно быть протестировано во всех поддерживаемых браузерах и противопоставлено аналогичному событию beforeunload.

Другое дело, что его не следует использовать после загрузки документов, поскольку результат вычитания времени можетбыть фальшивым.

Поэтому лучшим решением будет добавить его к событию onbeforeunload в конце раздела <head>, например:

<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>

Конечно, если вы хотитепосчитайте время, используя детектор простоя, который вы можете использовать:

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

TimeMe - это обертка для пакета, который я вставляю выше.

Answer 7

??? ???????????.???()

Запуск встроенного кода, чтобы получить время, которое пользователь получил на страницу, блокирует загрузку страницы.Вместо этого используйте performance.now(), который показывает, сколько миллисекунд прошло с тех пор, как пользователь впервые перешел на страницу.Date.now, однако, измеряет время на часах, которое может отличаться от времени навигации на секунду или более из-за таких факторов, как повторная синхронизация времени и високосные секунды.performance.now() поддерживается в IE10 + и во всех вечнозеленых браузерах (evergreen = сделано для удовольствия, а не для получения прибыли).Самая ранняя версия Internet Explorer, существующая на сегодняшний день, - это Internet Explorer 11 (последняя версия), поскольку Microsoft прекратила выпуск Windows XP в 2014 году .

(function(){"use strict";

var secondsSpentElement = document.getElementById("seconds-spent");
var millisecondsSpentElement = document.getElementById("milliseconds-spent");

requestAnimationFrame(function updateTimeSpent(){
    var timeNow = performance.now();
    
    secondsSpentElement.value = round(timeNow/1000);
    millisecondsSpentElement.value = round(timeNow);
    
    requestAnimationFrame(updateTimeSpent);
});
var performance = window.performance, round = Math.round;
})();

Seconds spent on page:&nbsp; <input id="seconds-spent" size="6" readonly="" /><br />
Milliseconds spent here: <input id="milliseconds-spent" size="6" readonly="" />

Answer 8

<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>