スクロール深度
Zenovayは、すべてのページビューで各訪問者がどこまでスクロールしたかを記録します。ダッシュボードの3つの画面がこのシグナルを実用的な情報に変えます:
- 「ページ」タブ — スクロール深度ファネル: 各ページごとに、5本の棒からなる小さな「降りる階段」チャート。棒の高さが、各ページの 25 / 50 / 75 / 90 / 100% に到達した訪問者の割合を示します。
- ヒートマップビュー — スクロールモード: ページのスクリーンショット上にグラデーションオーバーレイを描画します。
- セッション詳細 — 最大スクロール深度: セッション時間と閲覧ページ数の横に表示されます。
計測内容
すべてのページビューにおいて、トラッカーは訪問者がスクロールするあいだ (scrollTop + viewportHeight) / documentHeight × 100 を継続的に測定します。セッション中に到達した最深値が訪問者レコード(visitors.scroll_depth_percentage、0-100 の整数)に保存されます。ページの総高さはスクロールイベントごとに再計算されるため、動的コンテンツ(無限スクロール、アコーディオン、遅延読み込み画像)も自然に処理されます。
加えて、トラッカーは5つのプラン定義しきい値で 一度だけ発火するマイルストーンイベント を送信します:
| マイルストーン | 発火タイミング | 保存形式 |
|---|---|---|
| 25% | scroll_percent >= 25 に初めて到達 | event_type='scroll_milestone', event_data.depth=25 |
| 50% | scroll_percent >= 50 に初めて到達 | … depth=50 |
| 75% | scroll_percent >= 75 に初めて到達 | … depth=75 |
| 90% | scroll_percent >= 90 に初めて到達 | … depth=90 |
| 100% | scroll_percent >= 100 に初めて到達 | … depth=100 |
セッションで一度マイルストーンが発火すると再発火はしません — 上下にスクロールしても重複しません。SPA のルート変更(pushState / replaceState / popstate)時には、マイルストーンの到達状態がリセットされ、新しいルートで最初から計測されます。
スクロール深度トラッキングは ヒートマップ機能 の一部で、Pro プラン以上で利用できます。Free プランのウェブサイトではスクロールイベントを記録しません。
「ページ」タブのファネルチャート
ドメインのダッシュボード → 「ページ」 タブを開きます。「ページ / 位置情報 / システム」カードの下に、フル幅のウィジェット スクロール深度ファネル が、上位10ページを1ページあたり1行で表示します。各行の中央には小さな5本バーのミニチャートが描画されます。バーは共通のベースラインに揃えられ、単一のアクセントカラーを使用します — 高さ が各マイルストーンの到達割合を表します:
- 25% — 高さ ∝ ページの1/4以上に到達したページビューの割合
- 50% — 半分
- 75% — 3/4
- 90% — ほぼ末尾
- 100% — 完全な末尾(下記の 実用的な100%トレランス を参照)
スクロール深度は 単調 であるため(50%に到達した割合は常に25%に到達した割合以下)、バーは自然と左から右へ降下します。形そのもの — 降りる階段 — が視覚的なシグナルです。長い階段は深い読了を、短い階段は上部での離脱を意味します。
割合は選択した期間における該当ページの visitors.scroll_depth_percentage から計算されます。マイルストーンごとの正確な値は棒の下に常に表示されます — ホバー不要です。期間中のページビューが10未満のページ(または実質的にスクロール・エンゲージメントがないページ)は low signal と表示され薄く表示されるため、ビューを支配しません。
サブドメインの区別
トラッキングコードが複数のサブドメインで利用されている場合(例:zenovay.com と docs.zenovay.com が同じトラッカーを指している)、サブドメイン × パスの組み合わせごとに別々の行が表示されます。ホスト名は太字のパスの前に控えめなプレフィックスとして表示され、zenovay.com/en/ と docs.zenovay.com/en/ を一目で見分けられます。
デフォルトでは 上位5ページ が表示され、「Show all」ボタンで残りを固定高さのスクロール領域内に展開できます。カードの高さは隣接するカードと同じに保たれます。
実用的な100%トレランス
トラッカーは (scrollTop + viewportHeight) / documentHeight × 100 でスクロール率を計算します。視覚的な末尾では、サブピクセルレンダリングとモバイルアドレスバーのリサイズの影響で、計算結果はちょうど100ではなく 99.7-99.9% で頭打ちになることがよくあります。そのためトラッカーは、ビューポートの底がドキュメントの底から 2 px 以内にあるとき 100にスナップ し、Zenovay のダッシュボードは scroll_depth_percentage ≥ 95 を「100%に到達」とカウントします。スナップ修正前に記録された履歴データも同じトレランスが遡及適用され、「100% 到達」列は構造的なゼロではなく実際のエンゲージメントを示します。
読み方
| パターン | 想定される原因 | 対策 |
|---|---|---|
| 80% / 45% / 18% / 6% / 0% | 健全なファネル; 長文コンテンツの部分的な読了 | 25-50%帯のコンテンツを最適化 — 多くの人が見る箇所 |
| 95% / 90% / 80% / 70% / 50% | 非常に短いページか、高い読了率 | 末尾の CTA が実際にビューポートに収まるか確認 |
| 30% / 5% / 1% / 0% / 0% | スクロール前にバウンス | ファーストビューのコピー、読み込み時間、レイアウトシフトを調査 |
セールスページで 19%(75%)→ 6%(90%)の落ち込みは最もよくある診断シグナルです — 末尾の何かが CTA に到達する前に読者を失っています。
スクロールヒートマップオーバーレイ
ヒートマップ ビューでは、ヘッダーのセグメントコントロールで クリック と スクロール を切り替えます。スクロールモードはスクリーンショットの上に勾配オーバーレイを描画します。各高さの色は、その点に到達した訪問者の割合を符号化します。
ページ上部はすべての訪問者が到達するため、スクリーンショットの上端は常に最も「熱い」色になります。割合が下がるにつれて勾配が冷えていきます。鋭い遷移は「離脱点」であり、通常は特定のデザイン要素(ヒーローの終端、レイアウトシフト、重い広告ブロック)に対応します。
スクロールヒートマップには ページのスクリーンショット が必要です。ヒートマップが有効化された最初のページビューでスクリーンショットが自動取得されます。有効化後、数分お待ちください。
セッション詳細の最大スクロール深度
ライブ globe や訪問者リストからセッションを開くと、サイドパネルに 閲覧ページ数 と セッション時間 の横に 最大スクロール深度: X% が表示されます。
長文ページで 12% の場合はバウンスの可能性が高いです。長文ページで 100% の場合はセッション時間に関係なく非常に高いエンゲージメントを示します — 全文を読み切っています。
プライバシーと同意
スクロール深度の追跡は、ページ読み込みごとにトラッカーのインメモリ状態のみに保持されます。Cookie や localStorage への書き込みは行われないため、Cookie 同意バナーの影響を受けません。Sec-GPC(Global Privacy Control)を送信するサイトでは、マイルストーンの取り込み経路はサーバー側でスキップされます — 訪問者単位の最大スクロールだけが保持され、GPC でないトラフィックと同じデータです。