スクロール深度
対象プランすべてのプラン
スクロール深度は、訪問者がページのどこまで下に進んだかを示します。ページビューを記録するのと同じスクリプトで計測するため、追加のリクエストは発生しません。Cabinのほかのデータと同じく匿名です。
計測する内容
各訪問では、到達したいちばん深い位置を、ページのコンテンツに対する割合として記録します。この値は、訪問者がページを離れるときに一度だけ送信されます。
割合はドキュメント全体ではなく、ページのコンテンツを基準に計算します。そのため、長いフッターがあっても、最後まで読んだ訪問が75%のように見えることはありません。詳しくはページとして扱われる範囲をご覧ください。
確認できる場所
ダッシュボードでは、Attention（注目）の行にサイト全体の平均スクロール深度が表示されます。その横の細い帯はページを図にしたもので、上部は濃く、訪問者が離れていくにつれて下に向かって薄くなります。帯の各部分にカーソルを合わせると、そこまで到達した訪問者の正確な割合が表示されます。
**ページのプレビュー（peek）**では、Top Pagesから任意のページを開いてAttentionタブに切り替えると、そのページの同じ数値と、帯を大きくしたリスト表示を確認できます。
ヒートマップの見方
各行は、ページのその位置まで少なくとも到達した訪問者の割合です。0%の行は全員で、そこから下の行は減る一方です。
2つの行の差が、訪問者が読むのをやめた位置です。上のほうで大きく減っていれば、ほとんどの訪問者がスクロールしなかったということです。100%の行がほかの行とあまり変わらなければ、読み始めた人の多くが最後まで進んだということです。
100%に到達したというのは、コンテンツの末尾が画面に表示されたという意味で、読まれたという意味ではありません。いきなり末尾まで飛ばした人も数に入ります。
ページとして扱われる範囲
Cabinは、次の順番で見つけたコンテンツブロックを基準に深さを計測します。
data-cabin-contentが付いた要素（追加している場合）- それがなければ、最初の
<article>または<main> - それもなければドキュメント全体（最初の
<footer>の手前まで）
レイアウトに<article>や<main>がない場合や、それらが記事本文だけでなくサイドバーやコメントまで囲んでいる場合は、コンテンツの位置をCabinに教えてください。
<div data-cabin-content>
<!-- 記事本文 -->
</div>これはスクロール深度が認識する2つの属性のうちの1つです。もう1つは次のセクションで説明します。
アプリ、ダッシュボード、パネル
ほとんどのサイトはウィンドウ全体がスクロールします。一方、アプリではヘッダーとサイドバーを固定し、中央のパネルだけをスクロールさせることがよくあります。Cabinは実際に動いている方を追いかけるので、ダッシュボード風のレイアウトも通常のページと同じように計測され、特に何もする必要はありません。
レイアウトが特殊で、Cabinが違う要素を選んでしまう場合は、正しい要素を指定してください。
<div data-cabin-scroll-root>
<!-- ページ内でスクロールする部分 -->
</div>2つの属性
スクロール深度に関係する属性はこの2つだけで、それぞれ別の問いに答えます。
| 答える問い | 追加するタイミング | |
|---|---|---|
data-cabin-content | ページのどの部分をコンテンツとして扱うか | ページに<article>や<main>がない場合、またはそれがサイドバーやコメントまで囲んでいる場合 |
data-cabin-scroll-root | どの要素がスクロールするか | アプリのレイアウトでCabinが違うパネルを選んでしまう場合 |
言い換えると、スクロールルートはスクロールバーがある場所で、コンテンツはその中で計測したい部分です。通常のサイトでは、スクロールルートを意識することはありません。答えはウィンドウで、ほかに指定がない限りCabinはウィンドウを使うからです。
<body>
<header>固定、スクロールしない</header>
<div data-cabin-scroll-root>
<!-- 動く部分 -->
<article data-cabin-content>
<!-- 計測の対象になる部分 -->
</article>
<footer>背が高いが、読了の計測には含めない</footer>
</div>
</body>2つは独立しているので、片方だけが必要な場合もありますし、ほとんどのサイトではどちらも不要です。それぞれ、最初に指定された要素だけが使われます。
スクロールするほど伸びるページ
スクロール深度は割合なので、分母となる全体の長さが必要です。記事なら全体の長さは決まっているので、数値は見たとおりの意味になります。
フィードやLoad more（もっと見る）ボタンがあるページでは、訪問者が読んでいる間にページが長くなります。全体の長さが変わり続けるので、割合もそれにつれて変わります。
- ある人が、読み込まれた部分の末尾まで読みます。これで100%です。
- Load moreを押します。ページは3倍の長さになり、新しく増えた部分はまだ読んでいません。
- この時点で33%になります。
数値が間違っているわけではありません。読み込まれていた範囲のうち、どこまで進んだかを正しく表しています。ただし、訪問者が熱心に読み進めるほど割合が下がることがあり、読者より先に次々と読み込むフィードでは誰も末尾に届かないため、100%には実質的になりません。
代わりにできること
こうしたページでは、割合を見るよりも読み込み回数を数えましょう。ボタンにイベントを設定します。
<button data-cabin-event="Load more">Load more</button>これで、訪問者が続きを求めた回数がわかります。本当に知りたかったのはこちらのはずです。この数は関心が高まるほど増え、減ることはありません。
こうしたページでもスクロール深度の数値は参考になりますが、「どこまで下に進んだか」としては読まないでください。
計測されないもの
- 画面より短いページ。 スクロールする余地がないため、その訪問は計測なしとして記録され、集計から除かれます。コンテンツブロックが画面にすべて収まるほど短いページも同様です。計測できるスクロールがないので、誰も読んでいない読了を報告する代わりに、ページ全体を基準にした計測に切り替えます。
- 突然終わった訪問。 計測値は訪問者がページを離れるときに送信されますが、ブラウザによってはスクリプトにその機会を与えません。そのため、スクロール深度は（ページ滞在時間と同じく）訪問の一部をサンプルとした値になります。計測できた訪問の数は、平均値の下に表示されます。
- ボットやスクレイパー。 これらはスクリプトを実行しません。AIクローラーはAI Agent Traffic（AIエージェントのトラフィック）で別に集計されます。
プラン
スクロール深度は、Freeを含むすべてのプランで利用できます。この機能の公開以降、すべてのサイトで記録されているので、ダッシュボードを初めて見る場合でも、すでに過去のデータがあるかもしれません。