スクロールヒートマップは、訪問者がページをどの深さまでスクロールするか、そしてどこで読むのをやめるかを明らかにします。これらを使って、ページの上部に何があるべきか、およびページの長さが合理的にどのくらいになるかを決めるのに役立ちます。
スクロールヒートマップとは何か?
スクロールヒートマップは、単一ページの深度表示です。個々のクリックをプロットする代わりに、ページのスクリーンショットの上に水平バンドを描画し、各深度に達したページビューの割合によって色付けされます。ページの上部はすべての人に到達するため、最も熱くなります。下へ行くにつれて色が冷え、より少ない人がそこまでスクロールします。
| 要素 | それが教えること |
|---|---|
| 深度バンド | 各深度に存在するビューの割合 |
| 深度ルーラー | ページの25%、50%、75%で、その地点に到達したビューの割合 |
| 平均深度マーカー | 訪問者がこのページで到達する平均深度 |
色スケール
オーバーレイはクリックヒートマップと同じ連続熱ランプを使用し、スクロール用に再度ラベル付けされます。ヒートマップの下の凡例は、一方の端でビュー数が少ない、もう一方の端でビュー数が多いを示します。上部付近の暖色バンドは、ほとんどの訪問者がそのコンテンツを見たことを意味します。下の冷色バンドは、より少ない人がそこまでスクロールしたことを意味します。
スクロールヒートマップへのアクセス
ヒートマップは有料機能であり、ProおよびProより上で利用できます。
ヒートマップを開く
サイドバーからヒートマップを選択するか、ウェブサイトのダッシュボードを開いてヒートマップタブを選択します。
ページを選択
左側のパネルには、データを収集したページが表示されます。検索ボックスを使用してフィルタリングし、ページをクリックして読み込みます。
スクロールに切り替える
ヒートマップの上で、クリック/スクロールトグルを使用して、同じページのスクロール深度ビューに切り替えます。
表示の理解
深度バンド
スクロールヒートマップは、ページのスクリーンショットを滑らかな垂直グラデーションでオーバーレイします。バンドの色は、少なくともその深度までスクロールしたページビューの割合をエンコードします。そのため、オーバーレイは上部の熱い(すべて)から下のさらに冷たい(少数)へとフェードします。
あなたは:
- オーバーレイの下の実際のページコンテンツを見ることができます
- 画面上のコントロールでズームイン・ズームアウトしたり、タッチデバイスでピンチしたりできます
- ズームイン後、ドラッグしてパンします
深度ルーラー
ページの高さの25%、50%、75%の破線ルーラーは、それぞれそのポイントでのリーチでラベル付けされます。例えば「62%のビューがここに到達しました」。これらはマウスを操作せずに具体的な読み取りポイントを提供します。
平均深度
スクロール分布から統合された、訪問者がこのページで到達する平均深度を示すマーカー。これは、典型的な訪問者が去る前またはやめる前にどこまで下がるかの素早いゲージです。
ヒートマップ上のヘッダーはデータを要約し、選択されたウィンドウ内のページビュー数をスクロール深度分布とともに表示します。
時間範囲
期間セレクタを使用すると、ヒートマップを最近のウィンドウに制限できます:7日、30日、90日、または6ヶ月。より長いウィンドウはより高いプランで利用可能です。ロックされたオプションはロックアイコンと、それらのロックを解除するために必要なプランを示します。
フルページビュー
フルページをクリックして、ページをフルスクリーンインスペクタで開きます。ズームとパンをするときに、スクロールバンドとルーラーはスクリーンショットを追跡します。これはインラインビューが窮屈な長いページに役立ちます。Escapeを押すか、終了をクリックして戻ります。
ページの分析
長文形式コンテンツ
記事とブログ投稿の場合:
- 読者はどこで停止しますか?
- ページは視聴者にとって長すぎますか?
- 画像と小見出しは人々をページを下に動かし続けていますか?
ランディングページ
コンバージョンページの場合:
- ほとんどの訪問者が停止する地点より上にCTAがありますか?
- どのくらいの人がさらに下のオファーに到達しますか?
- 脱落はどこに集中していますか?
電子商取引ページ
製品ページの場合:
- 訪問者はレビューと仕様に到達しますか?
- 購入ボタンはほとんどのビューの範囲内にありますか?
脱落の読み取り
暖色バンドから冷色バンドへの急激な遷移は、多くの訪問者がその深度で停止したことを意味します。段階的なフェードは正常なスクロールです。早期の崖は通常、ページのその時点でのコンテンツまたはレイアウトの問題を指しています。
早期脱落の一般的な原因:
| 原因 | 試すこと |
|---|---|
| 弱いコンテンツ | オープニングを改善し、密なテキストに分割します |
| 読み込みが遅い | 重い画像とスクリプトを最適化します |
| タスク完了 | 訪問者が彼らが来たものを得たかもしれません |
| 邪魔な要素 | 再配置するか削除します |
スクロール深度の改善
- 長いテキストを短いセクションに分割
- コピーのブロック間にビジュアルを追加
- 明確で説得力のある小見出しを使用
- 下のコンテンツへの好奇心を生成し、スクロールを続ける理由を作成します
ベストプラクティス
コンテンツプレースメント
深度データを使用してページを注文します。最も重要なコンテンツと主要なCTAが上部にあり、二次的なコンテンツが下にあります。
ページ長
意図に合わせて長さを一致させます。迅速なアクションのためにページを短く保ちます。コンテンツがスクロールを正当化し、深度データが人々が底に到達していることを示す場合、より長いページは良好です。
モバイル対デスクトップ
スクロール動作はデバイスによって異なります。意味のあるウィンドウでページをキャプチャし、クリックとセッションデータと比較して、訪問者がそれを実際にどのように移動するかを理解します。
他のデータとの組み合わせ
クリックとスクロール
同じページで両方のモードを使用します。スクロールは、どのコンテンツが表示されたかを示します。クリックは、どのアクションをドラッグしたかを示します。一緒に、ページがどのように機能するかの完全な画像を提供します。
セッション
深度パターンが質問を提起するとき、同じページの個々のセッション記録を見て、人々がどこで停止するかの「なぜ」を理解します。