Microsoft Clarityの導入方法｜タグ設置から録画確認までの手順

Microsoft Clarityの導入は、コードを貼っただけでは完了しません。

対象のページでタグが動き、必要な情報が隠され、テスト訪問を録画で確認できるところまで進めましょう。

設置方法を先に決めず、GTM、プラグイン、共通テンプレートへ重ねて追加すると、あとから管理場所が分からなくなります。

この記事では、既存の設置を調べるところから、手動でのタグ追加、通信と録画の確認、担当者への引き継ぎまでを説明します。

主に、サイトのHTMLや共通テンプレートを変更できる担当者を想定しています。

GTMを使っているサイトでは、その運用へ合わせて設置方法を選んでください。

2026年10月5日に確認したMicrosoftの公式資料を基に、実施する操作と確認項目を整理しています。

確認表のURL、時刻、担当者は、説明用の架空例です。

Microsoft Clarityの導入方法を選ぶ

手動設置とGTMを分ける

最初に確認するのは、現在のサイトで誰がタグを管理しているかです。

共通テンプレートを制作会社が管理しているなら、手動設置の変更依頼が必要になります。

広告や分析タグをGTMへまとめているなら、Clarityも同じ管理経路へ寄せると、公開履歴を追いやすくなります。

Microsoftは、手動設置に加え、対応プラットフォームやNPMを使う方法を案内しています（参考：Microsoft Learn：Clarityのセットアップ）。

いずれの方法でも、サイト側の変更権限とClarity側のプロジェクト権限は別です。

現在の運用	検討する方法	確認する担当者
共通HTMLを直接管理	公式コードを共通テンプレートへ設置	開発・制作担当
タグをGTMで管理	GTM経由で設置	コンテナの公開担当
CMSの専用連携を利用	対応プラグインなどの手順を確認	CMS管理者
JavaScriptアプリで管理	対応パッケージや既存の実装へ統合	アプリの開発担当

GTMでは、公式テンプレートを使ってプロジェクトIDを指定する方法もあります（参考：Microsoft Learn：Google Tag Managerへの導入）。

ただし、GTMがあるという理由だけで、全ページへ無条件に追加する必要はありません。

計測対象、同意の扱い、除外する画面を先に決めます。

管理画面や機密情報を扱う画面を含む場合は、公開ページとは別に設置の可否を検討してください。

以降は、手動設置を選んだ場合の進め方を中心に説明します。

同じタグの二重設置を避ける

追加する前に、既存のClarityタグがないかを調べます。

確認する場所は、CMSのプラグイン一覧、GTMのタグ一覧、サイトの共通テンプレートです。

制作会社が設定したコードが残っていることもあります。

「自分は入れていない」と「サイトに入っていない」は別だと考えてください。

次の表を埋めると、変更する場所を決めやすくなります。

設置候補	現在の有無	確認するもの
共通テンプレート	あり・なし・未確認	ClarityのコードとID
GTM	あり・なし・未確認	タグ名、ID、発火条件
CMS連携	あり・なし・未確認	プラグイン設定、接続先
別の配信経路	あり・なし・未確認	埋め込みスクリプト、担当者

既存タグが見つかったら、すぐに消さず、どのプロジェクトのために動いているかを照合します。

引き継いだ計測を止めたり、別の担当者が使うデータを失ったりしないためです。

同じプロジェクトのタグを追加する必要があるのか、既存設定の確認だけで済むのかを切り分けます。

ブラウザの通信に複数のcollectリクエストがあることだけで、二重設置とは判定できません。

操作に伴う送信と、コードを重複して読み込んでいる状態は分けて調べてください。

Microsoft Clarityのプロジェクトを準備する

対象サイトのURLを登録する

Clarity公式サイトからサインインし、対象のプロジェクトがすでにあるか確認します。

既存のプロジェクトへ参加する場合は、新規作成より先に管理者へ招待を依頼します。

新規に作る場合は、ProjectsのNew projectから名前とWebサイトの情報を入力します（参考：Microsoft Learn：プロジェクト作成）。

プロジェクト名は、会社名だけでなく、対象サイトと環境が分かる形にすると管理しやすくなります。

例えば「サービスサイト・本番」「検証サイト・テスト用」のように区別します。

