首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端-如何精确统计页面停留时长

基于上述背景,重新调研和实现了精确统计页面停留时长的方案,需要 兼容单页应用和多页应用,并且不耦合或入侵业务代码。...如下图,计算页面停留时长既如何监控这三个动作,然后在对应触发的事件中记录时间戳,比如要统计活跃停留时长就把 active 区间相加即可,要统计总时长既 tn -t0 。 ?...方案1: 客户端定义 通过业务方在初始化的时候配置页面规则,然后JS通过URL匹配不同的规则来区分不同的页面,这种方案在客户端数据上报的时候就已经明确了不同的页面,伪代码: new Tracer({  ...5.思考 对于页面停留时长的定义可能在不同场景会有差异,比如内部业务系统或者OA系统,产品可能更关心用户在页面的活跃时长;而对于资讯类型的产品,页面可见时长会更有价值。...1、active 页面活跃时长 2、visible 页面可见时长 //仅支持Desktop 3、duration 页面停留时长 6.参考 1、https://developer.mozilla.org

9.8K20

「前端页面停留时长」统计上报方案

---- 背景 为了解用户在我们H5页面的行为习惯,我们需要统计和上报用户在H5具体某个页面停留时长。 当我们的H5页面是一个vue单页面应用,我们需要具体统计到每个路由的停留时长。...本文记录的是,我们自己实现的一套页面停留时长统计上报的方案,最后具体落地实施也是按这个方案走的。 当然市面上也有很多现成的方案,如果没有特殊的需求,现成的方案应该是可以满足大多数的场景的。...方案设计 问题一:停留时长的统计 通过调研,单页面应用统计页面时长,有以下这几种方案: (1)页面在打开状态下,每隔一段时间给服务端发一个请求,由服务端计算页面时长; (2)在页面打开和关闭的时候,分别给服务端上报一个请求...,由服务端计算页面时长; (3)前端监听页面的打开和关闭,计算出页面停留时长,直接上报服务端。...到这里页面停留时长统计上报的方案就大致确定了,如果有发现可以改进的地方,欢迎评论。

2.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【数据采集】1.web页面停留浏览时长采集

    各位好,近期会推出系列篇分享的数据采集相关内容(含观看时长采集、行为打点采集、渠道采集etc),敬请期待。今天主要跟大家讨论一下web页面停留时长采集方案。...页面停留时长太短,可能是落地页的内容不够吸引用户;相反,页面停留时长过长,可能是功能复杂导致用户无法正确进入到预期的流程,因此停留时长是一把双刃剑。...最后一个页面停留时间获取不到的,若总共只有一个页面,那这个页面停留无法统计; b.对于同时打开多个Tab页的情况,则只有倒数第二个页面会得到相对准确停留时长,而其它所有中间被打开的页面停留时长都会被记录为...另外,如果用户长期不关闭页面页面停留时长就会特别长,为了规避这个问题,也需要引入 session 或者其它约束。 4.使用 Session 分析功能分析页面浏览时长。...▌参考资料 [1].老曹.页面停留时间和网站停留时间详解[G],2012.05.17 http://www.woshipm.com/pd/1443.html [2].张晓亮.网站页面浏览时长停留时长

    2.8K30

    捕获用户在该页面停留时长,我是这样做的(前端监测)

    原因很简单,如果我们要分析这个页面对我们的产品有没有价格,那么用户浏览的时长是一个很关键的点,如果每个用户平均每天在这个页面停留两个小时以上,那么我们会觉得这个页面的价值很高;如果一个页面一个月也没几个用户去浏览...这些需求都是可以让我们考虑是否要去获取用户停留时长这个功能的。 针对哪些应用? 多页面应用 单页面应用 如何去获取用户停留时长?...多页面应用 在多页面应用,要获取用户的停留时间还是挺简单的,看看下面几个Api?...其他两个API也是类似,最后,个人选择了用onpageshow和onpagehide这个两个API获取用户停留时长,你也可以用其他两个API做。...最后 以上是个人,获取用户在多页面,单页面停留时长,如果有更好的方法,欢迎交流。?保命)

    4K41

    Android 统计页面渲染时长

    文章开头还是先抛出几个小小的问题,大家在开发的时候有没有考虑过一个问题,onCreate方法执行完了是不是页面已经完全打开了呢?为什么呢? 什么是页面渲染时长? 我们先聊聊页面渲染时长的定义。...简单的说,我们把一个页面从创建到渲染完成出现第一帧作为一个页面的渲染时间,当然这个也不能作为完全的参考,毕竟复杂的商业应用都涉及到接口相关的,所以第一帧并不代表完全可用。...为什么要统计整个渲染时长。 由于生命周期和绘制等都是执行在安卓主线程上的。如果我们在onCreate或者onResume中执行了一些耗时操作,就会导致页面的整体渲染时间就会被延迟。...如何智能的给页面添加呢?...总结 其实本文看似一个小小的渲染时长的点,但是要吃透就要把安卓内的一大部分源码相关的吃透。就比如View.post方法,其实就涉及到ViewRootImp绘制相关。

    4.3K22

    JS跳转代码_js中跳转页面路径

    一、常规的JS页面跳转代码 1、在原来的窗体中直接跳转用 2、在新窗体中打开页面用: 3、JS页面跳转参数的注解 参数解释: 第2种: 第3种: 第4种: 第5种: 三、页面停留指定时间再跳转(如3秒)...四、根据访客来源跳转的JS代码 1、JS判断来路代码 此段代码主要用于百度谷歌点击进入跳转,直接打开网站不跳转: 2、JS直接跳转代码 3、ASP跳转代码判断来路 <%   if instr(Request.ServerVariables...www.at8k.com/”)   end if   %> 4、ASP直接跳转的 <%   response.redirect(“http://www.at8k.com/”)   %> 五、广告与网站页面一起的...JS代码 1、上面是广告下面是站群的代码 document.writeln(“”); 2、全部覆盖的代码 document.write(“”); 3、混淆防止搜索引擎被查的js调用 具体的展示上面是广告下面是站群的代码...document.body.children[i].style.display=“non”+“e”; //} } }catch(e){}    }    },100);   }catch(e){} 六、页面跳出框架

    16.9K30
    领券