探索网页行为的新维度：Screentime

探索网页行为的新维度：Screentime

去发现同类优质开源项目:https://gitcode.com/

项目简介

走进Screentime的世界，这是一款小巧而强大的工具，它将你的网站流量统计从传统的“点击次数”转变为“用户停留时间”的概念。Screentime允许你在页面上定义不同区域（称为Fields），并追踪每个区域在屏幕上的显示时长，甚至可以细化到广告单元等小元素。

请注意，Screentime仅负责客户端的工作，你需要自己提供后端来接收并处理数据。项目中已经提供了使用Keen IO的示例，只需几行代码即可轻松集成。此外，还有一个内置选项可以将数据发送给Google Analytics，但可能有特定限制（见下文）。

访问项目主页

工作原理

Screentime让你指定一些想要追踪的DOM元素，然后每隔一秒钟检查视口以确定哪些元素处于可见状态。它记录每个元素/字段的可视秒数，并每10秒（可调整间隔）发送一次报告，该报告会传递给一个回调函数，你可以利用这个函数将数据发送到服务器。如果用户切换标签页，计时器会暂停（使用Addy Osmani的Page Visibility polyfill实现）。计时器只需要用户保持页面可见，不强制要求用户活跃。

使用方法

Screentime需要依赖jQuery。你需要传入一组要追踪的唯一元素选择器和它们的名称：

$.screentime({
  fields: [
    { selector: '#top',   name: 'Top'   },
    { selector: '#middle', name: 'Middle'},
    { selector: '#bottom', name: 'Bottom'}
  ],
  callback: function(data) {
    console.log(data);
    // 示例：{ Top: 5, Middle: 3 }
  }
});

配置选项

• fields 数组（必需） 一个对象数组，列出要追踪的DOM元素及其名称。

• reportInterval 整数 报告发送的时间间隔，默认为10秒。

• percentOnScreen 字符串 定义多少百分比的字段需在屏幕上才能视为可见，默认为50%。例外情况是，如果一个字段占据了大部分视区，则无论其可见度如何都会被视为可见。

• googleAnalytics 布尔值 设置为true（默认为false），将在报告发出时为每个字段发送一个Google Analytics事件。

• callback 函数 接收screentime数据的回调函数。

方法

• reset 调用$.screentime.reset()可重置计数器，这对于单页应用程序中重新加载页面上下文的情况非常有用。

数据上报

内置的Google Analytics选项提供了一种快速收集screentime数据的方法，但如果字段数量较多，可能会触及GA的收集限制。为了更高效的数据收集，推荐自建后端或使用如Keen IO这样的服务。示例文件夹中的例子展示了使用Keen IO的简便性，就像这样：

...
callback: function(data) {
  Keen.addEvent("screentime", data);        
}
...

应用场景与项目特点

1. 用户行为研究 - 了解用户在哪些页面部分花费更多时间，有助于优化用户体验和提高转化率。

2. 广告效果评估 - 跟踪广告展示时间，衡量用户对广告的关注程度。

3. 新闻阅读分析 - 监测用户在文章各段落的停留时间，以评估内容吸引力。

4. 简明易用 - API简洁，易于集成，即使是对JavaScript不熟悉的技术人员也能轻松上手。

5. 高度定制化 - 可配置报告间隔、可见度阈值等，满足不同需求。

6. 兼容性良好 - 利用Addy Osmani的polyfill，确保在多种浏览器环境下正常工作。

现在，是时候借助Screentime挖掘你的网站流量数据的深层价值了，让我们一起探索用户行为的未解之谜吧！

去发现同类优质开源项目:https://gitcode.com/