これは命名の例であり、Clarityの入力形式として必須の書式ではありません。

項目	架空の記入例
プロジェクト名	相談サービスサイト・本番
対象URL	https://example.com/
対象環境	公開用の本番サイト
計測する範囲	サービス・料金・相談フォーム
計測しない範囲	社内用画面、検証ページ

URLを登録しただけで、サイトへタグが設置されるわけではありません。

また、登録したURLが、すべての取得範囲を自動で制限する設定だと思い込まないようにします。

実際にコードを配置するページや、タグの発火条件で確認してください。

プロジェクトIDは、設定画面と設置するコードの対応を確かめるために記録しておきます。

Microsoftは、18歳未満を対象とするサイトやアプリでClarityを使わないよう案内しています（参考：Microsoft Learn：導入対象の注意事項）。

設定を変更できる担当者を決める

Clarityの設定変更には、プロジェクトのAdmin権限が必要です。

Team memberは記録の閲覧などができても、管理設定を変更する役割とは異なります（参考：Microsoft Learn：チームの権限）。

導入時に、少なくとも次の役割を決めます。

• タグをサイトへ反映する担当者
• マスキングや同意の設定を管理する担当者
• 記録を確認し、改善へつなげる担当者

同じ人が兼ねる場合でも、誰へ連絡すればよいかを残します。

制作会社へ任せる場合は、納品時にプロジェクトへ入れるかも確認してください。

共有用のパスワードを配るより、チーム招待で必要な担当者を追加する形にします。

招待後は、相手が受諾して対象プロジェクトを開けるところまで確かめます。

管理者が交代するときは、後任へ必要な権限を渡してから引き継ぎます。

プロジェクトが見つからない場合は、Clarityのログインと権限の確認手順を参照してください。

Microsoft Clarityのタグをサイトに設置する

公式画面からコードを取得する

対象プロジェクトを開き、SettingsからSetupへ進みます。

手動設置のGet tracking codeを選び、表示されたコードをコピーします。

Microsoftの公式手順では、サイトのhead要素の中へそのコードを配置します（参考：Microsoft Learn：手動設置）。

コードは検索で見つけた他人の例ではなく、自分のプロジェクトで取得してください。

記事内のサンプルIDを、そのまま本番に入れることも避けます。

共通テンプレートを編集できる場合は、対象ページに一度だけ出力される場所を選びます。

全体のレイアウトと各ページの両方へ入れると、意図せず重複する可能性があります。

コードを追加する前に、変更するファイルと戻し方を確認します。

サイトに同意管理の仕組みがあるなら、その条件と整合する形で読み込ませる必要があります。

「headに置く」という設置位置の説明だけで、同意の扱いまで完了するわけではありません。

GTMやプラグインで設置済みなら、ここでさらに手動コードを追加しないでください。

採用した経路を一つ記録し、ほかの設置候補は確認済みとして残します。

対象ページへ反映されたか調べる

保存後は、管理画面の設定値だけでなく、利用者に配信されるページを確認します。

まず、公開URLを開き、意図した環境であることを確かめます。

プレビュー専用URLや検証環境だけに反映して、本番にも入ったと思い込まないようにしてください。

Chromeでは、開発者ツールのNetworkを開いてからページを再読み込みすると、読み込み時の通信を確認できます（参考：Chrome for Developers：Networkパネル）。

記録対象として許可された状態でページを操作し、Clarity関連のスクリプトとcollect通信を調べます。

Microsoftも、導入確認としてClarityへのPOSTリクエストを確認する方法を案内しています（参考：Microsoft Learn：設置の検証）。

collectという名前はほかの計測でも使われるため、名前だけで判断しません。

リクエストを開き、送信先のホスト、パス、メソッド、結果を確認します。

NetworkのStatusやInitiatorからは、失敗の有無や読み込み元を調べられます（参考：Chrome for Developers：通信の確認項目）。

通信が成功していても、録画が正しいプロジェクトに入ったかは、次の確認が必要です。

逆に、同意に応じてタグを読み込まない設計なら、未同意時に通信がないことは期待どおりの場合があります。

「通信があるか」だけではなく、「その状態であるべき動きか」を判断してください。

Microsoft Clarityの記録条件を点検する

