2分で読めます

スクロール深度

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` に初めて到達	`event_type='scroll_milestone'`, `event_data.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ページで、中央に小さな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ページ が表示され、「すべて表示」ボタンで残りを固定高さのスクロール領域内に展開できます。カードの高さは隣接するカードと同じに保たれます。

実用的な100%トレランス

トラッカーは (scrollTop + viewportHeight) / documentHeight × 100 でスクロール率を計算します。視覚的な末尾では、サブピクセルレンダリングとモバイルアドレスバーのリサイズの影響で、計算結果はちょうど100ではなく99.7～99.9%で頭打ちになることがよくあります。そのためトラッカーは、ビューポートの底がドキュメントの底から2px以内にあるとき 100にスナップ し、Zenovayのダッシュボードは scroll_depth_percentage ≥ 95 を「100%に到達」とカウントします。スナップ修正前に記録された履歴データも同じトレランスが遡及適用され、「100%到達」列は構造的なゼロではなく実際のエンゲージメントを示します。

読み方

パターン	想定される原因	対策
80% / 45% / 18% / 6% / 0%	健全なファネル; 長文コンテンツの部分的な読了	ページ上部の50%までのコンテンツを最適化 — ほとんどの読者に見られる箇所です
95% / 90% / 80% / 70% / 50%	非常に短いページか、強い読者エンゲージメント	末尾のCTAがビューポートに実際に表示されるかを確認してください
30% / 5% / 1% / 0% / 0%	ファーストビューでのバウンス	ファーストビューのコピー、読み込み時間、レイアウトシフトを調査

セールスページで19%(75%)から6%(90%)への落ち込みは最もよくある診断シグナルです — 末尾の何かがCTAに到達する前に読者を失わせています。

スクロールヒートマップオーバーレイ

ドメイン → サイトを選択 → ヒートマップ タブを開きます。ヘッダーのセグメント化されたコントロールで クリック と スクロール を切り替えます。スクロールモードはページのスクリーンショット上にグラデーションオーバーレイを描画します。各高さの色は、その点に到達した訪問者の割合をエンコードしています。

ページ上部はすべての訪問者が到達するため、スクリーンショットの上端は常に最も「熱い」色になります。割合が下がるにつれてグラデーションがフェード彩度が落ちていきます — 鋭い遷移は「離脱点」であり、通常は特定のデザイン要素(ヒーローセクションの終端、レイアウトシフト、重い広告ブロック)に対応します。

スクロールヒートマップには ページのスクリーンショット が必要です。ヒートマップが有効化された最初のページビューでスクリーンショットが自動取得されます。有効化後、最初のスクリーンショットが表示されるまで数分お待ちください。

セッション詳細の最大スクロール深度

ライブ地球儀または訪問者リストからセッションを開くと、サイドパネルに 閲覧ページ数 と セッション時間 の横に 最大スクロール深度: X% が表示されます。

長文ページで12%の最大スクロール深度を表示する訪問者は、バウンスの可能性が高いことを示します。長文ページで100%のスクロール表示は、セッション時間に関係なく非常に高いエンゲージメントを示します — 全文を読み切っています。

プライバシーと同意

スクロール深度の追跡は、ページ読み込みごとにトラッカーのインメモリ状態のみに存在します。Cookieや localStorage への書き込みは行われないため、Cookieの同意バナーの影響を受けません。Sec-GPC(Global Privacy Control)を送信するウェブサイトでは、マイルストーンイベントの取り込み経路はサーバー側でスキップされます — 訪問者単位の最大スクロールだけが保持され、GPC非対応トラフィックについてZenovayが記録するのと同じデータです。