05 主题集成友链访问统计
前段时间小站添加了不少友链,好奇这些友链的转换价 值,偷偷在主题里埋了个小功能来统计这个无人小站的游客访问来源,目前已稳定运行了近半月,统计了下近期友链访问数据。
这个统计功能主要是使用了document.referrer,它返回跳转或打开到当前页面的那个页面的 URI。如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。目前主流桌面浏览器基本都支持这个 API。

Can I Use
接下来先看下半个月所有访问这个无人小站的来源,如果是通过书签或者直接访问的话 document.referrer 为空,访问来源就是本站。好吧,从数据看起来这个站还真无人气,最后感谢下白喵的友链,居然能有辣么多人点进来看~

半月访问统计
最后来一份实现代码:
// 转换访问来源地址
const getLocation = (href) => {
const a = document.createElement("a")
a.href = href
return a
}
// 统计访客数据
const visitorStatistics = () => {
const referrer = getLocation(document.referrer)
const hostname = referrer.hostname
return new Promise((resolve) => {
const query = new AV.Query("Visitor")
const Visitor = AV.Object.extend("Visitor")
query.equalTo("referrer", hostname)
query
.first()
.then((res) => {
// 存在则增加访问次数
if (res) {
res
.increment("time", 1)
.save(null, { fetchWhenSave: true })
.then(() => resolve())
.catch(console.error)
} else {
// 不存在则新建
const newVisitor = new Visitor()
newVisitor.set("referrer", hostname)
newVisitor.set("time", 1)
newVisitor
.save()
.then(() => resolve())
.catch(console.error)
}
})
.catch(console.error)
}).catch(console.error)
}
最近更新 1mo ago