在单页角应用中导航到其他页面 - 页面标题未通过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实时捕获数据＆amp;无损失的时尚。

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

{
    "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：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：// hathaty-home 。

这是timeonSitetracker.js库中的错误，还是我在这里错过了任何东西？有关您的信息，我还没有在Web应用程序（非单页应用程序）中看到此问题。提前致谢。

Answer 1

是timeonsitetracker.js库中的错误还是我缺少任何东西
这里？对于您的信息，我在网络中没有看到这个问题
应用程序（非单页应用程序）。预先感谢。

它既不是Bug timeonsite.js ，也不是Angular应用程序路由模块中的不当行为，但是您在初始化单页应用程序的同时缺少非常重要的设置。 TimeonSite.js是对定时数据的连续流，在Web和移动浏览器中实时的捕获；这意味着没有什么可以停止或重新开始跟踪用户的住宿时间。它只是根据页面刷新，reaload或浏览器退出，将实时会话作为页面浏览量和页面上的页面。但是对于单页/角应用程序，有一个战略导航，称为“基于哈希” 路由。在这种情况下，由于不会进行刷新或重新加载，因此TimeOnsite.js认为用户一直在第1页上留在第1页上。因此，此自定义设置TrackhistoryChange：True，适用于任何基于哈希的路由应用程序。

因此，您可能缺少TrackhistoryChange：True，，是单页/角应用程序的强制性设置。任何基于哈希路由的应用程序都应包括此应用。

var config = {
    trackBy: 'seconds',

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

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

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

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

documenta 跟踪单页应用 ）

Answer 2

它的行为是因为您在Angular Change Route之前调用sendbeacon。

我建议您以这种方式实现：

app.component.ts：

this.router.events.subscribe((routerEvent) => {
  if (routerEvent instanceof NavigationEnd) {
    const url = routerEvent.url;
    // do the call here
  }
});

此url将是一个更新的。