GA4とGTMで10％刻みのスクロール率を計測しレポート表示する方法

最初に組み込み変数を設定しておきます。

変数とは、GTMがWebサイトからデータを受け取るための入れ物のことを指します。組み込み変数は、GTMにあらかじめ用意されている便利な変数です。今回はスクロールされた距離をWebサイト上から取得する組み込み変数を使えるように設定します。

GTMの管理画面左側のメニューから「変数」を選択し、「設定」ボタンを押します。

組み込み変数の設定画面で、「Scroll Depth Threshold」にチェックを入れます。「Scroll Depth Threshold」が、スクロールされた距離を取得するための変数（入れ物）です。似た名前のものがあるので注意しましょう。

次はタグの作成です。GTM管理画面右側のメニューから「タグ」を選択し、「新規」ボタンを押します。

開いた画面で、タグに名前を付けておきましょう。今回は「スクロール率」としました。

タグの設定エリアの中央付近をクリックしてください。

タグタイプ選択画面で、「Google アナリティクス：GA4イベント」を選択します。

「設定タグ」は、GA4を導入した際に作成したものをプルダウンから選びます。

「イベント名」には任意の名前を入力しましょう。ここで入力したイベント名がGA4に表示されます。

イベントパラメータの「パラメータ名」は任意のパラメータ名を入力します。ここでは「scroll_percentage」とします。

イベントパラメータの「値」は、入力欄の右側のボタンを押します。

設定タグ

タグの種類は「Googleアナリティクス：GA4イベント」を選択します。

イベント名

変数の選択画面が表示されるので、前のパートで設定した「Scroll Depth Threshold」を選択しましょう。

イベントパラメータの値に{{Scroll Depth Threshold}}と入力されるので、後ろに「%」記号を付けておきましょう。

イベントパラメータ

パラメータ設定をしておくことで、「Scroll Depth Threshold」が受け取ったスクロール距離をGA4で表示できるようになります。※下の図の左側に表示されている「スクロール率」の部分です。

次はトリガーの作成です。タグ設定画面の下にある「トリガー」エリアの中央付近をクリックしてください。

トリガーの選択画面右上のプラスボタンをクリックします。

開いた画面で、まずはトリガーの名前を付けておきましょう。ここではイベント名と同じ「スクロール率」としました。

さらにトリガーの設定エリアの中央付近をクリックします。

トリガータイプの選択画面で、ユーザーエンゲージメントの中の「スクロール距離」を選択します。

トリガーの「縦方向スクロール距離」にチェックを入れ、「割合」の入力欄に「10,20,30,40,50,60,70,80,90」を入力します。

この数値は、ページの何パーセントの地点でイベントを記録するかという設定になります。今回は10パーセント刻みにしているのでこの内容ですが、例えば「25,50,75」と入力すれば25パーセント刻みで記録されます。特に短いページの場合には、サイトを開いた瞬間に10パーセント地点のイベントが発生してしまうので、ページの長さにより計測単位を決めると良いでしょう。

入力が終わったら、右上の「保存」ボタンを押しましょう。

GTMでは、設定したタグが意図通りの動きをするかどうか本番公開前にテストをすることができます。

管理画面右上の「プレビュー」ボタンを押しましょう。

「Tag Assistant」という新規タブが開くので、中央の入力欄にテストするページのURLを記入し、「Connect」ボタンを押します。

さらに新規タブが開き、テストするページが表示されます。見やすいように別ウィンドウで開くなどしておくと良いでしょう。

一度Tag Assistantのタブに戻り、「Continue」ボタンを押します。

Tag Assistantの画面では、GTMに設定したタグの状態を見ることができます。「Tags Fired」エリアには動いているタグ、「Tags Not Fired」エリアには現在動いていないタグが表示されます。

今回設定したイベントはページの10パーセント地点が表示されると最初のイベントが発生します。今回のように短いページでは、Tag Assistantが開いた瞬間に以下のようにすでにTags Firedに表示されるかもしれませんが、正しい動作ですので問題ありません。

ページを最後までスクロールした後、GA4のリアルタイムレポートでイベント発生状況を見てみましょう。「scroll_count」のイベント数が9になっていれば、10から90パーセント地点までのイベントが発生したことを表していますので、正しく設定されています。

イベントが正しく記録されていることが確認できたら、設定を本番公開しましょう。GTM管理画面右上の「公開」ボタンをクリックします。

バージョン名に作業内容を記入します。今回は「スクロールイベント実装」としました。

公開ボタンを押せば完了です。

以上でGTM上での設定は完了ですが、GA4側でスクロール率をレポート項目として使えるよう、カスタムディメンションの設定を行っておきます。

GA4の管理画面から、スクロール率を表示するためのカスタムディメンションを設定します。

左下の歯車アイコンをクリックし、中央の列の「カスタム定義」をクリックしてください。

「カスタムディメンションを作成」ボタンを押します。

設定画面が開いたら、「ディメンション名」とイベントパラメータに「scroll_percentage」を入力します。※GTMでのタグ設定の時に決めた文字列です。

「保存」ボタンを押せば、「スクロール率」というディメンションをGA4で使えるようになります。どのように使うのかを次のパートで解説します。

カスタムディメンションはさまざまな画面で活用できます。以下の記事で詳しく解説しているので、あわせてご覧ください。

あわせて読みたい

GA4のカスタムディメンション＆カスタム指標でユーザー行動を見える化しよう GA4のカスタムディメンション、カスタム指標の活用方法がわからない。 サイト内のユーザー行動をより詳細に把握したい。 そんなお悩みをお持ちのWebサイト運用者向けの…

カスタム指標を設定することで、10％ごとのスクロール数を「イベント数」から独立させて見ることができるようになります。Looker Studioで「スクロール率」のような計算指標を作る際に利便性が高くなるので、ぜひ設定しておきましょう。

カスタムディメンションとカスタム指標は理解しにくい概念です。以下の記事でも解説していますので、より理解を深めたい方は以下もご覧ください。

Looker StudioにGA4のデータを連携したら、グラフの形式をピボットテーブルに変更します。

ピボットテーブルは、縦軸と横軸の2軸でデータを分析できるグラフ形式です。今回は「ページ別（横軸）のスクロールの割合（縦軸）」という分析を行うため、この形式を選択します。

「ヒートマップ付きのピボットテーブル」であれば、スクロールの割合をグラフィカルに表現できます。

カスタムディメンションとして設定したscrolled_percentageを行のディメンションに設定します。

カスタム指標として設定したscrolled_countを値として設定すると、以下のようなヒートマップが表示されます。

ページごとに離脱が多いポイントを確認し、ヒートマップツールを使ってより詳しい分析をしてみましょう。

ディメンションや指標などのフィールドに変更がある場合には、「接続の変更を適用しますか？」の画面に追加したフィールド名が表示されます。

※以下の画像の例では特に変更がないため何も表示されていません。