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

Microsoft Clarity カスタムタグ・カスタムフィルター

Microsoft Clarityのカスタムタグ(カスタムフィルター)機能を使うと、デフォルトで用意されている指標やフィルターだけでは捉えきれない、サイト独自のユーザー行動や属性データを計測・分析できるようになります。Googleタグマネージャー(GTM)との連携が推奨されます。

Microsoft Clarity のカスタムタグ&フィルター 全解説

カスタムタグとは?

任意のキー(名前)とバリュー(値)のペアを、特定のタイミングでClarityに送信する仕組みです。送信されたデータは、Clarityのフィルター機能で「カスタムフィルター」として利用でき、セッションの絞り込みやセグメント作成、ファネル設定に活用できます。

  • キー (Key): 送信するデータの名前(例)。pageCategory, ctaClicked, userLoggedIn
  • (※Clarityのフィルターで表示される名前になります。)

  • バリュー (Value): 送信する具体的な値(例)blog, true, member_rank_gold

カスタムタグの設定方法 (GTM利用推奨)

GTMを使ってカスタムタグを設定するのが最も一般的で効率的です。

方法1: Clarity公式タグのカスタムオプションを利用 (推奨)

  1. GTM変数準備: Clarityに送りたい値(ページタイトル、要素のテキスト、データレイヤー変数など)を取得するためのGTM変数を作成します。
    • 例: ページタイトルを取得するJavaScript変数 {{Page Title}} (値: document.title) を作成。
    • 例: データレイヤー変数 {{userStatus}} (ログイン状態など) を作成。
  2. Clarity公式タグ設定: GTMに設定済みの「Microsoft Clarity」(Official) タグを開きます。
  3. カスタムタグ追加: 「Custom Options」>「Add Custom Tags」で、送信したいキーとバリュー(GTM変数)のペアを追加します。
    • Key: pageTitle, Value: {{Page Title}}
    • Key: userStatus, Value: {{userStatus}}
    • Key: clickedCTA, Value: {{Clicked Element Text}} (クリックイベントトリガーと連携)
  4. トリガー設定: このタグが発火するトリガーを設定します。通常は「初期化 – All Pages」や「All Pages」ですが、特定のイベント(CTAクリックなど)発生時に特定のカスタムタグを送りたい場合は、別途トリガーを設定したタグを用意します。
  5. GTM公開: 設定を保存し、GTMコンテナを公開します。

方法2: カスタムHTMLタグで clarity("set", …) を実行

Clarity公式タグを使わない場合や、特定のイベント発生時にタグを送りたい場合に利用します。

  1. GTM変数準備: 方法1と同様。
  2. カスタムHTMLタグ作成: 新しい「カスタムHTML」タグを作成します。
  3. スクリプト記述: 以下の形式でスクリプトを記述し、キーとバリュー(GTM変数)を指定します。<script>
    if (window.clarity) { // clarityがロードされているか確認
    window.clarity("set", "キー名", "{{GTM変数}}");
    // 必要に応じて複数のキー・バリューペアを設定
    // window.clarity("set", "anotherKey", "{{anotherVariable}}");
    }
    </script>
  4. トリガー設定: このカスタムHTMLタグを発火させたいタイミング(例: ページビュー、特定のクリックイベント)でトリガーを設定します。
  5. GTM公開: 設定を保存し、GTMコンテナを公開します。

補足: luratic Microsoft Clarity タグテンプレート

非公式ですが、Clarity APIを簡単に利用できる luratic 作成のGTMタグテンプレートも存在します。公式タグと同様にカスタムタグ設定が可能です。

カスタムタグの活用例とオススメ指標