マスキングを先に試す

本物の顧客情報を使って、記録できるかを試す必要はありません。

架空の名前や入力値を使い、入力欄だけでなく、確認画面や完了画面に表示される内容も確かめます。

Clarityは入力欄やドロップダウンをマスキングし、設定画面では全体のモードや対象要素を管理できます（参考：Microsoft Learn：マスキング）。

ただし、初期設定だけで、自社サイトのすべての機密表示を適切に処理できると考えないでください。

会員名、注文内容、自由記述の確認表示など、画面に出る情報を洗い出します。

確認する場所	架空のテスト内容	録画で確かめること
入力欄	テスト用の文字列を入力	値が読めないこと
確認画面	入力した内容の表示	保護対象が隠れていること
会員向け表示	テスト会員の名前	想定外に読めないこと
エラー表示	架空値で入力エラーを出す	不要な入力内容を露出しないこと

追加のマスクが必要なら、SettingsのMaskingで対象を指定する方法などを検討します。

設定変更は新しい記録に適用され、過去の録画へさかのぼって反映されるものではありません。

反映に時間がかかる場合もあるため、変更後に新しく行ったテスト訪問で確認します。

入力前の画面だけで終わらず、エラーや確認表示へ進んだ後も見てください。

URLや計測用の属性に機密情報を載せない設計も、画面のマスキングとは別に点検します。

同意の状態ごとに挙動を確認する

同意バナーが表示されていることと、その選択がClarityへ伝わることは別です。

Microsoftは、Consent Modeの設定と、CMPやAPIなどを通した同意状態の受け渡しを案内しています（参考：Microsoft Learn：同意管理）。

未選択、拒否、許可、許可後の撤回を分けて確認します。

次の表は、実際の設計に合わせて期待結果を記入するためのものです。

同意の状態	確認すること	記録欄
未選択	初期状態、Cookie、タグの動作	期待結果／実際の結果
拒否	拒否の信号、Cookie、通信	期待結果／実際の結果
許可	許可した用途と信号の一致	期待結果／実際の結果
許可後に撤回	状態の更新とCookieの扱い	期待結果／実際の結果

Cookieの使用を拒否した状態と、タグも通信も完全に停止した状態は、必ずしも同じではありません。

ClarityのConsent Modeでは、同意状態に応じてCookieを使わないデータ収集となる場合があります。

自社の要件が「同意前はタグ自体を読み込まない」であれば、その条件も実装側で確認します。

Consent Modeの公式資料には、同意状態の確認と、ClarityのCookieが書かれていないかを調べる手順があります（参考：Microsoft Learn：Consent Modeの検証）。

また、同意が得られない場合は、複数ページの訪問を一つのセッションとして扱う機能などに影響が出ます（参考：Microsoft Learn：Cookie同意がない場合のレポート）。

記録が分かれる原因を、タグの故障だけに求めないようにしてください。

ここでは技術的な確認手順を扱っており、適用する同意や告知の要件は、運営方針と対象地域に合わせて別途確認します。

Microsoft Clarityの導入完了を確認する

自分のテスト訪問を探す

記録を探しやすくするため、操作を始める時刻とページの順番をメモします。

最初は複雑なテストより、識別しやすい短い操作にします。

例えば、サービス紹介から料金へ進み、相談フォームを開く流れです。

実際の注文や問い合わせが発生しない範囲で、必要な操作を選んでください。

テスト開始：10月5日 10:15ごろ
端末：手元のスマートフォン
ブラウザ：Chrome
同意状態：分析用途を許可
操作：サービス紹介 → 料金 → 相談フォーム
入力：架空の確認用データのみ
期待結果：対象ページが記録され、保護対象は読めない

これは記入例です。

ClarityのRecordingsを開き、時刻、端末、Visited URLなどで対象を絞ります（参考：Microsoft Learn：録画のフィルター）。

見つかった録画では、ページ順と操作を自分のメモに照合します。

似た時刻のほかの訪問を、自分のテストだと決めつけないようにしてください。

同意や記録条件により、ページごとに記録が分かれる場合もあります。

録画を開けたら、マスキングに加え、メニューや画面遷移の再現も確認します。

セッションリプレイは、画面を動画として撮影する方式とは異なり、取得したデータから表示を再構成します（参考：Microsoft Learn：セッション録画の概要）。

そのため、表示が崩れているときは、実際のページと録画の再現を分けて調べます。

記録がない場合の確認順を決める

記録がすぐ見えない場合でも、同じコードをもう一度追加しないでください。

どこまで確認できたかを整理し、欠けている段階から調べます。

確認段階	見るもの	次に調べる候補
ページへ出力されたか	実際のHTMLや読み込んだコード	対象テンプレート、公開先、キャッシュ
タグが動いたか	スクリプトと通信	発火条件、同意、ブラウザ側の制限
正しい接続先か	プロジェクトID	別環境・別プロジェクトとの取り違え
記録を探せるか	期間、端末、URL条件	絞り込み過多、反映待ち
再生できるか	録画の内容	取得不足、表示の再構成

Microsoftの設定トラブル案内でも、対象プロジェクトのコード、設置箇所、訪問の有無などの確認が挙げられています（参考：Microsoft Learn：設定のトラブルシューティング）。

フィルターを一度緩め、対象時刻の前後も探します。

その際、取得していないはずの環境が混ざっていないかも確認してください。

社内IPの除外設定を使っている場合は、自分のテスト訪問が対象外になっている可能性があります。

記録を見るためだけに、本番全体の除外や同意設定を無条件で解除しないようにします。

ブラウザ側の制限が疑わしい場合は、拡張機能などの条件が分かる管理されたテスト環境で比較します。

集計には出るのに再生できない場合、再構成に十分なデータがないケースもあります（参考：Microsoft Learn：ダッシュボードと録画の差）。

原因が分からないまま新しいプロジェクトを増やすより、現在のIDと確認結果をまとめて問い合わせるほうが、引き継ぎやすくなります。

Microsoft Clarityの設置後に引き継ぐこと

設置場所と変更日を残す

導入完了の記録には、「Clarity設置済み」以上の情報を残します。

別の担当者が同じ状態を確認できることを、完了の基準にしてください。

項目	残す情報
対象	サイト、環境、プロジェクト名とID
設置方法	手動、GTM、プラグインなど
設置場所	テンプレート、コンテナ、設定画面
公開	日時、変更内容、担当者
記録範囲	対象ページと除外するページ
保護設定	マスキング、同意の連携先
動作確認	テスト時刻、対象ページ、結果
引き継ぎ	管理者、分析担当、変更時の連絡先

GTMの場合は、コンテナやバージョンが分かる情報も残します。

手動設置なら、共通テンプレートのどこにあるかを記入します。

パスワードや個人の認証情報は、設置記録の本文へ書きません。

録画へのリンクを共有する場合は、閲覧可能な相手と有効期間を確認します（参考：Microsoft Learn：Clarityデータの共有）。

テスト結果を残すときも、顧客の実データを使った画面をそのまま貼る必要はありません。

架空データの確認画面と、合否・確認時刻があれば、設定の引き継ぎに使えます。

サイト改修後に再確認する

導入時に動いていても、その状態がずっと続くとは限りません。

テーマ変更、共通レイアウトの更新、同意バナーの変更などは、再確認のタイミングです。

CMSのプラグイン変更で、同じタグが別経路から追加される場合も考えられます。

次の確認を、サイト改修の公開手順へ入れておくと見落としを減らせます。

1. 対象プロジェクトのコードが一つの管理経路にあるか
2. 必要なページで動き、対象外の画面へ広がっていないか
3. 同意の未選択・拒否・許可・撤回で期待どおりか
4. 新しく追加した表示にもマスキングが適切か
5. 新しいテスト訪問を記録で確認できるか

特に、入力欄の後に確認画面を追加した場合は、その表示内容も再点検します。

SPAなど画面遷移の実装が変わった場合は、最初のページだけでなく、遷移後の記録を確認します。

「タグがある」というチェックと、「分析したい操作が確認できる」というチェックを分けることが大切です。

設置が終わったら、いきなり録画を全部見るのではなく、改善したいページを一つ選びます。

次の作業は、Clarityの録画から改善点を探す手順や、ヒートマップの読み方へ進めます。

設置場所、記録条件、テスト結果の三つが残っていれば、導入後も確認を続けやすくなります。