技術情報

ヒートマップやセッション録画のスタイルが設定されておらず、CSSやフォントアイコンがないように見える場合はどうすればよいですか?

 

Matomo がヒートマップやセッション録画のためにアクティビティを記録するとき、あなたのウェブサイトの HTML は記録され、ヒートマップや録画されたセッションを表示するときに表示されます。ただし、Web ページに埋め込まれている CSS や画像は、Web サイトから読み込まれます。

  • 記録された HTML 内に埋め込まれているCSS または画像ファイルを Web サイトから削除した場合、ヒートマップまたはセッション記録でスタイルが表示されなくなる可能性があります。ただし、生成されたヒートマップ データまたは記録されたセッションは、最大限の精度で特別な方法でアクティビティを追跡するため、正しく表示されます。 Matomoは各ウェブページのCSS全体をデータベースに保存しようとします。別のドメインから CSS をロードする場合、これが機能しない場合があります。異なるドメインから cache/223ks2j3jdmam4.css のようなユニークなファイル名のキャッシュ CSS バージョンを読み込んでいて、この CORS 問題を修正できない場合は、HTML 構造を変更し、data-matomo-href 属性を設定することで、キャッシュされていない CSS バージョンまたは常に存在する CSS ファイルを読み込むように Matomo に指示できます: <link href="cache/223ks2j3jdmam4.css" data-matomo-href="uncached.css">.
    この場合、Matomoはヒートマップを表示するときにuncached.cssファイルをロードします。
  • 失われたCSSファイルが復元された場合、またはページの構造に変更が加えられていない場合は、Matomoで既存のヒートマップのスクリーンショットを削除することを検討してください。Matomo は、利用可能になった CSS を含む新しいスクリーンショットを再生成します。ヒートマップスクリーンショットを強制的に取得するには、URLに.pk_hsr_forcesample=1を追加します。
  • CSSファイルを削除していないにもかかわらず、ヒートマップやセッション録画のスタイルが変更されない場合、ウェブサイトがHTTPSをサポートしていない可能性があります。.この場合、”https://”ではなく、”http://”経由でMatomoにアクセスしてみてください。スタイルシートが適用されていることを確認するために、”https://” 経由で Matomo を使用し続け、ウェブサイトの HTTPS 証明書を作成することをお勧めします。ヒートマップ用の Matomo の URL 設定に注意することが重要です。 “equals simple”オプションと“equals exactly” オプションは Matomo がどのように URL をマッチさせるかを定義します。“equals simple”を選択すると、プロトコル(HTTPまたはHTTPS)、URLパラメータ、およびパスの末尾のスラッシュは無視されます。これにより、ページURLの異なるバージョンをより簡単に一致させることができます。逆に、”equals exactly “を選択すると、プロトコル、URLパラメータ、末尾のスラッシュを含めて、URLの値が正確に一致しなければなりません。
  • CSSファイルを削除しておらず、ウェブサイトがHTTPSをサポートしているにもかかわらず、CSSやフォント、フォントアイコンの一部がヒートマップやセッション記録に読み込まれていない場合、ウェブサイトが Matomo インスタンスと異なるドメイン名にある場合問題は、ウェブサイトがクロスドメインリクエスト(CORS)を許可していないことかもしれません。これが問題であることを確認するには、ヒートマップまたはセッション記録を表示するときに、ブラウザの開発者コンソール(「コンソール」と「ネットワーク」タブ)で、エラーが表示されているかどうかを確認してください:Access to Font at https://website.com from origin https://piwik.example.com has been blocked by CORS policy:
    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://piwik.example.com' is therefore not allowed access.

    ブラウザでこのエラーが表示された場合の解決策は、ウェブサイトを設定し、HTTPヘッダーを出力してCORSを有効にすることです。Access-Control-Allow-Origin: * を使う代わりに、あなたのウェブサイトのレスポンスに*CSS ファイルの Matomo トラッキングドメインを定義します。Access-Control-Allow-Origin: https://matomo.example.com.(詳細はウェブマスターにお問い合わせください)
  • プライバシーバジャーなどのブラウザ拡張機能またはその他のアドブロッカーを使用している場合、ウェブサイトのリソースの読み込みをブロックしている可能性があります。Matomoのドメイン名またはURLの拡張子を無効にして、ページを更新してみてください。
  • ヒートマップまたはセッション録画のスタイルがまだ設定されていない場合は、お問い合わせください、調査します。