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

ただし、多くの広告ブロックルールがClarityのドメインをブロックするため、多くのユーザー接続情報が欠落してしまいます。しかし、nginxでリバースプロキシを使って自分のドメインに転送することで回避できます。ここでは具体的な手順を紹介します。
リクエストの分析
以下は<head>タグ内に追加するコードの例です。
またはブラウザの開発者ツールを開いてパケットキャプチャを行うと、関連コードがまず https://www.clarity.ms/tag/abcdefg にリクエストし、ダウンロードされるのはJavaScriptスクリプトであることがわかります:
その中には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のアップグレードに自動的に追従できませんが、自分でスクリプトを書いて自動化することもできます。参考コード: