ウェブサイトにヒートマップを設定する場合、ポップアップや機密情報を含む可能性のある要素など、特定の要素を非表示にする必要があることがよくあります。
このプロセスを簡素化し、繰り返しのコンフィギュレーションを避けるために、3つの主要な解決策を採用することができます：カスタム・スタイルシートの作成、要素に対するCSSセレクタの指定、data-matomo-mask属性の追加です。

カスタムスタイルシート

ヒートマップの設定を効率化するには、CSSでカスタムスタイルシートを定義することを検討してください。これにより、非表示にしたい要素のCSSをあらかじめ設定しておくことができ、ヒートマップを作成するたびに設定を繰り返す必要がなくなります。

CSSセレクタの使用

隠す要素をピンポイントで指定する場合は、ほとんどのモダンブラウザで利用できる「要素の検査」機能を使います。隠したい要素を右クリックして「要素を検査」を選択し、検査パネル内で同じ要素を右クリックします。コピー > セレクタ/CSSセレクタをコピー」を選択し、特定の要素のCSSセレクタを取得します。次に、この情報をヒートマップ設定の「除外要素」フィールドに貼り付けます。

例えば：
1.こんなクラスがある：
<div class="user-details">Secret number: 12345 Password: ******</div>
2.ユーザー・インターフェースでこのフィールドを除外することができる：
ダッシュボード >> ヒートマップ >> ヒートマップの編集 >> 詳細オプション >> 除外要素。
– 機能しない：ユーザー詳細
– 動作： div.user-details

マスキングHTML属性の使用

data-matomo-mask属性は、ヒートマップやセッション録画で追跡されるべきでないHTML要素に追加することができます。この属性は、HTML要素自体に追加するだけです。

例えば、text要素には次のように追加することができる：
<p class="my-class" id="my-id" data-matomo-mask>

特定の要素が追跡されないようにするための詳細については、当社のヒートマップ・ガイド “ウェブサイトのマスキング・コンテンツ”をご覧ください。