ユーザーがページのどこまで読み進めたかを把握することで、以下のような分析・改善が可能になります。
・CTAボタンやリンクの最適な配置場所の特定
・ランディングページの離脱ポイントの可視化
・コンテンツの読了率の測定
・ページ構成の改善ポイントの発見
GTM（GoogleTagManager）とGA4（GoogleAnalytics4）を活用すれば、無料で簡単にスクロール率の計測環境を構築できます。
この記事では、初心者の方でも迷わず設定できるよう、手順を詳しく解説します。
Contents
事前準備：GTMへのログイン
まずはGoogleTagManagerにアクセスし、計測対象のWebサイトのコンテナ（ワークスペース）を開きましょう。
ステップ1：スクロール関連の組み込み変数を有効化
📌重要：この設定を忘れるとスクロール率が取得できません
GTMでスクロールデータを扱うには、まず組み込み変数を有効化する必要があります。
設定手順
1.GTM管理画面の左側メニューから「変数」をクリック
2.「組み込み変数」セクションの「設定」ボタン（鉛筆アイコン）をクリック
3.以下の3つの変数にチェックを入れる
| 変数名 | 説明 |
| ScrollDepthThreshold | スクロールした深さ（パーセンテージまたはピクセル） |
| ScrollDepthUnits | 単位（percentまたはpixels） |
| ScrollDirection | スクロール方向（verticalまたはhorizontal） |
これらの変数を有効にすることで、後ほどGA4へスクロール情報をイベントパラメータとして送信できるようになります。
ステップ2：スクロール距離トリガーの作成
次に、どのタイミングでスクロールイベントを発火させるかを設定します。
設定手順
1.GTM左側メニューから「トリガー」を選択
2.「新規」ボタンをクリック
3.トリガー名を設定（例：「スクロール距離_10%刻み」
4.トリガータイプから「スクロール距離」を選択
5,以下のように設定
| 項目 | 設定内容 |
| 垂直方向のスクロール距離 | チェックを入れる |
| パーセンテージ | 10,20,30,40,50,60,70,80,90,100※カンマ区切りで指定（刻み幅は自由に調整可能） |
| このトリガーの発生場所 | すべてのページ※特定ページのみ計測したい場合はURLフィルタを追加 |
6.「保存」をクリック
パーセンテージの設定例
- 詳細に分析したい場合：10,20,30,40,50,60,70,80,90,100
- 主要ポイントのみ：25,50,75,100
- 読了率重視：50,100
ステップ3：GA4イベントタグの作成
続いて、スクロールイベントをGA4に送信するタグを設定します。
設定手順
- GTM左側メニューから「タグ」を選択
- 「新規」ボタンをクリック
- タグ名を設定（例：「【GA4】スクロール距離」）
- タグの種類で「Googleアナリティクス：GA4イベント」を選択
- 以下のように設定
![GTM3]()
| 設定項目 | 値 |
| 設定タグ | 既存のGA4設定タグを選択※未作成の場合は先にGA4設定タグを作成してください |
| イベント名 | scroll_depth※GA4で識別しやすい名前を設定 |
6.イベントパラメータセクションで「行を追加」をクリックし、以下を設定
| パラメータ名 | 値 |
| percent | {{ScrollDepthThreshold}} |
変数の挿入方法
- 値の欄をクリックすると、右上に「+」マークのアイコンが表示されます
- クリックすると組み込み変数の一覧が表示されるので、該当する変数を選択
- トリガーセクションで、ステップ2で作成した「スクロール距離」トリガーを選択
![GTM7]()
- 「保存」をクリック
ステップ4：プレビューモードで動作確認
タグを公開する前に、正しく動作するかテストしましょう。
確認手順
- GTM画面右上の「プレビュー」ボタンをクリック
- 表示されるフィールドに計測対象のWebサイトURLを入力
- 「Connect」をクリックすると、別タブで対象サイトが開く
- ページを実際にスクロールしてみる
- GTMのプレビュー画面（TagAssistant）で以下を確認
確認ポイント
- TagsFiredセクションに「GA4-スクロールイベント」タグが表示される
- Variablesタブで以下の値が正しく取得できているか
- ScrollDepthThreshold：10、25、50など設定した値
- ScrollDepthUnits：percent
- イベントが設定したパーセンテージで発火しているか
問題がなければ、GTM画面右上の「公開」ボタンをクリックして設定を本番環境に反映させます。
ステップ5：GA4でスクロールデータを確認
リアルタイムレポートで即座に確認
- GA4管理画面にアクセス
- 左側メニューから「レポート」→「リアルタイム」を選択
- 実際にWebサイトをスクロールしてみる
- 「イベント数（イベント別）」にscroll_depthイベントが表示されればOK
![GTM6]()
カスタムレポートでスクロール率を分析
- 「探索」メニューから「自由形式」を選択
- ディメンション：ページタイトルまたはページパス
- 指標：イベント数
- フィルタ：イベント名=scroll_depth
- 内訳ディメンション：percent（イベントパラメータ）
これにより、ページごとのスクロール率分布を可視化できます。
スクロール率データの使い方
ケース1：CTAボタンの最適配置
- 50%地点での離脱が多い→CTAを30-40%地点に配置
- 75%到達率が高い→複数のCTAを段階的に配置
ケース2：コンテンツ改善
- 25%地点での離脱が多い→導入部分を見直す
- 後半のスクロール率が低い→コンテンツの簡潔化や構成の見直し
ケース3：A/Bテストの指標
- 滞在時間だけでなく、スクロール率も比較することでより正確な評価が可能
よくあるトラブルと解決法
Q1.プレビューでイベントが発火しない
原因：組み込み変数が有効化されていない
解決法：ステップ1の設定を再確認
Q2.GA4にイベントが表示されない
原因：GA4設定タグが正しく動作していない
解決法：GA4設定タグのプレビューで測定IDが正しいか確認
Q3.スクロール率が正確でない
原因：ページの高さが動的に変化している
解決法：JavaScriptで画像読み込み完了後にトリガー発火を調整（高度な設定）
まとめ
5ステップでスクロール率計測を実装してきました。
| ステップ | 内容 | 重要度 |
| 1 | 組み込み変数で「Scroll」関連の3つを有効化 | ⭐⭐⭐ |
| 2 | スクロール距離トリガーを作成（パーセンテージ設定） | ⭐⭐⭐ |
| 3 | GA4イベントタグを作成＋パラメータで変数を設定 | ⭐⭐⭐ |
| 4 | プレビューモードで発火を確認 | ⭐⭐ |
| 5 | GA4でイベントとパラメータを確認 | ⭐⭐ |
スクロール率の可視化により、「滞在時間は長いのにコンバージョンが低い」といった課題の原因究明が可能になります。
まずは基本設定から始めて、データに基づいたWebサイト改善を進めていきましょう。