どのようなカスタムタグを設定すると分析に役立つかの例です。スマートイベントとして定義されていないイベントの取得や、目的やKPIに合わせて必要なものを設定しましょう。

  • ページタイトル (pageTitle): デフォルトではURLでしか絞り込めないため、ページタイトルでフィルタリングできるようにすると便利。「404 Not Found」ページの特定・分析にも役立ちます。
  • コンバージョン有無/種類 (conversion, conversionType): サンクスページ到達や特定ボタンクリックなどをトリガーに、コンバージョンが発生したか (true/false)、どの種類のコンバージョンか(資料請求, 購入完了など)を送信します。ファネル設定やCVユーザー/非CVユーザーの比較分析に必須です。
  • CTAクリック (ctaClicked, clickedElementName): 主要なCTAボタンがクリックされたか (true/false)、どのボタンがクリックされたか(ボタンテキストや要素IDなど)を送信します。特定のCTAに反応したユーザー行動の分析に。
  • 要素表示 (elementVisible): 特定の要素(CTAボタン、重要コンテンツエリアなど)がユーザーの画面内に表示されたか (true/false) を送信します(GTMの要素の表示トリガー利用)。Clarityにアテンションヒートマップがないため、重要要素が見られているかの代替指標になります。
  • 動画再生率 (videoProgress): 埋め込み動画の再生状況(例: 25%, 50%, 75%)を送信します(GTMのYouTube動画トリガー利用)。動画コンテンツへの関与度が高いユーザーの行動分析に。
  • コンテンツグループ/カテゴリー (contentGroup, pageCategory): ページの所属カテゴリー(例: blog, product, service, corporate)を送信します。特定のカテゴリーに興味を持つユーザーの行動分析に役立ちます。GA4のコンテンツグループと同様の分析軸をClarityに持ち込めます。
  • ログイン状態/ユーザー属性 (loggedInStatus, userSegment): ログインしているか (true/false)、会員ランク、顧客セグメントなどを送信します。個人を特定できる情報(ユーザーID、氏名、メールアドレスなど)は絶対に送信しないでください。
  • 関係者識別 (stakeholder): Cookieなどを利用して関係者(社内スタッフなど)を識別するフラグ (true/false) を送信し、フィルターで除外するために使用します。 (設定方法(関係者を除外する4つの方法))
  • フォーム関連 (formInteraction, formErrorField): フォームの入力開始、特定のエラー発生などを送信します。フォーム改善に特化した分析が可能になります。

補足:Microsoft Clarity スマートイベント

スマートイベントは、セッション中に発生するユーザーの特定の行動(例:クリック、ページ遷移など)を複数のシグナルを組み合わせて自動的に検出し、「購入」「お問い合わせ」「カートに追加」などの直感的なイベントとして記録・分類する機能です。

デフォルトで取得されるイベント例
Purchase
Add to Cart
Begin Checkout
Contact Us
Submit Form
Request Quote
Sign Up
Login
Download

引用・参考:Microsoft Learn – Smart Events

カスタムタグの確認と利用

  • GTMプレビュー: 設定後、GTMのプレビューモードで意図したタイミングでタグが発火し、正しい値が送信されているか(データレイヤー等で)確認します。
  • Clarityでの反映: GTM公開後、約30分〜2時間程度でClarityにデータが反映され、「カスタムフィルター」セクションに設定したキー名が表示されるようになります。
  • 活用: 反映されたカスタムフィルターを使って、レコーディングやヒートマップの絞り込み、セグメント作成、ファネルのステップ定義などに活用します。

注意点

  • 個人情報 (PII) の送信禁止: カスタムタグを使っても、ユーザーID、氏名、メールアドレス、電話番号などの個人を特定できる情報は絶対に送信しないでください。Clarityの利用規約違反となり、アカウント停止のリスクがあります。
  • キーとバリューの設計: どのような分析軸でデータを見たいかを事前に計画し、一貫性のある命名規則でキーとバリューを設定することが重要です。
  • GTMの知識: 効果的な設定にはGTMの変数、トリガー、データレイヤーに関する知識が必要です。

カスタムタグを使いこなすことで、Microsoft Clarityはより強力な分析ツールとなり、サイト改善のための深いインサイトを提供してくれます。

参考: Microsoft Learn – Custom tags API

 

ディー・エム・エヌ合同会社|dmn llc.

dmnwは渋谷・世田谷を主な拠点とするディー・エム・エヌ合同会社が提供する、ウェブマーケティングのワンストップサービスです。ホームページ・ランディングページはもちろん、SEO、リスティング運用もお任せください。

アンケート実施中!

ホームページ、LP、集客のお悩みはありませんか?

アンケートに回答して無料相談
アンケートに回答して無料相談