统计网站访问量（自己开发）

不想使用第三方的流量统计工具，于是自己开发了一套，最符合自己的需求

sun_qqq

5806人浏览 · 2023-02-06 23:24:46

sun_qqq · 2023-02-06 23:24:46 发布

网站的运营者或者开发者肯定都想知道，自己网站每天的使用情况。比如每天有多少访问量、用户都点击哪些功能、用户对网站上哪些功能感兴趣。知道了这些信息才能定位网站后面的开发方向，比如持续优化点击率高的模块、裁撤用户不感兴趣的模块，打造用户喜欢，且有自己特色的应用。

我在我的博客上做了尝试，现在分享给大家。演示地址：孙权的博客

一：功能分析

首先准备工作是分析自己的应用有哪些功能，确定我们需要监听的具体动作。

比如，我分析我的博客因为功能简单，主要监听三个模块即可。再细化到每个操作是在哪里触发的，具体就是下图了

1、各种按钮操作 （6种按钮）
2、列表翻页（3种列表）
3、菜单切换（7个菜单）

在这里插入图片描述

二：前端埋点

所谓埋点就是监听各个关键节点，在节点触发时请求接口记录用户当下的这个操作日志。比如监听我博客的‘博客源码‘按钮，在该按钮被触发时发送一个日志

readCode:function (){
  // 创建日志
  this.createLog({
    moduleType:'button',
    operateType:'查看源码',
    operateContent:'首页入口'
  });
}

细化到每个触发点后，我们可以开始埋点，上传用户的操作日志了。可以封装一个埋点方法，在每个触发节点都调用这个方法并且传入如上图一样的参数

  // 封装埋点方法
  Vue.prototype.createLog = function (log){
    let that = this,
      dateString = this.getSQTime();

    that.GetLocation(function (LocationCityName) {
      that.SQFrontAjax({
        Url: '/api/visitCreate/foreend',
        UploadData: {
          location:LocationCityName,
          fromUrl:document.referrer,
          time:dateString,
          browser:that.getSQBrowser(),
          moduleType:log.moduleType,
          operateType:log.operateType,
          operateContent:log.operateContent ? log.operateContent : ''
        },
        Success: function () {
          that.setSQCookie('sunqBlog','统计访问量',12); // 12个小时内同一个浏览器算一个访问量
        }
      });
    });
  };

 // 在页面初始化时，调用接口，上传用户的操作日志
 export default {
    name: "BlogIndex",
    mounted: function () {
      // 创建日志
      that.createLog({
        moduleType:'menu',
        operateType:'选择菜单',
        operateContent:'博文'
      });
    },
  }

三：数据分析

收集到的操作日志数据长这样，一条条的很碎，看起来非常累人。
在这里插入图片描述

需要我们整理一下。比如每个ip它一天有哪些操作，把这些操作形成一个集合。

比如一天中有几个ip访问，这些ip分别是什么。

比如一天有多少浏览量，昨天有多少浏览量，最近一周浏览量是怎样个趋势等等

这时需要我们的后端语言去开发出一个个的接口

我是用的Node.js，由于我对MongoDB的操作不熟悉，就查出所有记录然后用nodejs去处理数据了。下面是用户行为接口的实现例子

// 汇总每个ip的操作行为
App.post('/getUserAction/:accesstype',function (Request, Response){
    DealPara(Request, Response, function (para) {
        let endTime = para.endTime, // 2021/12/11 从前端获取
            dayNum = para.dayNum,//7 从前端获取
            dayArray = util.getDateArray(endTime,dayNum), // 前推指定天数，类似[‘2021/12/09’,‘2021/12/10’,‘2021/12/11’]
            nextDay = util.getOneDate(endTime,1),  // 输出 2021/12/12
            nodePara = {'time':{$gt:dayArray[0],$lt:nextDay}},

            ipArray = [], // ip数组 [ip1,ip2,ip3]
            userAction = {}; // { ip1:{action:[]}, ip2:{action:[]}}
        // 查出上面时间数组范围内所有的记录，然后遍历时间数组的每一天，跟记录对比，得出每一天的访问量
        Monge.Mongo('VisitList', 'Read', nodePara, function (Result) {
            Result.forEach(function (item){
                let currentIp = item.clientIp;
                if(item.clientIp && ipArray.indexOf(currentIp)==-1){
                    ipArray.push(currentIp);
                }
            });

            // 生成userAction     { ip1:{action:[]}, ip2:{action:[]}}
            ipArray.forEach(function (item){
                userAction[item] = {action:[]};
            });

            Result.forEach(function (item,i){
               let currentIp = item.clientIp, // 当前数据可能没有ip字段
                   actionarray = currentIp ? userAction[currentIp].action : '', // 当前ip下的行为数组
                   actionText = item.operateType ? item.operateType + ':' + item.operateContent : ''; // 当条日志下的操作字段

               if(actionarray && actionText && actionarray.indexOf(actionText)==-1){
                    actionarray.push(actionText);
               }

               if(currentIp){
                   userAction[currentIp].location = item.location ? item.location : '';
                   userAction[currentIp].browser = item.browser ? item.browser : '';
                   userAction[currentIp].time = item.time ? item.time : '';
               }
            });

            var Json = {
                status: '0',
                data: {
                    userAction:userAction,
                    dateList:Result // 数据结果为库里记录直接返回，供地图使用
                }
            };
            Response.json(Json);
        });
    });
});