Matomo のヒートマップ機能を使用しているときに、ヒートマップが空白になったり、まったく何も表示されなくなったりすることがあります。以下は、空白のヒートマップを引き起こす可能性のある一般的な問題と、それを解決するための手順です。

HTTP/HTTPSの問題

HTTP/HTTPS 設定の問題により、ヒートマップが空白になることがあります。選択したプロトコル（HTTPまたはHTTPS）でウェブサイトにアクセスでき、ヒートマップで指定したURLがウェブサイトで使用されているプロトコルであることを確認してください。

ヒートマップのためのMatomoのURL設定に注意することは重要です。「equals simple 」オプションと 「equals exactly 」オプションは、MatomoがどのようにURLをマッチングするかを定義します。equals simple” を選択すると、プロトコル (HTTP または HTTPS)、URL パラメータ、パスの末尾のスラッシュは無視されます。これにより、異なるバージョンのページ URL をより簡単にマッチさせることができます。一方、”equals exactly “を選択すると、プロトコル、URLパラメータ、末尾のスラッシュを含め、URLの値が正確に一致する必要があります。

次のページでは、この機能を有効にするページを定義するために設定できるさまざまなルールについて説明します。ルールの種類は何を意味するのか？

CORS（クロスオリジン・リソース共有）の問題

ヒートマップが空白になるのは、CORS関連の問題が原因である可能性があります。ヒートマップを表示すると、ブラウザのウェブコンソールでエラーが発生することがあります：”CORSポリシーによってブロックされている：リクエストされたリソースに’Access-Control-Allow-Origin’ヘッダがありません。“このエラーは、MatomoのトラッキングコードがCORSの制限により、あなたのウェブサイトのリソースにアクセスできないことを示しています。

ブラウザのコンソールでCORSエラーが表示された場合の解決策は、Cross-Origin Resource Sharing (CORS)を有効にするようにウェブサイトを設定することです。これには、ウェブサイトのレスポンスに「Access-Control-Allow-Origin：*HTTP ヘッダを追加します。このヘッダは、Matomo のドメインがあなたのウェブサイトのリソースにアクセスすることを許可し、ヒートマップデータを適切に取得・表示できるようにします。このソリューションを実装するには、ウェブマスターまたは技術チームに連絡して、サーバーの CORS 設定をサポートしてもらう必要があります。

ヒートマップやセッションの記録中に、MatomoはウェブページのCSS（ウェブサイトのデザインを定義するカスケーディング・スタイル・シート）とそのコンテンツをキャプチャします。これにより、CSSやCSS URLが変更されても、適切な表示が保証されます。

Matomo はまず DOM (Document Object Model) から CSS を読み込もうとします。これが失敗すると、追加のHTTPリクエストでコンテンツを取得します。しかし、CDNからCSSを読み込むような状況では、追加のステップが必要になることがあります。

この問題を解決するには、リンクタグのcrossorigin属性をanonymousに設定することをお勧めします。
例

&ltlink rel="stylesheet" href="{PATH_TO_YOUR_CSS_FILE}" crossorigin="anonymous">

また、ウェブページがリクエストされたときに、ヘッダーにAccess-Control-Allow-Origin: {YOUR_DOMAIN}が設定されていることを確認してください。これにより、Matomo は HTTP リクエストを使って CSS を読み込むことができます。例https://www.example.com があなたの Matomo トラッキングドメインである場合、Access-Control-Allow-Origin: https://www.example.com としてヘッダを設定する必要があります。

参考までに：クロスオリジン・リソース共有.

100%エレメントの高さ問題

要素の高さ100%問題とは、ウェブページ上の要素の高さが100%として定義され、ヒートマップのレンダリングと競合する可能性がある状況を指します。これにより、ヒートマップ上に空白領域が生じる可能性があります。

この問題を解決するには、CSSまたはJavaScriptを使用して、この要素に最大高さを設定することをお勧めします。例えば

.welcome { max-height: 1000px; }

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

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

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

CSSフォーマットの欠落

ヒートマップは記録されていても、必要なCSS(カスケーディング・スタイル・シート)ファイルが欠落しています。その結果、不適切にレンダリングされたり、不完全なヒートマップが表示される可能性があります。

ヒートマップが期待通りに表示されない場合は、ウェブブラウザのコンソールで CSS ファイルが見つからないことを示すエラーがないか確認してください。これらのエラーは、ヒートマップのレンダリングに必要な特定のリソースを指している可能性があります。

これは通常、次の方法で解決できる：

欠けているCSSファイルを置き換える:Matomo が検索しているディレクトリに、存在しない CSS ファイルがあることを手動で確認します。このアクションは、正確なヒートマップレンダリングに必要なスタイル情報を提供します。

ヒートマップの再生成:失われたCSSファイルが復元された場合、またはページの構造に変更が加えられていない場合、Matomoで既存のヒートマップのスクリーンショットを削除することを検討してください。Matomo は、利用可能になった CSS を含む新しいスクリーンショットを再生成します。