博客成长日志 | 准实时访问统计
前言
通过百度统计、CNZZ等服务,我们可以记录站点的访问地图、访问量和来源,如果想要展示数据,可以选择直接导向服务商提供的公开页面,但是样式丑陋,所以本文通过百度统计API,使用Echarts制作站点访问准实时统计页面,效果可以参考统计。
之所以说是准实时统计,是因为为了解决跨域问题(CROS error),本文采用的方法是定时通过百度统计API将数据下载保存为json文件,放置在网站目录下(后续可能会发展为vercel api,挖坑)。不过作为个人博客,方式访问量不会很大,没有必要实时更新,目前本站设置是每隔6小时更新一次。
数据获取
百度统计
在设置样式之前首先需要获取统计数据,使用百度账号登陆百度统计,根据参考资料4进行操作,获取token与site_id,具体教程可以查看参考资料1。
下载文件
通过6个链接,我们可以获取:一年内每日访问统计、访问地图数据、月度访问统计、来源分类统计、搜索引擎访问统计和外部链接访问统计;通过python或者nodejs都可以很方便的下载文件保存,以下为python的示例:
1 | import requests |
自动更新
在Linux中可以通过crontab
设置定时任务,以下为每整6小时的0点执行一次任务:
1 | 0 0 * * * /usr/bin/python /home/API/data/get.py >> /home/API/data/get.log |
数据展示
统计图容器
在html代码中插入:
1 | <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> |
访问日历
访问日历类似于Github贡献日历,有两种方法实现。
- 源自于hexo-githubcalendar 插件,由Eurkon修改,原文见参考资料3。需要修改的地方有:
1 | ... |
另外,需要更改容器id可以直接搜索替换即可。
- 通过census.js进行设置,包括后续的访问地图、访问趋势(访问次数)和访问来源都是基于此文件通过Echarts实现的。
1 | // 统计访问次数 PV 填写 'pv_count',统计访客数 UV 填写 'visitor_count',二选一 |
访问地图
最简单的就是访问地图,直接修改json文件的请求url即可:
1 | // 访问地图 |
访问趋势
访问趋势中按照年份,将12个月的数据展开,需要从json中获取到年份和月份信息,由于时间日期格式是固定的,所以可以直接截取。本部分代码以下列展示的为准:
1 | // 获取年份和月份 |
访问来源
留在最后的是最复杂的访问来源,实际上百度的全部来源(source/all/a
)API可以将来源分为:直达、外部链接和搜索引擎三个部分,直接使用并不困难。但是百度统计会将必应(cn.bing.com
和www.bing.com
)的来源归类到外部链接而不是搜索引擎,而且我自己还想统计来自于Github、十年之约等网站的流量,所以需要获取多个数据文件。
1 | ... |
Q&A
- 不想使用python下载文件保存,想要实时统计
根据参考资料2中4.3节——自建 Vercel API(可选)进行设置,替换上述文件中的url即可(感谢秋水)
根据参考资料2中5.3节进行设置,替换上述js
文件中的url
即可,具体形式可参考参考资料2中4.2节。
- 依然出现跨域问题?
请务必保证通过2.2节获取的文件保存在博客的网站目录下,并通过url可以访问;如果想要向我一样通过其他域名(例如api.foolishfox.cn/data/*.json
)访问,需要对服务器进行设置,以Nginx为例:
1 | #data CROS |
- 地图显示错误
务必注意,Echarts目前已经不提供地图js/json文件的下载,所以要通过npm获取到旧版本中的China.js
文件,因此Echarts的版本最好也保持一致
- Echarts绘制的访问日历无法自动适应窗口大小
正在积极解决中…
更新
- 2021.6.1:访问趋势中第23行代码应改为:
1 | monthValueArr[String(year)][String(month-1)] = monthValue[i][0] === '--' ? 0 : monthValue[i][0]; |
- 自动更新
token
百度统计的token
需要每个月更新一次,手动更新很麻烦,所以可以在代码中添加这一功能。首先更改downFile
函数:
1 | def downFile(url, fileName, prefix='./'): |
当发现token
错误时,我们执行update
函数:
1 | def update(prefix, url=updateUrl): |
config
是通过json
加载了目录下的token.json
文件,格式如下所示,注意添加访问权限(例如Nginx
中添加该路径返回403
)。
1 | // config = json.load(open('./token.json')) |
updateUrl
是自动更新的url
:
1 | updateUrl = 'http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token=' + config['refresh'] + '&client_id=' + config['api_key'] + '&client_secret=' + config['serect_key'] |
完整的py
文件可以点击下载。