Как получить параметр timeonsite в реальном времени при интеграции с timeonsitetracker. js API на веб-страницах? - PullRequest
Новая
       80

Как получить параметр timeonsite в реальном времени при интеграции с timeonsitetracker. js API на веб-страницах?

3 голосов
/ 11 июля 2020

Я интегрировал JS библиотеку timeonsite timeonsitetracker. js на веб-страницу, как указано в документе, 

<script type="text/javascript">
var Tos;
(function(d, s, id, file) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.onload = function() {
        var config = {
            trackBy: 'seconds',
            developerMode: true
        };
        if(TimeOnSiteTracker) {
            Tos = new TimeOnSiteTracker(config);
        }
    };
    js.src = file;fjs.parentNode.insertBefore(js, fjs);
 } (document, 'script', 'TimeOnSiteTracker', '//cdn.jsdelivr.net/gh/saleemkce/timeonsite@1.1.0/timeonsitetracker.min.js'));
</script>

После вызова объекта Tos, 

Tos.getTimeOnPage();

{
    TOSId: 13650383319214852
    TOSSessionKey: "6606159448467693493359"
    TOSUserId: "anonymous"
    URL: "https://localhost/index.html"
    currentTime: "2020-07-11 16:25:17.908"
    entryTime: "2020-07-11 16:24:36.911"
    timeOnPage: 41
    timeOnPageByDuration: "0d 00h 00m 41s"
    timeOnPageTrackedBy: "second"
    timeOnSite: 0
    timeOnSiteByDuration: "0d 00h 00m 00s"
    title: "real-time demo"
    trackingType: "tos"
}

При вызове Tos.getTimeOnPage () API, я вижу « timeOnSite » всегда «0», но timeOnPage периодически обновляется. Но при обновлении страницы я получаю обновленные timeOnPage, timeOnSite в БД, автоматически сохраненные трекером. Есть ли способ получить в реальном времени параметр « timeonsite » на странице без обновления всей страницы, как указано на демонстрационной странице?

Ответы [ 2 ]

4 голосов
/ 10 августа 2020

На демонстрационной странице они в основном делают: 

$(document).ready(function() {
   
    setInterval(function() {
    
    $('#timeOnSiteDuration').html(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));
                    
   }, 1000);

}

Они устанавливают интервал 1se c в document.ready для обновления 'div' с id = 'timeOnSiteDuration' с расчетом времени на сайте.

Я думаю, что вы можете сделать что-то вроде этого: использовать setInterval и вычислить время на сайте с помощью: 

Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage)

Вы можете установить этот cal c в переменную или как на демонстрационной странице, покажите это прямо в html.

0 голосов
/ 12 августа 2020

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

console.log((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage);

61 (секунды) 

console.log(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));

0д 00ч 01м 01с (1 минута, 1 секунда)

однако, он должен быть заключен в setInterval () из 1 секунды, чтобы получать данные сайта в режиме реального времени.

После изучения демонстрации code, я узнал, что это применимо только для браузеров, отличных от IOS, поскольку IOS, похоже, не поддерживает события window.unload .

Для устройств IOS следующий блок кода отлично подходит для получения данных на месте в реальном времени. 

$(document).ready(function() {

    //Timer module data binding
    setInterval(function() {
        /*for IOS demo only */

        var isIOSDeviceInst = true;  // In case it's an IOS browser; set this value dynamically

        var IOSPeriodicData;
        var dateObj = (new Date());
        var currentDayKey = 'TOS_' + (dateObj.getMonth() + 1) + '_' + dateObj.getDate() + '_' + dateObj.getFullYear();
        var dataItem = localStorage.getItem(currentDayKey);
        if (dataItem) {
            IOSPeriodicData = JSON.parse(dataItem);
        }
        /*for IOS demo only */

        
        if (isIOSDeviceInst && IOSPeriodicData) {
            $('#timeOnSiteRaw').html(IOSPeriodicData[0].timeOnSite);
        } else {
            $('#timeOnSiteRaw').html((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage);
        }

        if (isIOSDeviceInst && IOSPeriodicData) {
            $('#timeOnSiteDuration').html(Tos.secondToDuration(IOSPeriodicData[0].timeOnSite));
        } else {
            $('#timeOnSiteDuration').html(Tos.secondToDuration((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage));
        }
    }, 1000);
});
...