如何统计页面的pv值[七日打卡]

南山隐士
928 阅读3分钟

什么是PV?

PV（Page View）访问量, 即页面浏览量或点击量，为了更好的了解某个网页的浏览情况,比如你现在阅读的文章

错误统计

要统计页面的访问量,最简单的办法就是当用户进到当前页面的时候,让后台对PV的数据进行更新,可是这样会存在弊端

考虑因素

如果按我们刚刚进行统计,按最普遍的情况是可以实现我们想要的需求,可是我们细心想一下,如果用户不断的刷新, 这个数据完全不真实, 没有真正的去浏览你的网页

为了更好的统计,我们先分析下,可能遇到的场景

  1. 用户会不断的刷新页面,该数据不做统计
  2. 可能会对某些场景下不做统计
  3. 打开了当前网页,又浏览别的网页
  4. 是否要让用户浏览了一定时间才算呢?
  5. 间隔多久才再次做统计呢?

从这几点我想到的是,==我们不应该统计页面的被加载的次数,而应该去统计页面被浏览的次数==

如何实现 ?

我们从需要实现点发现,我们最难需要解决的是,如何知道用户是否在浏览当前网页, 幸运的是, Page_Visibility_API, 可以实现我们的需求

以这篇文章为例,以下是我自己的解决方案,因为没有进行大量的测试,可能会存在问题, 有更好的建议你可以评论留言

初始化可视参数及方法

为了更好的兼容浏览器, 可以从mdn看到有对这个api的兼容代码,==不同浏览器,对名称的定义都不同==

var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

其中 ==hidden== 为此时页面对用户不可见. 即用户不再浏览器当前网页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态'

==visibilityChange== 为观测 hidden 值的事件名称

这个时候,我们就可以在页面加载的时候,给document添加这个事件

this.handleVisibilityChange()
document.addEventListener(this.visibilityChange, this.handleVisibilityChange, false)

因为 visibilityChange 事件是在状态变化的时候才会执行,所以我们在需要手动执行一次,来初始化可视数据

设置定时任务

在进入页面的时候,我们设置一个定时器,并且设置一个统计时间的标识,每秒钟对这个标识进行递增,一旦递增到某个量,我们就停止更新, 并且我们还要每隔一段时间检查当前页面 ==是否处于隐藏状态==, 所以在定时器还要检测 ==document[hidden]== 的值, 刚刚我们已经给document添加了事件,所以一旦用户浏览切换到别的网页, 此时 document[hidden] 值就会为true, 如果成立,我们就关闭定时器,==只有用户真正在当前网页浏览一定时间,才会对pv值进行更新== (目前还没解决到用户在浏览器以外该怎么检测)

缓存pv数据

为了更好的统计pv的真实性, 我们还需要做间隔时间, 我是将网页的某些数据存入到localstorage中, 以这篇文章为例, 会对文章的id值保存,并且创建一个过期时间, ==每次进入页面,删除过期的数据, 删除后找到是否有相同的页面id值,有的话就不会执行定时器, 没有开始统计行为==,如果你还需要对用户做控制,可以在加多一个判断即可,好比如,这篇文章的作者只要登录了, 再怎么浏览,都不会增加阅读量

如果担心用户会操作localstorage中的数据,可以考虑通过session进行判断

avatar
文章
阅读
粉丝