フラストレーション・トラッキングは、ほぼ確実に UX の問題を示す 3 つの強いシグナル（レイジクリック、デッドクリック、エラークリック）を可視化します。実際の訪問者を混乱させたり、壊れているページや要素へ素早くトリアージするための入口として活用できます。
何が記録されるか
フィーチャーフラグを有効化すると、3 種類のクリックパターンが自動で取得されます。
| 種類 | 定義 |
|---|---|
| レイジクリック (Rage click) | 同じ要素または 30×30 px の領域に対して 600 ミリ秒以内に 3 回以上のクリック。クリックできそうなのに反応しない要素を叩いている状態。 |
| デッドクリック (Dead click) | 1 秒以内に DOM の変化が起きない非インタラクティブ要素へのクリック。クリックできそうに見えるが実際はできない。 |
| エラークリック (Error click) | クリックから 100 ミリ秒以内に JavaScript エラーを引き起こしたクリック。クリックが何かを壊した状態。 |
これら 3 種類のクリックが、トラッカーが今日取得できるすべてです。追加の設定は不要です。フィーチャーフラグを有効化すれば、トラッカーは 3 つすべてを自動的に監視します。
プライバシー保証
フラストレーションイベントが保存するのは、クリックされた要素に関する診断シグナルのみです。周囲のページの内容は一切保存しません。
取得する項目:
- 要素の CSS セレクタと短い DOM パス（例:
main > section > button.checkout-confirm） - 要素の表示ラベルまたはテキスト（最大 100 文字、例: ボタン上の「送信」という単語）
- 要素の ARIA ロールと aria-label（存在する場合）
- 要素の計算済み
cursorスタイル（「クリックできそうに見えるのに実際はできない」という不一致を検出するために使用） - ビューポート基準のクリック座標
- ページの URL とタイトル
- フラストレーションの種類とタイムスタンプ
- アナリティクスの他機能でも使用しているセッション ID とビジター ID
取得 しない 項目: フォームの入力値、ファイルの内容、ページ上の他要素の内容、その他の個人情報。すべての文字列は防御的に上限が設けられています。訪問者が Global Privacy Control を有効にしている場合は、その他の挙動分析と同様にフラストレーション・トラッキングもスキップされます。
有効化する
- 対象サイトの 設定 → 詳細設定 を開きます。
- Feature Flags までスクロールし、Frustration Tracking をオンにします。
- サイト上で開いているページをリロードすると、トラッカーが新しいフラグを取り込みます（自動でも約 5 分以内に反映されます）。
このトグルは Pro プラン以上で利用可能です。
どこで確認するか
ダッシュボードの Errors タブを開き、サブタブの Frustration に切り替えます。
3 つのパネルが表示されます:
- Spotlight — 最上部のヒーローカードで、イベント数、影響を受けたユニークユーザー数、新しさ、そして直近のデプロイ後に発生したかどうかをもとに、最も優先度の高い問題を自動的に選び出します。カードは平易な文での 何が起きたか（「訪問者が /checkout で『送信』とラベル付けされた要素をクリックしましたが、何も起こりませんでした」）から始まり、考えられる原因、ワンクリックの セレクタをコピー ボタン、貼り付けてすぐ使える DevTools で再現 スニペット、そして開発者へ一括で渡せる チケット用にコピー ボタンが揃っています。
- フラストレーションの推移 — 種類ごと（Rage / Dead / Error）の 3 枚のスパークラインカードで、選択した期間のイベント数を表示します。右上の Cards / Lines スイッチで結合された折れ線グラフに切り替えられます。
- トップ・ホットスポット — 並べ替え可能なワークリストで、各行は 1 つのページ上の壊れた要素 1 つを表します。各行にはセレクタ、ページパス、要素の表示ラベル、種類ごとの件数が表示されます。行をクリックすると展開され、同じ平易な文の説明、セレクタのコピー、最近のイベント、（エラークリックの場合は）対応する JS エラーをインラインで確認できます。背景コンテナへのクリック（空白からバブルアップして
<main>、<body>、<html>に届いたクリック）には控えめな Background バッジが付き、一目でスキップできるようになっています。
フラストレーションの種類（Rage / Dead / Error）、URL のプレフィックス、期間（1h / 24h / 7d / 30d）でフィルタできます。
ダッシュボードの読み方
「トップ・ホットスポット」テーブルはあなたのワークリストです。各行は 1 つのページ上の壊れた要素 1 つを表し、優先度で並べ替え可能です。
Spotlight カードと各展開行は、同じトリアージレイアウトを共有しています:
- 平易な文での 何が起きたか — 技術的な知識がなくても、チームの誰でも読めます。
- クリックの種類と要素の見える特徴に合わせた 考えられる原因 の診断。ダッシュボードは要素の
cursorスタイルとタグ名を読み取って、明白なケース（「CSS ではクリック可能となっているのに、タグはボタンではない — 本物の<button>か<a>にしましょう」、または「読み込み状態が固まっている — ハンドラが静かに例外を投げている可能性があります」）を直接指摘します。汎用的な定義を出すだけではありません。 - DevTools で再現 スニペット — ページのコンソールに貼り付けると、一致するすべての要素に赤いアウトラインと
[zenovay] matchのログ行が付き、壊れた要素を即座に見つけられます。 - セレクタをコピー ボタン（DevTools の要素インスペクタへのジャンプ用）と チケット用にコピー ボタン（ページ・要素・種類・件数・推奨される修正方法までをまとめて開発者へ一度の貼り付けで渡せる）。
- エラークリックの場合: 紐づく JavaScript エラーメッセージと、Errors タブへ移動するための Fingerprint をコピー ボタン。
- 同じ要素上の最近のイベント（ビューポート座標とセッション ID 付き）。
Spotlight カードは、以下の式で最も優先度の高い問題を自動選択します:
priority = (rage × 3 + dead × 1.5 + error × 5) × ln(unique_users + 1) × recency_boost
直近 24 h 以内であればリーセンシーブーストは 1.5× です。背景コンテナへのクリックは大きく優先度が下げられるため、Spotlight に選ばれることはありません。直近の GitHub デプロイ 以降 に始まったホットスポットには、行に琥珀色の NEW バッジが付きます — ほぼ確実にリグレッションです。
トリアージのヒント
- Spotlight から始めましょう。 平易な文を読み、考えられる原因の診断を確認し、DevTools のスニペットをコピーしてページのコンソールに貼り付ければ、壊れた要素にアウトラインが付きます。
- 一度の貼り付けで開発者へ渡しましょう。 PM やファウンダーとして問題を見つけた場合、チケット用にコピー ボタンがページ・要素・クリック種類・件数・推奨される修正方法を 1 通のメッセージにまとめてくれます。Linear、Jira、Slack にそのまま貼り付けられます。
- NEW バッジに注目しましょう。 直近のデプロイ以降に新規として印が付いたホットスポットは、ほぼ間違いなく真っ先に修正すべきリグレッションです。
- Rage と Error を組み合わせましょう。 Error Click と同じセレクタで起きている Rage Click は、本物の例外を示しています — JS エラーを修正すれば Rage Click も一緒に消えるのが普通です。
- Dead Click は期待を映します。 多くの訪問者が同じ div を Dead Click しているページは、ユーザーがそこをクリック可能だと思っていたことを示します。インタラクティブにするか、視覚的なヒント（例:
cursor: pointer）を取り除きましょう。 - Background の行はスキップしましょう。 Background タグの付いた行は、空白部分のクリックがバブルアップしてコンテナに届いたものです。本物のバグを示すことはほとんどありません。
制限事項
- フラストレーションイベントはおおよそ 90 日間保持される後、自動的に削除されます。これはトリアージシグナルであり、長期保存アーカイブではありません — ホットスポットが新しいうちに調査してください。
- 壊れたページでカウントが暴走しないよう、トラッカー側で取得をスロットリングしています。すべてのクリックではなく代表的なサンプルが表示されます。
- ホットスポットは保持期間内のデータ全体で集計されますが、グラフは選択した期間に従います。