Отслеживание времени пользователей на сайтах / веб-приложениях

У меня есть требование отслеживать, сколько времени пользователь тратит на веб-сайты / веб-приложения. Это как инструмент отслеживания времени для веб-сайтов, у меня есть приложение wpf, которое открывает веб-сайты в IE/Chrome/Firefox. Мне нужно отследить, сколько времени пользователь работает на сайте.

Chrome и Firefox предоставляют историю, которую я могу получить из базы данных sqlite, которая хранится в пользовательской системе, но IE не предоставляет никакой информации об истории.

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

Источник

1 ответ

У меня есть приложение wpf, которое будет открывать сайты в IE/Chrome/Firefox. Мне нужно отслеживать, сколько времени пользователь работает на сайте

Это очень важный запрос функции для многих приложений Web 2.0. Итак, я пишу подробное, рабочее и простое решение на эту тему здесь.

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

Посмотрите на следующий код (используйте последнюю версию, а не просто копируйте/вставляйте),

      <head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.2.0/timeonsitetracker.js"></script>

<script>
var config = {
    // track page by seconds. Default tracking is by milliseconds
    trackBy: 'seconds',

    trackHistoryChange: true, //Single-page React/Angular app

    callback: function(data) { /* callback denotes your data tracking is real-time */
        console.log(data);
        var endPointUrl = 'http://example.com' //Replace with your actual backend API URL http://localhost/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.
            if (navigator && typeof navigator.sendBeacon === 'function') {
                data.trasferredWith = 'sendBeacon';
                var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                navigator.sendBeacon(endPointUrl, blob);
            }
        }
    }
};
var Tos;
if (TimeOnSiteTracker) {
    Tos = new TimeOnSiteTracker(config);
}
</script>

</head>

Затем, когда вы обновляете, перезагружаете или перемещаетесь по странице приложения React,

Вы увидите следующий объект, сохраненный непосредственно в вашей таблице/распечатанный в консоли браузера. Выберите «сохранить» в журналах,

      {
    TOSId: 1129620185532,
    TOSSessionKey: "14802525481391382263",
    TOSUserId: "anonymous",
    title: "Test application - Home page",
    URL: "http://nature-blogs/pages/home.php"
    entryTime: "2021-11-27 13:15:48.663",
    currentTime: "2021-11-27 13:17:31.663",
    timeOnPage: 103,
    timeOnSite: 103,
    timeOnPageTrackedBy: "second",
    timeOnPageByDuration: "0d 00h 01m 43s",
    timeOnSiteByDuration: "0d 00h 01m 43s",
    trackingType: "tos",
}

Как видите, действия

  • "entryTime" фиксируется
  • «exitTime» фиксируется в секундах/миллисекундах в зависимости от конфигурации
  • «тип: time_on_site» захвачен
  • «timeOnPage» фиксируется // время отдельной страницы
  • «timeOnSite» фиксируется // общее время страницы сеанса

Что еще вам нужно? Поскольку он хранится в таблице базы данных SQL, вы можете самостоятельно выполнять запросы анализа/отчетности. Это работает в любой СУБД без проблем.

Кроме того, 1.Вкладка «Свернуть», 2.Неактивная вкладка и 3.Вкладка «Переключение» автоматически вычисляются и игнорируются самим трекером.

Единственное, что следует отметить в части конфигурации,

      trackHistoryChange: true

Если маршрутизация страницы зависит от хэша местоположения или также известна как одностраничное приложение, включите этот параметр. С другой стороны, если ваше веб-приложение представляет собой обычную страницу, такую ​​как Википедия, избегайте установки этой строки. Вы сделали. Чтобы показать время пребывания в режиме реального времени на экране, проверьте этот пост SO . Он использует Jquery для отображения результатов. Вы можете настроить его для своего приложения React.

Этот трекер можно подключить к любой библиотеке VueJs, React, Angular, Jquery, MooTools и т. д., поскольку это обычная JS-библиотека.

Дайте мне знать, если вам нужна дополнительная информация по этому вопросу. Я могу помочь вам в этом.

Источник
Другие вопросы по тегам