Angular 2 Track 用户在页面上花费的时间

我有一个角度为 2 的网站。如何跟踪用户在页面上花费的时间。

您可以使用对象日期。日期是处理日期和时间的对象。

momentJs 也是与时间一起工作的库。我喜欢一个时刻Js，因为它与日期一起工作 - 简单。

在 Angular2 中是接口 OnInit 和 OnDestroy。您可以添加到方法ngOnInitdateStart和计算 eriod 以ngOnDestroy。

import { Component, OnInit, OnDestroy} from '@angular/core';
import * as moment from "moment";
...
export class ConverterComponent implements OnInit, OnDestroy {
....
ngOnInit() {
this.dateStart = moment(); //or New Date()
}
ngOnDestroy() { 
let period = moment.utc(moment(this.dateStart).diff(moment())).format("HH:mm:ss");
}
....
}

我有一个角度为 2 的网站。如何跟踪时间用户在页面上花费了

使用您的解决方案，ngOnDestroy 事件不会触发。我想在旁边您的解决方案我们必须使用卸载处理程序或onbeforeunload
。

是的，您需要能够有效利用onBeforeUnload和页面可见性API的现代跟踪器。

对于Web 2.0应用程序和现代Angular应用程序，这是一个非常重要的功能请求。因此，我在这里就该主题编写了一个详细，有效且简单的解决方案。

您正在请求已为此工作流创建的功能。这是一个插件，您可以包含在任何网站中。无非是现场时间跟踪.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",
}

如您所见，操作

捕获"进入时间">
"退出时间"以秒/毫秒为单位捕获，具体取决于配置
捕获"类型：time_on_site">
捕获"时间在页面上"//单个页面时间
捕获"时间现场"//会话总页面时间

你还需要什么？由于它存储在 SQL 数据库表中，因此您可以自己执行分析/报告查询。NoSQL也是如此。Timeonsite.js同时支持RDBMS和NoSql DB类型。

最重要的是，1.最小化选项卡，2.非活动选项卡和3.切换选项卡的空闲时间都由跟踪器本身自动计算和忽略。

配置部分唯一需要注意的是，

trackHistoryChange: true

如果页面路由依赖于位置哈希或也称为单页应用，请包含此设置。另一方面，如果您的 Web 应用程序是像维基百科这样的普通页面，请避免设置此行。大功告成。要在屏幕上显示实时停留时间，请查看此SO帖子。它使用 Jquery 来显示结果。您可以为您的 Angular/React 应用程序自定义它。

这个跟踪器不仅可以插入任何库中，不仅可以在Angular/React应用程序中，还可以在VueJs，Jquery，MooTools等中插入，因为它是普通的JS库。

如果您需要有关该主题的更多意见，请告诉我。我可以在这方面为您提供帮助。

相关内容

最新更新

热门标签：