>Microsoft Clarityの導入から使い方まで解説TOP

Microsoft Clarity 設定方法

Microsoft Clarityを導入した後に行うべき初期設定や、より効果的に活用するための設定について解説します。

基本設定

アカウント登録後、またはプロジェクト設定画面から以下の基本設定を確認・変更できます。

• 言語: 「日本語」を選択。
• 国: 「Japan」を選択（必須ではない）。
• 日付形式: 「yyyy/mm/dd」など好みの形式を選択。
• 週の開始: 「日曜日」または「月曜日」を選択。

マスキング設定 (重要)

個人情報保護のため、マスキング設定は重要なチェック項目です。

特に、外部の事業者とデータの共有を検討している場合は、導入後すぐに行う必要があります。

• 目的: フォーム入力内容やページ上の個人情報（氏名、メールアドレス、住所、電話番号など）がClarityに送信されないように秘匿します。
• 設定場所: プロジェクト設定 → [設定] → [マスキング]
• モード:
  • リラックス (Relax): ほとんどマスクされません。非推奨。
  • バランス (Balance): デフォルト設定。フォーム入力など機密性の高いと判断された要素が自動でマスクされます。多くのテキストは表示されます。最低限この設定を推奨。
  • 厳密 (Strict): ほとんどのテキスト、画像がマスクされます。プライバシーを最優先する場合に選択します。
• 確認:
  • 設定後、実際にフォーム送信などを行い、確認画面や完了画面で個人情報が表示される箇所がマスクされているか、レコーディングで確認してください。
  • 特に独自開発のフォームや、入力内容をページ上に表示する箇所は注意が必要です。
• 手動マスキング:

  自動でマスクされない、マスキング設定をコントロールしたい場合は、手動マスキングが有効です。

  • 自動でマスクされない箇所は、CSSセレクターを指定して追加でマスクできます。

  セレクタ例
form
.privacy-info


  • html要素に data-clarity-mask="true" 属性を追加することでもマスク可能です。

(例)div要素に属性を追加
<div data-clarity-mask="true"></div>

• 注意点:
  • マスキング設定は、設定後から有効になります。設定前に取得されたデータは遡ってマスクされません。
  • フォーム入力欄はデフォルトでマスクされますが、確認画面・完了画面のテキスト表示はマスクされないことがあるため、見落としがないように注意しましょう。

参考: Microsoft Learn – Masking content

IPブロッキング（関係者除外）

自分や社内関係者のアクセスデータを分析から除外するための設定です。

• 設定場所: プロジェクト設定 → [設定] → [IPブロック]
• 方法:
  1. [+ IPアドレスをブロックする] をクリック。
  2. 任意の名前を入力し、「現在のIPをブロックする」にチェックを入れるか、除外したいIPアドレスを直接入力。
  3. [追加] をクリック。
• メリット: 設定が非常に簡単。
• デメリット:
  • 固定IPでない場合、IPアドレスが変わると再設定が必要。
  • リモートワークなど、関係者全員のIPを網羅するのは困難。
  • 同じIPを使う他のユーザーのアクセスも除外されてしまう。

関係者除外（高度な方法）

IPブロッキングでは不十分な場合に、より確実に内部アクセスを除外する方法です。GTMの利用が前提となることが多いです。

方法1: タグを配信しない

プラットフォーム連携でClarityを導入している場合、プラグインの設定などで、管理画面にログイン中のユーザーに対して配信を除外する設定をします。

方法2: ログインステータスで除外 (GTM利用)

CMS（WordPress等）にログインしていかどうかをカスタムJavaScriptで判定し、ログインユーザーのアクセスではClarityタグが発火しないように設定します。

1. GTM変数作成: ログイン状態（例: WordPressの管理バーの有無や、パスに/wp-admin/が含まれるか否か）を判定するカスタムJavaScript変数を作成。
2. GTMトリガー作成: 上記変数が true となる（≒ログイン中 ※）条件でトリガーを作成。
3. Clarityタグ設定: GTMのClarityタグの「例外」として、上記トリガーを設定。

サンプルコード
function() {
  return document.getElementById('wpadminbar') !== null ||
         window.location.pathname.indexOf('/wp-admin/') !== -1;
}

^{（※）判定できないケース
・ユーザーが functions.php やプラグインで管理バーを無効にしている
・ダッシュボード以外の管理系画面（たとえばカスタムログインやAjax）}

方法3: Cookieとカスタムタグで除外 (GTM推奨)

関係者に特定のCookieを付与し、そのCookieを持つユーザーをカスタムタグで識別してClarityのフィルターで除外します。

1. Cookie発行: 関係者がアクセスする特定のページ（PHP等）で識別用Cookie（例: kankeisya=true）を発行する仕組みを用意。
2. GTM変数作成: 上記Cookieの値を読み取る「ファーストパーティ Cookie」変数を作成。
3. カスタムタグ送信: GTMのClarityタグのカスタムオプション、またはカスタムHTMLタグで、Cookieの値を kankeisyas などのキーでカスタムタグとして送信。
4. Clarityフィルター: Clarityのフィルターで「カスタムタグ kankeisyas が true (または特定の値) と等しい」セッションを除外する。

方法4: UTMパラメータで除外

関係者がアクセスする際に特定のUTMパラメータを付与したURLを使用し、そのパラメータを持つアクセスをClarityのフィルターで除外します。一時的な用途に適しています。

1. パラメータ定義: 内部アクセス識別用のUTMパラメータを定義（例: utm_source=internal , utm_medium=staff ）。
2. URL共有: 関係者にはパラメータ付きURLを使用してもらうように周知（URL生成ツール利用推奨）。
3. Clarityフィルター: Clarityのフィルターで「トラフィック → ソース が internal に等しい」などの条件で除外。

• デメリット: URL共有の手間、パラメータ付け忘れのリスク。

Google アナリティクス 4 (GA4) との連携

ClarityとGA4を連携させることで、Clarity内で一部のGA4データを確認できます。

現時点（2025年4月）では連携させることで得られるメリットは多くありません。とはいえClarityとGA4、どちらも頻繁にアップデートがありますので、今後の機能追加に期待して、連携を開始しておくのもひとつの選択肢です。

ClarityとGA4を連携と使い分けについて

その他の設定

• チーム管理: [設定] → [チーム] から、他のユーザーを招待してプロジェクトへのアクセス権（管理者/メンバー）を付与できます。
• カスタムタグ/カスタムフィルター: 高度な分析のために設定します（詳細はカスタムタグのテーマを参照）。

これらの設定を行うことで、Microsoft Clarityをより安全かつ効果的に活用する準備が整います。

設定が完了したら、使い方（運用方法）をみてみましょう。