はじめに
Microsoft Clarity は、ウェブサイトを訪問したユーザーの行動を分析することができ、このサイトでも導入しています。
個人的にはとても使いやすく、暇なときにサイトのアクセス状況を確認できます。
使い方も非常に簡単で、<head>タグ内に管理画面から提供される一行のコードを追加するだけです。

しかし、多くの広告ブロックルールが Clarity のドメインをブロックするため、多くのユーザー接続情報が欠落してしまいます。しかし、nginx を使って自分のドメインにリバースプロキシすることで回避できます。ここでは具体的な手順を紹介します。
リクエストの分析
以下は、<head>タグ内に追加するコードの例です。
または、ブラウザの開発者ツールを開いてパケットキャプチャを行うと、関連コードがまず https://www.clarity.ms/tag/abcdefg にリクエストを送り、ダウンロードされるのは js スクリプトであることがわかります:
その中には3つのリンクがあります:
- https://c.clarity.ms/c.gif
- https://www.clarity.ms/s/0.8.13-beta/clarity.js
- https://z.clarity.ms/collect
これらのリンクを一つずつ置き換える必要があります。
リンクの置き換えとリバースプロキシ
あなたのドメインが example.com であると仮定し、サブドメイン clarity.example.com を作成して、パブリックネットワーク上の nginx サーバーに解決します。
このとき、https://www.clarity.ms/tag/abcdefg からリクエストされたスクリプトを /var/www/html/tag/abcdefg に保存できます。
その後、上記の3つのリンクを以下のように順次置き換えます:
- https://clarity.example.com/c.gif
- https://clarity.example.com/s/0.8.13-beta/clarity.js
- https://clarity.example.com/collect
その後、https://www.clarity.ms/s/0.8.13-beta/clarity.js を /var/www/html/s/0.8.13-beta/clarity.js にダウンロードする必要があります。おそらくご覧になる時点ではバージョンが異なっているかもしれませんので、適宜修正してください。上記の /var/www/html ディレクトリは自由に変更できますが、nginx プロセスがアクセスできるように権限に注意してください。このときのディレクトリ構造は以下の通りです:
nginx のリバースプロキシ設定の参考:
ウェブサイトの再設定
元々ウェブサイトの <head> に追加したスクリプト内の www.clarity.ms を clarity.example.com に置き換えます。これで完了です。あなたのサイトにアクセスして、管理画面でオンラインのリアルタイムユーザーが表示されるか確認してみてください!
欠点
- この方法の欠点は、管理画面に表示されるすべてのアクセスの地理的位置がその nginx サーバーからのものになってしまうことです。Microsoft がリクエストヘッダーから地理的位置を判断してくれれば良いのですが。
- Microsoft による
clarity.jsのアップグレードに自動的に追随できませんが、自動化するスクリプトを自分で書くこともできます。参考コード: