ヒートマップとセッション録画のCORSの問題を修正する方法
ヒートマップやセッションを記録する際、MatomoはウェブページのCSS(カスケーディング・スタイル・シートはウェブサイトのデザインを定義します)をウェブページのコンテンツと一緒に保存し、CSSやCSSへのURLが変更されてもページが正しく表示されるようにします。
この機能を動作させるために、MatomoはCSSを読み込もうとします。DOMからCSSを読み取れない場合は、追加のHTTPリクエストを使ってコンテンツを取得しようとします。ほとんどの場合、これは動作します。しかし、CDN(コンテンツ・デリバリー・ネットワーク)からCSSを読み込む場合などには、以下のような特別な手順が必要になります。
ヒートマップやセッション録画が、スクリーンショットや録画を撮った後は正しく表示されるが、しばらくすると正しく表示されなくなる場合も同様です。
以下の手順に従って、ヒートマップとセッションの録音を再開してください。
- おすすめ:
CSSを取得するためにMatomoが余計なHTTPリクエストをするのを防ぐために、リンクタグのcrossorigin属性をanonymousに設定してください。こうすることで、MatomoがCSSを取得するスピードが格段に速くなります。例
<link 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 としてヘッダを設定する必要があります。このヘッダを変更するには、システム管理者またはホスティングプロバイダに問い合わせてください。このヘッダーはCSSファイルのみに設定する必要があります。