如何获得静态网站的实际浏览量

给定一个静态站点,您如何获得访问者的真实数量?

更新:如果您对此很认真,请使用Netlify Analytics。

这是一个静态站点。我使用Google Analytics(分析),我的受众是开发人员。

由于许多开发人员使用了广告拦截器,该拦截器可能(可能不取决于)阻止Google Analytics(分析)数据传输到服务器,因此可以完美地结合不正确的分析数据。一些开发人员甚至完全阻止了JavaScript,但是我认为这是一小部分人,因此问题较少。

我一直有这样的疑问:真正的访客人数是多少?我要看的访客比例是多少?

我的托管服务提供商未提供有关访问的任何信息。我只知道我消耗的带宽。

因此,我决定测试一个想法。

我在每个帖子中都包含一张图片,非常小。

这并不是什么新鲜事:电子邮件营销软件会自动使用此“技巧”来计算未结费用。

我使用了1px x 1px SVG图片和141个字节的数据,以将影响降至最低。

我在Glitch上制作了一个Node.js Web服务器:https://glitch.com/~static-site-visitors-counter。如果您将图像包含在网站中,则如下所示:

<img src="https://<name-of-the-project>.glitch.me/pixel.svg" />

驻留在该节点上的Node.js Web服务器<name-of-the-project>.glitch.meURL将发送回图像。

但首先,它会增加一个值:

const express = require('express')
const app = express()
let counter = 0

app.use( express.static(‘public’, { setHeaders: (res, path, stat) => { console.log(++counter) }, }) )

const listener = app.listen(process.env.PORT, () => { console.log('Your app is listening on port ’ + listener.address().port) })

这个应用程序的重要部分是我们传递给的对象express.static()。通常,我们不会将其他对象传递给此方法,但是在该方法中setHeaders()提供了函数,因此我们可以为将要提供的文件设置一些其他标题。

我们添加我们的console.log()在那里,出于我们的目的滥用此功能。

这非常简单,由于Glitch的工作原理,每次更新应用程序时,计数器都会重置。

当然,这不应该是您的分析工具。这是一种快速测试分析数据是否符合实际情况的方法。通常,几乎没有人会遮挡图像。

这可以用不同的方式完成,因为我使用的是SVG,所以我也可以使用适当的方式将字符串发送回客户端Content-Type标头。我不知道那会不会更快,我还没有尝试过。

您也可以用相同的方式提供CSS文件。我刚巧选择一张图片。

我让它运行了3-4个小时,与Google Analytics(分析)日志相比,这些数据向我显示,访问我的网站的人中约有10%不会将数据发送到Google Analytics(分析)。

不是很多。我期望的更多,像是访客的2倍。或更多50%。但是仅增加10%。

实际上这对我来说是最好的,因为这意味着Google Analytics(分析)数据仍然非常有用。

这是完整的应用程序代码:https://glitch.com/edit/#!/static-site-visitors-counter


更多实验教程: