如何在网页中集成timeonsitetracker.js API时获取实时"timeonsite"参数？

Question

我在网页中集成了 JS timeonsite library 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”参数，而无需像演示页面中那样刷新整个页面？

Answer 1

在演示页面中，他们所做的基本上是：

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

}

他们在 document.ready 中设置了 1 秒的间隔，以使用站点计算时间更新具有 id='timeOnSiteDuration' 的 'div'。

我认为你可以做的解决方案是这样的：使用 setInterval 并计算现场时间：

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

您可以将此计算设置为变量或像演示页面一样，直接在html中显示。

Answer 2

除了 Luis 的回答之外，我还可以通过键入以下内容从浏览器控制台获取 real-time 网站停留时间参数：

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

61 (seconds)

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

0d 00h 01m 01s (1 minutes, 1 seconds)

然而，它应该被包装在 setInterval() 中 1 秒以获得网站数据的好时间 real-time.

浏览演示代码后，我了解到这仅适用于 non-IOS 浏览器，因为 IOS 似乎不支持 window.unload 个事件。

对于 IOS 设备，以下代码块非常适合获取 real-time time-on-site 数据。

$(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);
    }
    var timeOnSiteIOS;
    /*for IOS demo only */

    
    if (isIOSDeviceInst && IOSPeriodicData) {
        // >= v1.2.0
        var timeOnSiteInitIOSDynamic = (Tos.getTimeOnPage()).timeOnSite;
        timeOnSiteIOS = (timeOnSiteInitIOSDynamic < Tos.getTimeOnPage().timeOnPage) ? Tos.getTimeOnPage().timeOnPage : timeOnSiteInitIOSDynamic;
        $('#timeOnSiteRaw').html(timeOnSiteIOS);

        // v1.1.0
        // $('#timeOnSiteRaw').html(IOSPeriodicData[0].timeOnSite);
    } else {
        $('#timeOnSiteRaw').html((Tos.getTimeOnPage()).timeOnSite + (Tos.getTimeOnPage()).timeOnPage);
    }

    if (isIOSDeviceInst && IOSPeriodicData) {
        // >= v1.2.0
        $('#timeOnSiteDuration').html(Tos.secondToDuration(timeOnSiteIOS));

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

});

如何在网页中集成timeonsitetracker.js API时获取实时"timeonsite"参数？

How do I get real-time "timeonsite" parameter when integrating with timeonsitetracker.js API in web pages?

javascript

analytics

web-analytics