跟踪用户在网站中完成特定操作的时间

我想跟踪用户在网站中完成特定操作所花费的时间(包括服务器响应时间和渲染时间(DOM 相关更改))。

我已经在Angular框架中尝试过。为此，我正在考虑记录用户启动操作的时间，并且我想记下操作完成的时间。作为开发人员，我将知道用户何时开始活动以及用户何时完成搜索，过滤，编辑，添加，删除等操作。因此，我们可以对它们进行差异。但是要注意每个操作，我们必须在应用程序的每个部分编写代码。我们是否可以创建一个插件，以便我们可以在任何地方使用它，而不是在任何地方编写相同的代码来跟踪用户的时间。有什么方法可以创建它吗？或者是否有任何工具可以实现此功能？

这样的事情会有帮助吗？

@Injectable({provideIn: 'root'})
export class TrackingService {
private cache: {[id: number]: {description: string, time: number}} = {};
private id: number = 0;
public startTracking(actionDescription: string): number{
const id = ++this.id;
this.cache[id] = { description: actionDescription, time: new Date().getTime() };
return id;
}
public stopTracking(actionId: number){
const data = this.cache[actionId];
if(data){
const elapsed = new Date().getTime() - data.time;
// ...
// Do something with your 'elapsed' and 'data.description'
// ...
delete this.cache[id];
return {...data, elapsed: elapsed};
}
throw `No action with id [${actionId}] running! `;
}
}

然后在您需要跟踪操作的任何位置投放广告：

private actionId: number;
constructor(private trackingService: TrackingService){}
startAction(){
this.actionId = this.trackingService.startTracking('Description');
}
stopAction(){
const trackingResult = this.trackingService.stopTracking(this.actionId);
}

您可以在某些位置自动进行跟踪，例如用于路由：

// app.module.ts
private routeChangeSubscription: Subscription;
private configLoadActionId: number;
private navigationActionId: number;
constructor(private router: Router, private trackingService: TrackingService){
this.routeChangeSubscription = router.events.subscribe((event: Event) => {
if (event instanceof RouteConfigLoadStart) {
this.configLoadActionId = this.trackingService.startTracking('configLoad');
}
else if (event instanceof RouteConfigLoadEnd) {
const result = this.trackingService.stopTracking(this.configLoadActionId);
// ... process the result if you wish
}
else if (event instanceof NavigationStart) {
this.navigationActionId = this.trackingService.startTracking('navigation');
}
else if (event instanceof NavigationEnd) {
const result = this.trackingService.stopTracking(this.navigationActionId);
// ... process the result if you wish
}
});
}

或者对于 HTTP 请求：

// http-tracking.interceptor
export class HttpTrackingInterceptor implements HttpInterceptor {
constructor(private trackingService: TrackingService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const actionId = this.trackingService.startTracking('HTTP request');
return next.handle(req.clone()).pipe(
tap(r => this.trackingService.stopTracking(actionId))
);
}
}
// app.module.ts
@NgModule({
// ... other module stuff
providers: [
// ... other providers
{ 
provide: HTTP_INTERCEPTORS, 
useClass: HttpTrackingInterceptor, 
multi: true, 
deps: [TrackingService] 
}
]
})
export class AppModule { ... }

如果您愿意，您可以轻松扩展TrackingService以返回承诺或可观察量或其他任何内容......

希望这有所帮助：-)

我们可以创建一个插件，以便我们可以在任何地方使用它而不是到处编写相同的代码来跟踪用户的时间。任何方法创建它？或者是否有任何工具可以实现此功能？

这是许多人提出的非常重要的功能要求。因此，我在这里就该主题编写了一个详细，有效且简单的解决方案。

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

然后，当用户单击网站中的特定操作时，例如"编辑帖子"或"单击创建帖子"，

您只需启动Tos.startActivity()API，如下所示：

Tos.startActivity({actionPerfomed: 'Edit a post'});

然后，当用户完成编辑或创建帖子操作时，当他最终单击"保存/提交"按钮时，您将触发Tos.endActivity()API，例如，

Tos.endActivity({customData: 'custom data if any here...'});

