こちらの記事では下記のような現象が発生した場合、原因と対処方法についてご説明いたします。
具体的な現象
- 写真や画像が破れ、文字だけが表示され、レイアウトが崩れている
- 一部のコンテンツがそもそも表示されない
- ページAのヒートマップにページBのコンテンツが表示されている
1、写真や画像が破れ、文字だけが表示され、レイアウトが崩れている
▼現象：ヒートマップを見たいページに下記のような現象は起きているのでしょうか？
写真や画像が割れてしまい、文字だけが残っているCSSが全く入っていないような素朴なページとなっている。
▼原因：考えられる原因は大体下記となります。
①ptengineからのリクエストが拒否された
ヒートマップを表示する際にptengineから計測中のページのサーバー側に
「画像や写真のファイルを読み込ませてください」とリクエストを送ります。
リクエストを送る際にptengineのドメインから計測中のドメインへ送りますので、
クロスドメインが発生します。
（＊クロスドメインは簡単にメインドメインが変わるというイメージです。）
このクロスドメインをリクエストの送り先のサーバー側で拒否された場合、上記のような現象が発生し、ヒートマップがうまく表示できなくなります。
（＊もしCDNなど第3方のサーバーを使っている場合、ptengineのリクエストは大体拒否されます。）
②CSSの中で相対パスを使っている
画像や写真をCSSファイルの中で相対pathを使って引用されている場合、ptengineがCSSを読み込む際にpathを特定できなく、迷ってしまい、上記の現象が起きてしまいます。
③CSSファイルの読み込みが失敗
ページが千差万別ですのでCSSファイルの読み込み失敗の原因も色々あります。
中では上記①と②と同じ原因になる可能性もあります。
▼対処方法(対処しやすい順)
⑴ウェブビューでヒートマップを見る
⑵サーバー側の原因ではない場合、ptengineに連絡してください。有料ユーザーでしたら特殊対応します
⑶サーバーの設定を変更する
2、一部のコンテンツがそもそも表示されない
▼現象：あるコンテンツをヒートマップ上ではブランクになっている
例
・通常のページ
・ヒートマップで見るとき：右の画像がなくなっている
▼原因：lazyload機能
ページのデフォルトの状態ですと一部の要素が隠れていますが、その要素の位置までスクロールしたら初めて表示されるという場合、上記の現象が起こりえます。
ptengineのヒートマップではスクロールを識別できませんため、ブランクのままのヒートマップを生成してしまいます。
▼対処方法
⑴有料ユーザーさんはptengineに連絡してください。特殊対応します。
⑵無料ユーザーさんはウェブビューにてご確認ください。
3、ページAのヒートマップにページBのコンテンツが表示されている
▼現象：ページAのヒートマップを開いたら、そこに出るはずのないページBのコンテンツや内容が表示されている
例
・ページAの通常の画面
・ページAのヒートマップ画面：右側の画像がページBの内容
▼原因：ptengineからのリクエストが拒否された
上記1の原因①と同じ原因です。ptengineから送ったリクエストが拒否された後、デフォルトで読み込みできる内容を表示させますため、このような現象が起きてしまいます。
▼対処方法
⑴ウェブビューでヒートマップを確認する
⑵サーバーの設定を変更する