前端数据收集(pv/uv)

evenboy

所谓web,即使你我素未谋面,便知志趣相投;足不出户,亦知世界大。

01 — 什么是PV/UV

网站流量分析,是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析,从中发现用户访问网站的规律,并将这些规律与网络营销策略等相结合,从而发现目前网络营销活动中可能存在的问题,并为进一步修正或重新制定网络营销策略提供依据。这是来自网络营销管理的角度来考虑的。

既然是流量分析,要分析就要有数据,这些数据来自哪里?这就涉及到常用的网站流量分析的指标:PV/UV。

  • 1.什么是pv?

    PV(page view),即页面浏览量,或点击量;通常是衡量一个网站的主要指标。

    高手对pv的解释是,一个访问者在24小时(0点到24点)内到底看了你网站几个页面。这里需要强调:同 一个人浏览你网站同一个页面,不重复计算pv量,点100次也算1次。说白了,pv就是一个访问者打开了你的几个页面。

    PV之于网站,就像收视率之于电视,从某种程度上已成为投资者衡量商业网站表现的最重要尺度。

  • 2.什么是uv?

    uv(unique visitor),指访问某个站点不同IP地址的数量。当然这是基于ip的统计解释。

    在同一天内,uv只记录第一次进入网站的具有独立IP的访问者,在同一天内再次访问该网站则不计数。独立IP访问者提供了一定时间内不同用户数量的统计指标,而没有反应出网站的全面活动。

02 — 如何统计PV/UV

对pv/uv有了字面上的认识,那就可是使用一定的策略来收集这些数据,先来说说pv,pv既然是基于页面的,对于大多数网页来说,每一个页面都会有一个对应的地址(url),我们需要做的便是去检测这个页面地址的变化,只有当页面地址变化了,这个时候我们认为用户离开了当前页面,跳转到其他页面了。我们放上代码看看:

//监听页面变化
(function (window) {
// 如果浏览器原生支持该事件,则退出  
  var location = window.location,
  oldURL = location.href,
  oldHash = location.hash;
  // 每隔100ms检测一下location.hash是否发生变化
  setInterval(function () {
    var newURL = location.href,
    newHash = location.hash;
  // 如果hash发生了变化,且绑定了处理函数...
  if (newHash != oldHash) {
      oldURL = newURL;
      oldHash = newHash;
      uploadUserData(4, null);
  }
 }, 500);
})(window);


然后当我们上传这些数据到后端的时候,我们需要去记录每一个页面地址所对应的ip,这样才能算出网站的pv数量。

我们继续来看如何收集uv,既然uv和用户ip有关,那么我们就需要去拿到访问者的ip地址。那问题来了,用户的ip地址从哪里获取呢?熟悉web的同学一下子就联想到http请求了。是的,我们的每一个客户端请求都会携带用户端的信息,这些信息都会在请求头里面。现在我们直接看项目实现:

function getClientIP(req) {
  var ip = req.headers['x-forwarded-for'] ||
  req.ip ||
  req.connection.remoteAddress ||
  req.socket.remoteAddress ||
  req.connection.socket.remoteAddress || '';
  if (ip.split(',').length > 0) {
    ip = ip.split(',')[0]
  }
  return ip;
};

这是一个获取ip的帮助方法,入参便是请求上下文的request(nodejs)对象,然后我们就拿到了用户的ip。

03 — 项目实战

现在我们基础数据都有了,现在就可以对这些数据进行分类计算了,妈妈再也不用担心我的学习了,哈哈。说一千道一万,来点干货,直接看项目。

传送门:web-monitor

图片描述

喜欢请点个赞呗

或者去https://github.com/kisslove/w... Star一下

或者打赏一下

再或者……

哈哈,想法有点多了。

图片描述

阅读 10.4k

前端
做一个有趣的web开发者

全栈工程师

164 声望
2 粉丝
0 条评论

全栈工程师

164 声望
2 粉丝
文章目录
宣传栏