您将看到以下对象直接保存到表中，

{
TOSId: 585872449448,
TOSSessionKey: "14802525481391382263",
TOSUserId: "anonymous",
title: "Test application - TimeOnSiteTracker",
URL: "http://example.com/post/nature-is-beautiful/edit.php",
activityStart: "2021-11-27 13:20:46.707",
activityEnd: "2021-11-27 13:20:50.213",
timeTaken:4,
timeTakenByDuration: "0d 00h 00m 04s"
timeTakenTrackedBy: "second",
trackingType: "activity",
actionPerfomed: "Edit a post", //optional fields
customData: "custom data if any here..." //optional fields
}

如您所见，操作

捕获"编辑/创建帖子">
"时间占用"以秒/毫秒为单位捕获，具体取决于配置
捕获"类型：活动">
捕获"活动开始">
捕获"活动结束">
"TOSUserId"//谁与 TOSSessionKey 一起执行操作以唯一标识会话。

你还需要什么？由于它存储在 SQL DB 表中，因此您可以自己执行分析/报告查询，并将其提交给顶层管理层进行决策。NoSQL也是如此。Timeonsite.js同时支持RDBMS和NoSql DB类型。

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

这个跟踪器可以插入任何库Angular，React，Jquery等，因为它是普通的香草JS库。

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

必须在客户端代码中编写一个简单的事件跟踪程序。由于我不知道您要跟踪哪些事件，因此我将为一般情况提供解决方案。

此外，您必须手动触发开始和停止跟踪。

EventTracker = {
trackedEvents: {},
start: function(key) {
var startTime = new Date();
this.trackedEvents[key] = {
start: startTime
}
},
stop: function(key) {
var endTime = new Date();
this.trackedEvents[key]['duration'] = (endTime - this.trackedEvents[key]['start']) / 1000 + 's';
this.trackedEvents[key]['end'] = endTime;
},
}
// Use EventTracker everywhere to track performance
// Example:
EventTracker.start('search_track'); // User searches, start tracking.
setTimeout(function() {
EventTracker.stop('search_track'); // Records fetched after 5 seconds. Stop tracking.
console.log(EventTracker.trackedEvents);
}, 5000);

您可以根据需要跟踪所有事件。对于服务器响应，请使用：发出请求时EventTracker.start('search_ajax_track')，并在收到响应时停止跟踪。您可以根据需要修改上面的代码来测量其他参数。

我建议您使用自定义Google Analytics事件。特别是用户计时。这允许您在网页上记录特定时间，您可以使用自己的标签和类别进行记录。

引用文档：

用户计时允许开发人员使用分析.js库。这对于开发人员特别有用测量发出 AJAX 请求和加载所花费的延迟或时间网络资源。

我在下面有一些示例代码，它只是挂钩到点击中，并将从属性data-name中获取描述符 - 如果不可用，将仅记录为"匿名点击" - 您可以自定义它以不跟踪未标记的项目。您还可以挂接到 ajax 调用和其他值得注意的事件，但不知道您的具体要求，很难给出进一步的例子。

用于锁定点击事件的标记帮助程序示例。

<button data-name="Foo"/>

下面的代码执行日志记录，请注意，它使用window.performance.now()进行日志记录 - 这将返回页面加载时间(以毫秒为单位)。这将允许您生成用户交互的时间线，而不是在单个任务上花费原始时间，顺便说一下，Google Analytics报告可以为您计算。

(function($, Analytics) {
init_hooks();

function init_hooks() {
$('body').on('click', track);
}
function track(e) {
// Get a name to record this against
var name = e.target.data(name) || "Anonymous Click";
// Time since page loaded
var time = window.performance.now()
Analytics('send', {
hitType: 'timing',
timingCategory: 'Front End Intereactions',
timingVar: name,
timingValue: time
});
}
})(jQuery, ga)

要了解更多信息，请查看文档。

你可以用 OpenTracing for Js 来检测你的代码。

您需要在事务开始和结束中添加请求。

也是一个OpenTracing服务器，用于接收来自浏览器的请求。

相关内容

最新更新

热门标签：