GTMでスクロール率のタグ設定をする方法を解説

この記事で分かること

GA4のスクロール率の定義
GTMでイベントタグ設定を行い、GA4でより詳細なスクロール率を計測する方法

GA4のスクロール率とは

GA4に関してはこちらのページをご覧ください。:GA4 (Google Analytics 4)とは？設定方法からUAとの違いまで詳しく解説！｜株式会社free web hope

GA4のスクロール率(Scroll)は、ユーザーがページをどれほどの深さまでスクロールしたのかを計測する指標です。

スクロール率を計測するメリットは、「ユーザーがページ内のどのコンテンツで離脱しているか」を計測し、ページ改善のための仮説を立てることができる点です。

たとえば、ページ内のスクロール率10%に該当するコンテンツAでスクロール率の指標が大きく減少していた場合、コンテンツAの内容・デザインを修正することで、ユーザーのページ滞在時間を延ばすことにつながるかもしれません。

以上のようにスクロール率を計測することで、ページのボトルネックを特定し改善に役立てることができます。

GA4でスクロール率を測定する方法は以下の2つがあります。

GA4で拡張計測機能を設定する
GTMのイベントタグ設定をする

今回はGTMのイベントタグ設定をする方法を解説します。

GA4の拡張計測機能については以下の記事を参考にしてください。：GA4でスクロール率を計測する方法│GTMのタグ設定方法・拡張計測機能を解説｜株式会社free web hope

GA4でスクロール率を計測する方法②：GTMでGA4のイベントタグ設定を行う

続いて、GTMで「GA4イベントタグの設定」を行い、GA4でより詳細なスクロール率を計測する設定を解説します。

GTMに関して、「タグ」など基本的な用語解説や実装方法はこちらを参考にしてください。：

【初心者向け】GTM（Google タグマネージャー）とは？設定からGA4との連携方法まで詳しく解説！｜株式会社free web hope

また、GA4とGTMがあらかじめ連携されていることを前提としています。まだ連携がお済ではない方はこちらのページを参照してください。：

【初心者必見】GTMでGA4の設定・イベント実装方法を画像付きで解説｜株式会社free web hope

GTMのタグ設定でGA4のスクロール率計測の設定をするメリット

GA4の「拡張機能イベント」ではページの下部90%までスクロールした場合にしか計測がされませんでした。

しかし、GTMのタグを設定し、GA4でスクロール率計測の設定を行うことで、「ページの20%、40%、60%...までスクロールした場合」というように自身でスクロール深度の設定を行うことができます。

これにより、より詳細にページの解析を行うことができ、ボトルネックの特定が容易になります。またノーコードでタグを実装できるため、初心者の方でも簡単に計測を開始することができます。

GTMのタグ設定でGA4のスクロール率計測を設定する方法

※あらかじめGA4とGTMが連携してあることが前提です。まだ連携がお済ではない方はこちらのページを参照してください。：

【初心者必見】GTMでGA4の設定・イベント実装方法を画像付きで解説｜株式会社free web hope

GA4の操作

GTM側で設定を開始する前に、事前にGA4の測定IDを用意しておく必要があります。

Step1:GA4にアクセスし、左のサイドバーから「管理」を選択します。

Step2:「データストリーム」を選択し、対象のウェブデータストリームを選択します。

Step3:表示される「測定ID」をコピーします。

※今回はGA4のデモアカウントを使用しています

GTMの操作

トリガー設定

step1:GTMにログインし、ワークスペースから「変数」を選択し、右上にある設定ボタンをクリックする

step2:スクロールの「Scroll Depth Threshold」、「Scroll Depth Units」、「Scroll Direction」の３つにチェックを入れる

各組み込み変数の意味※組み込み変数：GTMがデフォルトで用意している変数

Scroll Depth Threshold:トリガー発火につながったスクロール距離の数値
Scroll Depth Units: トリガー発動のしきい値の指定に使用されている単位
Scroll Direction:トリガー発火につながったスクロールの方向(縦方向または横方向)

参考：スクロール距離トリガー - タグマネージャーヘルプ (google.com )

step3:左のサイドバーから「トリガー」を選択し、「新規」をクリック

step4:トリガーの設定から、「スクロール距離」を選択

step5:「縦方向スクロールの距離」にチェックを入れ、計測したいページのスクロール率を記載していく※基本的にWEBページは縦方向に読まれるので、「縦方向スクロールの距離」を例に紹介します。

「10,20,30」の様に記載した場合10%ごとのスクロール率が、「20,40,60」の場合は20%ごとのスクロール率が計測できます。

step6:トリガーの発生条件として「すべてのページ」か「一部のページ」のどちらかを選択し、名前をつけてトリガーを保存する

すべてのページ：サイト全てのページのスクロール率を計測する。
一部のページ：指定したページのスクロール率を計測する。「Page URL」「等しい」を選択し、計測したいページのURLを入力する。

タグ設定

step7:左のサイドバーから「タグ」を選択し、「新規」ボタンから、スクロール率のタグを作成する

step8:タグ設定の画面からトリガーをクリックし、先ほど作成した「スクロール率」のトリガーを選択する

step9:「タグの設定」を選択し、「Google アナリティクス」→「Googleアナリティクス：GA4イベント」を選択する

step10:タグの設定を行い、保存する

タグの設定項目

タグの名前：ユーザーで設定。(例)スクロール率
測定ID：先ほどコピーしたGA4の測定IDを入力する。
イベント名：ユーザーで設定。半角文字でデフォルトのイベント(Scroll)と区別できるような名前にする。(例)percent_scroll　
イベントパラメータ：「パラメータを追加」をクリックし、ユーザーで設定。半角文字でデフォルトのイベント(Scroll)と区別できるような名前にする。(例)percent_scroll　
値：「Scroll Depth Threshold」を選択

step11.作成したスクロール率のタグが発火してるか、プレビューモードを利用して確認してから公開する