技術情報

ページヘッダーがヒートマップ全体の上に表示されている場合、ヒートマップを修正するにはどうすればよいですか?

 

ウェブサイトが「視差スクロール」を使用している場合、またはページの一部がブラウザの高さの100%に設定されている場合、ヒートマップサンプルが正しく表示されないことがあります。通常、ヘッダーはヒートマップ全体に引き伸ばされて表示され、ウェブページの他の部分は見えません。この問題を解決するには、CSSまたはJavaScriptを使用して、この要素に最大高さを設定します。例えば

.welcome { max-height: 1000px; }

ヒートマップだけにこのスタイルを設定したい場合は、セレクタの前に “html.matomoHeatmap “を付けます:

html.matomoHeatmap .welcome { max-height: 1000px; }

1000pxはあくまで一例であり、任意の高さに設定することができます。カスタムスタイルシートについて詳しくはこちら。

注:vh単位でエレメントの高さを設定すると、正確なスクリーンショットが撮れない場合があります。この場合、代わりに要素を特定のビューポート用の固定パーセントまたはピクセル高値に設定することができます。