Microsoft  Clarity MCPサーバーをClaude Desktop for Macで使ってみる

# はじめに
**Microsoft Clarity**は無料で使えるWeb分析ツール。GA4と連携させて、ヒートマップやレコーディングを主に用いています。

そのMCPサーバーが公式からリリースされていたので試してみました。

https://clarity.microsoft.com/blog/introducing-the-microsoft-clarity-mcp-server-a-smarter-way-to-fetch-analytics-with-ai/

https://github.com/microsoft/clarity-mcp-server

# 本記事のスコープ
Claude DesktopからClarity MCPサーバーを使ってデータ分析をすることを目標とします。

Microsoft ClarityのセットアップやMCPサーバーそのものについては前提知識として、本記事では触れません。

# 環境
以下の環境で検証しています。

- MS Clarity (GA4連携済み）
- MacBook Air M3
- MacOS 15.5
- Claude Desktop for Mac 0.9.4
  - Claude Teamプラン

# 1. MCPサーバーのソースの確認
大きな会社の公式からのリリースなので過度な心配は不要とはいえ、一通りソースは確認しておいた方が良いでしょう。

`src/index.ts`が主要な処理です。

https://github.com/microsoft/clarity-mcp-server/blob/8f756596f2748708b414f31fe5218dd490666882/src/index.ts

これをみると非常にシンプルな作りで、用意されているツールは`get-clarity-data`のみです。

```ts
server.tool(
  "get-clarity-data",
  "Fetch Microsoft Clarity analytics data",
```

https://github.com/microsoft/clarity-mcp-server/blob/8f756596f2748708b414f31fe5218dd490666882/src/index.ts#L110-L112

入力値をvalidationし、`fetchClarityData`でリクエスト組み立て、API呼び出しを行っているだけです。

| パラメータ名 | データ型 | 必須/オプション | 最大値 | 説明 | 具体例 | 対応するClarity API概念 |
|---|---|---|---|---|---|---|
| numOfDays | 整数 | 必須 | 3 | 取得する過去の日数 (1-3日) | 2 | データ取得期間 |
| dimensions | 文字列の配列 | オプション | 3 | データをグループ化またはフィルタリングするディメンション（例：ブラウザ、デバイス、国） | `["Browser", "Device"]` | ディメンション |
| metrics | 文字列の配列 | オプション | N/A | 取得する指標（例：スクロール深度、エンゲージメント時間、トラフィック） | `["Traffic", "Engagement Time"]` | 指標 |
| token | 文字列 | オプション | N/A | Clarity APIトークン（CLIで設定されていない場合） | "your-api-token-here" | API認証トークン |

3日間が最大なのは辛いですn

APIのドキュメントは以下です。

https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-data-export-api

# 2. セットアップ
## 2-1. APIトークンの取得
まずはClarityの管理画面からAPIトークンの取得が必要です。

「**設定**」から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/6015bd51-8730-4d76-9eb3-7db431b95fd3.png)

「**データのエクスポート**」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/08700822-029f-42c3-ba3e-afd83ad7bbc6.png)

「新しいAPIトークンを生成する」から生成できます。

ここで気づくのですが、

>API 呼び出しは、プロジェクトごとに 1 日あたり 10 回の呼び出しに制限されることに注意してください。

とある通り、Quotaがそれなりに渋いですね。

## 2-2. Claude Desktop構成ファイルへの追記
`claude_desktop_config.json`へ以下の記述を追加。ファイルのPathは以下です。

- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

https://modelcontextprotocol.io/quickstart/user#2-add-the-filesystem-mcp-server

```json
{
  "mcpServers": {
    "@microsoft/clarity-mcp-server": {
      "command": "npx",
      "args": [
        "@microsoft/clarity-mcp-server",
        "--clarity_api_token=your-api-token-here"
      ]
    }
  }
}
```

なお、`npx`は場合によってはフルパスが必要です。

## 2-3. Claude Desktopでの確認
以下のように`get-clarity-data`が表示されていればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/96fa2c78-083b-49aa-9b3f-79d9da9a3af3.png)

