Ответ 1

Если вы используете 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-запроса, подобного этому, поэтому разумно вы потеряете много данных.

Другой метод заключается в том, чтобы периодически опрашивать сервер сообщениями типа "ОСТАЕТСЯ ЗДЕСЬ", которые можно обрабатывать более согласованно, но, очевидно, намного дороже.

Ответ 2

Принятый ответ хорош, но (в качестве альтернативы) я поместил некоторую работу в небольшую библиотеку 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.

Ответ 3

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

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

Ответ 4

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

Ответ 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);

Ответ 6

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

Точная обработка события разгрузки варьировалась от версии до версии браузеров. Например, некоторые версии 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>

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

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

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

Ответ 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>

Ответ 8

Я написал эту библиотеку для измерения активного времени на странице и выполнения определенных действий, когда активное время достигает порога. Проверьте это, и обратная связь очень приветствуется.

https://github.com/atlassian/browser-interaction-time. https://atlassian.github.io/browser-interaction-time/

Ответ 9

𝗨𝘀𝗲 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲.𝗻𝗼𝘄()

Запуск встроенного кода, чтобы получить время, которое пользователь получил на страницу, блокирует загрузку страницы. Вместо этого используйте 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="" />