如何獲取靜態網站的實際訪問量

對於一個靜態網站，你如何得到真實的訪問人數？

更新：所有主要的平台現在都有自己的分析解決方案（Netlify、Vercel、Cloudflare..），同時，你也可以自主托管Plausible。

這是一個靜態網站。我使用Google Analytics，而我的目標受眾是開發人員。

這是一個完美的組合，但卻會導致不準確的分析數據，因為許多開發人員使用廣告屏蔽軟件，這可能（取決於情況）阻止Google Analytics數據傳輸到服務器。一些開發人員甚至完全阻止JavaScript，但我假設這只是一小部分人，所以並不是一個大問題。

我一直有這個疑問：真正的訪問人數是多少？我能看到的訪問者占百分之幾？

我的託管服務商沒有提供關於訪問量的任何信息。我只知道我消耗的帶寬。

所以我決定試一個想法。

我在每篇文章中都包含一個圖像，一個很小的圖像。

這不是什麼新鮮事：電子郵件營銷軟件自動使用這種“技巧”來計算開封率。

我使用了1像素x 1像素的SVG圖像，長度為141字節，以減少影響。

我在Glitch上建立了一個Node.js Web服務器。如果你在網站中包含了這個圖像，就像這樣：

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

將會將圖像返回給位於<name-of-the-project>.glitch.meURL上的Node.js Web服務器。

但首先，它會增加一個值：

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發送數據。

並不多。我預期會有更多，像訪問者的兩倍。或者多50%。但僅僅增加了10%。

對我來說，這實際上是最好的，因為這意味著Google Analytics的數據仍然非常有用。