# 3. 実践
## 3.1 何ができるか確かめる
ソースから概ねわかりますが、何ができるかをClaudeに聞いてみます。

以下の回答でした。

```md
Microsoft Clarityツールを使って、ウェブサイトのユーザー行動分析に関する様々なデータを取得・分析できます。具体的には以下のようなことが可能です：

## 取得できるデータの種類

**ユーザー行動メトリクス:**
- スクロール深度（ユーザーがページをどの程度スクロールしているか）
- エンゲージメント時間（ページでの滞在時間）
- トラフィック データ
- 人気ページの分析

**技術的な分析:**
- ブラウザ別の利用状況
- デバイス別（デスクトップ、モバイル、タブレット）の分析
- オペレーティングシステム別の分析
- 国・地域別のアクセス状況

**マーケティング分析:**
- トラフィックソース（検索エンジン、ソーシャルメディアなど）
- メディア別の流入分析
- キャンペーン効果の測定
- チャネル別のパフォーマンス
- URL別の詳細分析

## 活用例

1. **ユーザー体験の改善** - スクロール深度やエンゲージメント時間から、コンテンツの効果を測定
2. **技術的最適化** - デバイスやブラウザ別の分析でレスポンシブ対応の改善点を特定
3. **マーケティング戦略** - 効果的な流入源やキャンペーンの特定
4. **地域戦略** - 国・地域別のデータから市場戦略を立案

データは最大3日間分を取得でき、最大3つの次元でフィルタリングして詳細な分析が可能です。ClarityのAPIトークンがあれば、これらのデータを自動的に取得して分析レポートを作成することもできます。

何か特定の分析をお手伝いしましょうか？
```

## 3.2 「メディア別の流入分析」を試す
以下のリクエストを組み立てて実行してくれました。期間は指定してあげるべきでしたね。とりあえず3日間で調べています。

```json
{
  "numOfDays": 3,
  "dimensions": [
    "Medium"
  ],
  "metrics": [
    "Traffic",
    "Engagement Time",
    "Source"
  ]
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/59f02ed7-b611-461f-8534-6fafe4ce0b18.png)

データを元にArtifactsを使って以下のようなReact製のグラフを作ってくれました。（軸のラベルは隠しています。）
Claudeの得意なところですね、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/0126b589-0088-42b9-bc08-71c507d7cf62.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/5c407e33-0008-4505-93ab-f934f79b8f92.png)

## 3.3 より複雑なデータ取得（特定ページの国別の流入）
続いてより複雑なケースを試します。結論を言うと、うまくいきませんでした。

### Q. enc.piano.or.jpの国・地域別のアクセス状況を分析して
ピアノ曲事典の国別アクセス数を聞いてみます。

https://enc.piano.or.jp/

以下のリクエストを組み立ててくれました。

```json
{
  "metrics": [
    "Traffic",
  ],
  "numOfDays": 3,
  "dimensions": [
    "Country/Region"
  ]
}
```

これだと全体データでしか取得できませんでした。

>申し訳ございませんが、enc.piano.or.jpの詳細な国・地域別データを取得できませんでした。ただし、取得できた全体データ（過去3日間で********セッション、*******ユニークユーザー）を基に、一般的な国・地域別アクセス分析の枠組みを作成します。

そして適当な予想レポートを出してきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2722903/ccede0cd-9ee2-40c5-9bb4-3acb8aeb6483.png)

その後も何度かクエリを変えましたが、`Country/Region`は取れないのか、取得ができませんでした。
また、GA4と異なり、hostnameでのfilterもAPIの仕様上難しそうで、一度書き出した後にデータ処理しないと実現できなさそうでした。

# おわりに
簡単ですが、Clarity MCPサーバーを試してみました。

最低限の実装で、かつClarity Data Export APIもカスタマイズ性が高くなさそうなので、できることは限られるかな、というのが正直なところです。

**Google Analytics Data API**の方はフィルタなど充実しているので、複雑なことをしたい場合は、そちらのMCPサーバーを自作するか、公式を待つかした方が良さそうです。

私はGA4のMCPサーバーを自作して使っています。

https://github.com/HosakaKeigo/mcp-server-ga4