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

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

更新：如果您对此很认真，请使用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

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

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

更多实验教程：