如何獲得靜態網站的實際瀏覽量

給定一個靜態站點,您如何獲得訪問者的真實數量?

更新:如果您對此很認真,請使用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


更多實驗教程: