跟踪用户查看在线图像幻灯片的时长答案

【问题标题】：Track how long user views a slide of a online image slideshow跟踪用户查看在线图像幻灯片的时长
【发布时间】：2015-09-24 08:08:00
【问题描述】：

我目前正在开展一个项目，该项目需要 Web 应用程序来跟踪用户在幻灯片放映的一张幻灯片上停留的时间。假设在线幻灯片有 5 张（slide-1.png 到 slide-5.png）幻灯片，用户可以使用“下一个”和“上一个”按钮浏览幻灯片。

用户将始终从 slide-1.png 开始，5 秒后用户单击“下一步”按钮并转到 slide-2.png。 10 秒后，用户点击“Previous”返回 slide-1.png 并在那里停留 5 秒。

这基本上是基于事件的应用程序。当用户点击“Next”或“Previous”时开始记录时间，当用户再次点击“Next”或“Previous”时停止记录旧会话并开始记录新会话。

点击“下一个”/“上一个”后，用户没有转到新的 html 页面。只是图片改变了src信息。

关于我应该如何处理这个问题有什么想法吗？我目前在我的 Web 应用程序中使用 PHP、Javascript 和 Java。

【问题讨论】：

您是否需要考虑他们查看幻灯片然后离开计算机一天的情况？或者是否存在您认为它们“空闲”的最大值？

标签： javascript php jquery event-tracking time-tracking

【解决方案1】：

您需要记录他们开始查看幻灯片的时间：

var startTime = new Date();

然后捕捉幻灯片消失的时间：

var endTime = new Date();

然后你可以计算经过的时间。

var elapsed = endTime - startTime; // elapsed time in milliseconds

如果您需要考虑用户打开幻灯片然后离开计算机的情况，您还可以启动一个超时计时器，将用户记录为该幻灯片已超时。

setTimeout(function () {
  endTime = 'Timed out.';
}, ((3 * 60) * 60) * 1000); // ((3hrs * 60mins) * 60secs) * 1000ms

3 小时后，它将 endTime 设置为 'Timed out.'，您可以使用它来知道用户离开了该特定幻灯片并且没有完成查看其余部分。

【讨论】：

【解决方案2】：

循环并“嗅探”您定义的设置条件的 JavaScript 函数最适合这种情况。您应该采取的方法是为每个 .png 分配它自己的 ID 属性。通过 JavaScript 和 jQuery 创建专门针对每个图像的变量。然后将 mousedown 或 click 事件附加到幻灯片上，该事件将检测哪个图像可见并触发该特定图像的计时器。当然，您需要在页面上隐藏每个图像的输入字段，以便计数器递增。

在链接中，您将看到类似的功能，当用户单击“放大”组件时，计时器将启动。它只会在用户点击图片时停止。

JavaScript 函数调用 setInterval()，可以使用 clearInterval() 停止。为获得最佳结果，请将 setInterval() 函数创建为变量。

示例变量：

var firstSlide = jQuery('img#slide1');

样本条件 01：

if (firstSlide.length > 0)
{
    //start counter with setInterval();
}

样本条件 02：

if (firstSlide.is(':visible'))
{
    //start counter with setInterval();
}

为确保计时器中的重叠最少并确保更严格的行为，我建议在幻灯片容器在单击时可见时应用唯一的 CSS 类，并在不可见时将其移除。

样本条件 03：

slideShow.click( function() {
slideShow.addClass('isClicked');
});
if (firstSlide.is(':visible') && jQuery('slideShow.isClicked').length > 0)
{
    //start counter with setInterval();
}

http://www.alexldixon.com/clicktimerhelp.htm

setInvertval 可以“嗅探”动态条件的另一个示例是即使在窗口调整大小和文本换行时也使元素高度相等。

https://jsfiddle.net/dixalex/ojoevj1k/

var makeSameHeight = setInterval( function() {
    var currentTextHeight = $('div.myClass-content').height() + "px";
    var imgDivHeight = $('div.imgUrl').height() + "px";
    if (currentTextHeight === imgDivHeight)
    {
        var doNothing = "";
    } else {
        $('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
    }
}, 50);

最后，您还可以使用新的 Date() 函数。

我希望这会有所帮助。

【讨论】：