尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

TimeMe.js快速上手:5分钟接入精确计时,告别虚高的页面停留数据

TimeMe.js快速上手:5分钟接入精确计时,告别虚高的页面停留数据 TimeMe.js快速上手5分钟接入精确计时告别虚高的页面停留数据【免费下载链接】TimeMe.jsA JavaScript library to accurately time how long a user views a web page, disregarding idle time and time when the tab or window is minimized.项目地址: https://gitcode.com/gh_mirrors/ti/TimeMe.jsTimeMe.js 是一款轻量的JavaScript 页面停留时间统计库它能精确记录用户在网页上的真实交互时长——自动忽略最小化窗口、切换标签页和无操作idle的时间。接入只需几行代码5 分钟即可让你告别虚高的停留时长数据获得更可信的统计口径 。为什么传统停留时长会虚高传统做法通常是打开页面时记一个时间戳关闭时再记一个中间差值就是停留时长。但现实中用户经常开着页面去干别的切走标签页、最小化窗口把页面留在后台人已经离开电脑。这些时间全被算进去了停留时长自然水涨船高。TimeMe.js 的解决思路是只统计用户真正在看、在操作的秒数。三步安装npm 一键获取 TimeMe.js方式一npm 安装推荐npm install timeme.js --save方式二直接下载源码文件克隆仓库后直接使用项目里打包好的压缩版 timeme.min.jsgit clone https://gitcode.com/gh_mirrors/ti/TimeMe.js方式三引入script标签把timeme.min.js放到你的站点里然后在页面中引入script srctimeme.min.js/script最快配置方法3 行代码开启精确计时安装完成后核心只有两步初始化读取时长。// 1. 初始化并开始计时 TimeMe.initialize({ currentPageName: my-home-page, // 当前页面名称 idleTimeoutInSeconds: 30 // 30秒无操作即视为离开 }); // 2. 随时读取当前页面的真实停留时长单位秒 let timeSpentOnPage TimeMe.getTimeOnCurrentPageInSeconds();就这么简单。idleTimeoutInSeconds表示用户超过多少秒没有鼠标/键盘操作后计时自动暂停用户回来继续操作时计时随之恢复。 想亲眼看看效果项目内置了演示页面 demo/index.html直接用浏览器打开即可体验切走标签页时计时停止的效果。核心功能一览TimeMe.js 能帮你统计什么能力说明适合场景页面级停留时长忽略切标签、最小化、空闲时间全站数据看板、广告计费元素级交互时长单独统计某个区块被点击/悬停的时间对比不同模块的吸引力时长到点回调用户活跃满 N 秒后触发代码适时弹出引导、问卷离开/返回事件用户切走和回到页面时执行代码暂停播放、恢复动画WebSocket 上报用户离开时自动把时长推给服务器后端实时统计元素级跟踪哪个模块最吸引人只要给目标元素一个id一行代码开启独立计时多个计时器可并行运行TimeMe.trackTimeOnElement(area-of-interest-1); let time TimeMe.getTimeOnElementInSeconds(area-of-interest-1);这样你就不必猜用户到底在看首页的哪个区块直接用数据说话。定时回调用户活跃满 15 秒后做点什么TimeMe.callAfterTimeElapsedInSeconds(15, function(){ console.log(用户已活跃 15 秒可以弹出一个引导了); });配合离开/返回事件还能实现用户切走时暂停视频、回来后自动续播这类体验优化TimeMe.callWhenUserLeaves(function(){ /* 用户离开页面 */ }); TimeMe.callWhenUserReturns(function(){ /* 用户回到页面 */ });数据怎么存两种上报方案统计出的时长最终要送到后端TimeMe.js 支持两种方式WebSocket 上报内置推荐在initialize时传入websocketOptions含websocketHost与appId用户离开页面时 TimeMe 会自动断开连接并上报时长无需额外编码。普通 HTTP 请求在window.onbeforeunload等事件里调用getTimeOnCurrentPageInSeconds()取到时长后自行 POST 到服务器即可注意该事件下请求不保证一定完成重要数据建议用 WebSocket 方案。单页应用SPA专属技巧SPA 里路由切换不会刷新页面需要手动停表 → 换页面名 → 重新开表TimeMe.stopTimer(); TimeMe.setCurrentPageName(new-page-name); TimeMe.startTimer();之后用getTimeOnAllPagesInSeconds()可一次性拿到本会话内所有页面的聚合时长方便做会话级报表。常见问题 FAQQ1支持哪些浏览器所有主流桌面与移动端浏览器均可使用。Q2计时单位是什么API 返回的单位统一是秒可直接用于展示或上报。Q3能否计时非页面的活动可以。调用TimeMe.startTimer(my-activity)开始、TimeMe.stopTimer(my-activity)结束即可对任意活动计时空闲和切走的时间同样会被自动扣除。Q4想跑一下官方单元测试项目 tests/ 目录下有基于 QUnit 的测试页面在浏览器中打开tests/tests.js配套的 HTML 文件即可执行。写在最后TimeMe.js 体积极小、零依赖却把用户真实停留时长这件数据治理的脏活干得很漂亮。今天花 5 分钟接入明天你的数据看板就会干净很多。完整 API 细节可参考项目文档 README.md动手试试吧 【免费下载链接】TimeMe.jsA JavaScript library to accurately time how long a user views a web page, disregarding idle time and time when the tab or window is minimized.项目地址: https://gitcode.com/gh_mirrors/ti/TimeMe.js创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表