javascript - 导航到单页 Angular 应用程序中的其他页面 - timeonsite tracker JS 未正确捕获页面标题

Question

集成了timeonsite JS我的 Angular 应用程序中的 HTML 标记中的跟踪器如下所示，

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

            blacklistUrl: ['http://nature-home.local/#contact'],
            
            developerMode: true, //optional setting
            
            callback: function(data) {
                console.log(data);
                // give your endpoint URL/ server-side URL that is going to handle your TOS data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB
                var endPointUrl = 'http://nature-home.local/api/tos'; // replace with your endpoint URL
                if (data && data.trackingType) {
                    if (data.trackingType == 'tos') {
                        if (Tos.verifyData(data) != 'valid') {
                            console.log('Data abolished!');
                            return; 
                        }
                    }
                    
                    // makes use of sendBeacon API in your browser.
                    if (navigator && typeof navigator.sendBeacon === 'function') {
                        var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                        navigator.sendBeacon(endPointUrl, blob);
                    }
                }
            }
            
        };
        if(TimeOnSiteTracker) {
            Tos = new TimeOnSiteTracker(config);
        }
    };
    js.src = file;fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'TimeOnSiteTracker', 'js/timeonsitetracker.js'));

在页面重新加载和刷新时，我能够正确地看到跟踪表中捕获的数据。我正在使用 sendBeacon() API 以实时且无损的方式捕获数据。

来自 http://nature-home.local/#home 页面，我看到捕获的记录为:

{
    "TOSId": 10271953114371370,
    "TOSSessionKey": "6454165596535779179057",
    "TOSUserId": "anonymous",
    "URL": "http://nature-home.local/#home",
    "title": "Nature Posts - Home",
    "entryTime": "2022-06-23 06:22:37.787",
    "currentTime": "2022-06-23 06:22:49.489",
    "timeOnPage": 12,
    "timeOnPageTrackedBy": "second",
    "timeOnSite": 12,
    "timeOnPageByDuration": "0d 00h 00m 12s",
    "timeOnSiteByDuration": "0d 00h 00m 12s",
    "trackingType": "tos"
}

来自 http://nature-home.local/#product 页面，我看到捕获的记录为:

{
    "TOSId": 15426974499706884,
    "TOSSessionKey": "6454165596535779179057",
    "TOSUserId": "anonymous",
    "URL": "http://nature-home.local/#home",
    "title": "Nature Posts - Home",
    "entryTime": "2022-06-23 06:24:49.449",
    "currentTime": "2022-06-23 06:24:52.497",
    "timeOnPage": 3,
    "timeOnPageTrackedBy": "second",
    "timeOnSite": 15,
    "timeOnPageByDuration": "0d 00h 00m 03s",
    "timeOnSiteByDuration": "0d 00h 00m 15s",
    "trackingType": "tos"
}

来自 http://nature-home.local/#photos 页面，我看到捕获的记录为:

  {
    "TOSId": 4699630142561574,
    "TOSSessionKey": "6454165596535779179057",
    "TOSUserId": "anonymous",
    "URL": "http://nature-home.local/#home",
    "title": "Nature Posts - Home",
    "entryTime": "2022-06-23 06:25:18.873",
    "currentTime": "2022-06-23 06:25:29.624",
    "timeOnPage": 11,
    "timeOnPageTrackedBy": "second",
    "timeOnSite": 26,
    "timeOnPageByDuration": "0d 00h 00m 11s",
    "timeOnSiteByDuration": "0d 00h 00m 26s",
    "trackingType": "tos"
  }

如您所见，URL 字段指向 http://nature-home.local/#home - 仅在所有三个页面导航中显示主页，而不分别是 /products 和 /photos 页面。

这是timeonsitetracker.js库中的错误还是我在这里遗漏了任何内容？供您引用，我还没有在网络应用程序(非单页应用程序)中看到这个问题。提前致谢。

Answer 1

Is it a bug in timeonsitetracker.js library or am I missing anything here? For your information, I haven't seen this issue in web application (non single-page app). Thanks in advance.

这既不是 timeonsite.js 的错误，也不是 Angular 应用程序路由模块中的不当行为，而是在初始化单页应用程序时缺少一个非常重要的设置。 Timeonsite.js 是在 Web 和移动浏览器中实时捕获连续计时数据流的工具；这意味着没有任何东西可以停止或重新开始跟踪用户的停留时间。它只是根据页面刷新、重新加载或浏览器退出来减少实时 session 的页面浏览量和页面停留时间。但对于单页/Angular 应用程序，有一种称为“基于哈希”路由的策略导航。在这种情况下，由于没有发生刷新或重新加载，timeonsite.js 认为用户按原样停留在第 1 页。因此，此自定义设置 trackHistoryChange: true, 适用于任何基于哈希的路由应用程序。

因此，您可能缺少 trackHistoryChange: true,，这是单页/Angular 应用程序的强制设置。任何基于哈希路由工作的应用程序都应该包含此内容。

var config = {
    trackBy: 'seconds',

    ....
    ....
    ....

    trackHistoryChange: true, //mandatory setting for single-page app

    ....
    ....
    ....
}

添加此缺失的设置并重试。它应该按预期工作，即页面标题和 URL 将在导航中正确捕获。

Documentation, TOS-configuration-option (寻找跟踪单页应用)