静的サイトの実際のページビュー数を取得する方法

静的なサイトを考えると、どのようにして実際の訪問者数を取得しますか?

更新:これを真剣に考えている場合は、NetlifyAnalyticsを使用してください。

これは静的サイトです。私はGoogleAnalyticsを使用しており、対象読者は開発者です。

多くの開発者が広告ブロッカーを使用しているため、不正確な分析データの完璧な組み合わせです。広告ブロッカーは、Google Analyticsデータがサーバーに送信されるのをブロックする場合があります(そうでない場合もあります)。一部の開発者はJavaScriptを完全にブロックすることさえありますが、これは少数の人々であり、問題が少ないと思います。

私はいつもこの疑問を持っていました:実際の訪問者数は何人ですか?私が見ている訪問者の割合は何パーセントですか?

私のホスティングプロバイダーは訪問に関する情報を提供していません。私は自分が消費する帯域幅を知っています。

そこで、アイデアをテストすることにしました。

私はすべての投稿に画像、非常に小さな画像を含めます。

これは新しいことではありません。メールマーケティングソフトウェアは、この「トリック」を自動的に使用して開封率をカウントします。

影響を最小限に抑えるために、1px x 1pxのSVG画像、141バイトのデータを使用しました。

GlitchでNode.jsWebサーバーを作成しました。https://glitch.com/~static-site-visitors-counter。次のように、画像をWebサイトに含める場合:

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

その上にあるNode.jsWebサーバー<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()そこで、私たちの目的のためにこの関数を誤用しました。

それは非常に簡単で、グリッチの仕組みにより、アプリを更新するたびにカウンターがリセットされます。

もちろん、これは分析ツールではありません。分析データが現実と一致するかどうかをすばやくテストする方法です。通常、画像をブロックする人はほとんどいません。

そして、これは別の方法で行うことができます。SVGを使用しているので、適切な文字列をクライアントに送り返すこともできますContent-Typeヘッダ。それが速いかどうかはわかりませんが、試したことはありません。

同じ方法でCSSファイルを提供することもできます。たまたま画像を選んだ。

これを3〜4時間実行すると、Google Analyticsログと比較したデータから、私のサイトにアクセスするユーザーの約10%がGoogleAnalyticsにデータを送信していないことがわかりました。

それほど多くはありません。訪問者の2倍のように、もっと期待していました。または50%以上。しかし、10%の増分です。

これは、Google Analyticsデータが依然として非常に有用であることを意味するため、実際には私にとって最適です。

完全なアプリコードは次のとおりです。https://glitch.com/edit/#!/static-site-visitors-counter


その他のラボチュートリアル: