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

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

一：功能分析

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

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

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/12nodePara = {'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);});});
});

四：数据展示

前端根据后端的接口，形象话的把需求展示出来。可以用echarts的折线图、地图、饼状图，列表等各种组件使接口数据可视化，下面是目前我博客分析出来的数据，还有很多信息我还没来及分析。比如各种操作的占比，我会在节假日更新

五：反哺网站

根据分析出来的数据，可以发现用户的访问习惯，了解网站各项指标，对网站进行针对性的优化

1、菜单名称优化

通过第三个饼图，可以看出用户几乎不点击管理后台这个菜单。估计是大家以为这个后台是作者自己使用的，但其实我是对外开放的，希望能跟大家分享。

所以我做了如下优化，调整菜单名称：管理后台->开放式后台。估计会增加这块的访问量，后面再看看数据有没有效果

2：兼顾移动设备

经过对访问用户设备占比的分析，结果如上图右上角饼图，发现有近四分之一的用户使用移动设备访问网站。

比我预估的占比多，于是我把管理后台的页面添加了对移动设备的适配。兼顾到这部分用户的访问体验

3、提升用户粘性

通过对老用户占比数据的分析，分析结果如上图左一。发现老用户占比不及10%，且这10%中我自己的访问量占大头。说明我的博客用户粘性很差，后面准备从博文质量、博客优化入手，提升访客的回头率。

4、用户行为分析

通过对用户行为的归纳，如上图右下角。发现用户在本网站操作最多的还是浏览文章和浏览留言，其余访问统计、时间轴、管理后台等我之前以为吸引人的功能模块终究还是甜点零食，最高访问量还是博文和留言。

我觉得我得珍惜这些流量，提升博文质量，审核留言。顺应用户的真实关切

5、流量来源

本博客流量趋势

我的知乎账号流量趋势

如上图一为我博客流量趋势，图二为我知乎账号的流量趋势。博客的流量跟知乎的流量正相关，0911是中秋节假期的第二天，知乎访问量稀碎，我的博客访问量也稀碎。

说明我博客都是从知乎引流过来的，想推广我的博客还是要背靠知乎大平台，做好知乎账号才能有更多的博客访问量。

六、代码开源

具体效果见：孙权的博客

前端详细代码：前端源码

后端接口详细代码：接口源码

统计网站访问量（自己开发）相关推荐

js实现精确统计网站访问量的代码分享
JS 精确统计网站访问量. 代码如下: /** * vlstat 浏览器统计脚本 */ var statIdName = "vlstatId"; var xmlHttp; /** ...
Servlet中统计网站访问量
统计网站访问量访问量放入到servletContext里,,setAttribute("count"); 其他servlet获取该变量,然后进行自增再重新放入到 servle ...
java web统计网站访问次数,实现一个统计网站访问量的效能
实现一个统计网站访问量的功能大神们用JS,jquery,ajax怎么实现一个统计网站访问量的功能谢谢 ------解决方案-------------------- 这里 ...
PHP+MySQL实现精确统计网站访问量(IP个数)
基于WordPress的网站有很多统计功能.但是只能统计文章阅读数.不能统计访客人数.以下代码可以实现获取来访用户的IP地址,一个IP对应一次访问.即使刷新也不会增加访问量.这个非常精确. 1.创建一 ...
java 统计网站访问量_javaweb之统计网站访问量小案例
效果图图片.png 项目目录: 图片.png 图片.png 切换浏览器,数据连续累加(全局作用域,服务器不重启,数据会一直保留) html代码 hello world! click1 CountSe ...
php+mysql实现统计网站访问量(一)
环境:centos6.9:mysql5.1:php7.2 1.创建一个存储数据的表 create table wp_jc_count(id int not null auto_increment pr ...
java如何统计网站访问量
Java后台整合php倒不大好办. 1.使用Lightweight J2EE Web Tracker,源码和文档等都有. 地址:http://smoothfoot.com/tracker/index. ...
js 实现统计网站访问量
把如下代码粘贴到html中即可: <script language="JavaScript"> <!-- var caution = false function ...
JavaWeb-网站在线用户信息、网站访问量以及管理踢出用户实例
转载请注明出处: http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] 这个稍微比上个版本做得完善了一点,用了JavaBean来封装用户信息,添加了一个管 ...

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