【別設定】Google Analytics 4でスクロール率を追加計測しレポートを作る

Google Analytics 4（以下，GA4）とGoogleタグマネージャ（以下，GTM）を使って，Webサイトのスクロール率を計測し，それをGA4でどのように表示するかを紹介します（以前紹介した方法とは異なる設定を紹介します）．

この記事では，GA4とGTMの基本的な設定や使い方などは割愛します．そのような情報に関してはすでに良いサイトがあるので，そちらを参考にしてください．例えば，GA4に関しては，小川卓氏の「Google Analytics 4ガイド」はとても有益です．

1．GA4とスクロール率

記事「Google Analytics 4でスクロール率を追加計測しレポートを作る」で，デフォルトの90%のスクロール率以外に「15%，30%，45%，60%，75%」のスクロール率を追加で計測できる設定をGTMで加えて，それをGA4のレポートでどのように表示するかを紹介しました（GTMとGA4の設定を変更してスクロール率を計測する方法と探索でのレポートの作り方を紹介しました）．

2023年7月18日頃に，そのスクロール率のレポートが表示されなくなる現象が起きました．具体的には，「このセグメント、値、フィルタ、期間の組み合わせのデータはありません。変数または設定を編集するか、削除してください。」というエラーメッセージが出てテーブルが表示されなくなりました．調べてみると，探索のレポートのテーブルにディメンション「percent_scrolled」を使っている（GTMでスクロール計測のために使っているイベントパラメータ「percent_scrolled」とその値を使う）とエラーメッセージが出ることがわかりました．

説明もなく仕様をGoogleが変えたのか？と思いました（経験上あり得ることなので）．ですが，2023年7月20日頃にはスクロール率のレポートも元通り表示されるようになりました．どうやらGoogleが設定かなにかをミスっていてそれを直したようです．

おそらく今後も問題なく記事「Google Analytics 4でスクロール率を追加計測しレポートを作る」で紹介したスクロール率のレポートは表示できるとは思いますが，もしかしたらまた表示できなくなることがあるかもと思いました．

そこで，テーブルにディメンション「percent_scrolled」を使わないで，スクロール率のレポートを作る方法を紹介したいと思います（今回の件でその方法を思いついたので，せっかくなので紹介しておくことにしました）．

2．GTMでの設定

変数から設定します（記事「Google Analytics 4でスクロール率を追加計測しレポートを作る」の設定をしている方はこの変数設定はすでに終わっているので必要ありません）．図1のようにGTMで変数を選択し，組み込み変数の「設定（図1の赤色枠内参照）」ボタンをクリックします．そして図2のように，組み込み変数の設定で「Scroll Depth Threshold」にチェックを入れます．

図1．GTMの組み込み変数の設定

図2．GTMで組み込み変数の設定で「Scroll Depth Threshold」にチェック

次に新しいトリガーを追加します．スクロール率計測用の専用トリガーは準備されていますので，「トリガータイプの選択」で「ユーザーエンゲージメント」の「スクロール距離」を選択します（図3の赤色枠内参照）．

図3．GTMのスクロール距離のトリガー

最もスタンダードな縦方向のスクロール率を割合で計測することにします．今回は「15%，30%，45%，60%，75%，90%」のスクロール率を計測するためのトリガーを個別に作ります．90%のスクロール率はデフォルトで計測されていますが，GA4の探索のレポートで結果を見やすくするために，デフォルトとは別に作ります．

最初に15%のスクロール率計測用のトリガーを図4のような設定で作ります．つまり，「割合」に「15」だけを入力し，「このトリガーの発生場所」を「すべてのページ」として，名前を「スクロール距離_15%」として保存します．もちろん名前は自由に付けてかまいませんし，特定のページだけでスクロール率を計測したいなら「このトリガーの発生場所」で「一部のページ」を選んで設定します（詳しくは記事「Google Analytics 4でスクロール率を追加計測しレポートを作る」を参照）．

図4の一番下に「このトリガーへの参照」としてタグ「GA4スクロール率15%計測」がありますが，これは後で作るタグがこのトリガーを参照しているのでこのような表示になっています．

図4．15%のスクロール率計測用のトリガーの設定

同様にして，各割合の値を使って，30%のスクロール率計測用のトリガー（図5），45%のスクロール率計測用のトリガー（図6），60%のスクロール率計測用のトリガー（図7），75%のスクロール率計測用のトリガー（図8），90%のスクロール率計測用のトリガー（図9）を作ります．したがって，トリガーのワークスペースには，図10のようにこれらのスクロール率を計測するトリガーが並びます．

図5．30%のスクロール率計測用のトリガーの設定

図6．45%のスクロール率計測用のトリガーの設定

図7．60%のスクロール率計測用のトリガーの設定

図8．75%のスクロール率計測用のトリガーの設定

図9．90%のスクロール率計測用のトリガーの設定

図10．トリガーのワークスペース

最後に，スクロール率計測のイベント用のGA4のイベントタグを作ります．GTMの該当するワークスペースにて，タグタイプとして「Googleアナリティクス：GA4 イベント」のタグを選択します（図11の赤色枠内参照）．

図11．GTMでGA4のイベントタグを選択

上記で作った各トリガーに対応するタグをそれぞれ作ります．したがって，タグのワークスペースには，図12のように各スクロール率を計測するタグが並ぶことになります．

図12．タグのワークスペース

まずは，15%のスクロール率計測用のタグを図13のような設定で作ります．「設定タグ」は該当するGA4のタグを選びます（図13の例では「GA4設定」がそのタグなので，それを選んでいます）．今回は図12に示すように，「イベント名」を「add_scroll_15per」としました．イベント名は半角英数字で入れたほうが良いです（BigQueryを使う場合に半角英数字でないと問題がおきるようです）．また，デフォルトで用意されているイベント名と異なる名称にしています（イベント名の長さの上限は40文字です）．そして，「パラメータ名」を「percent_scrolled」，「値」を「{{Scroll Depth Threshold}}」とします．

トリガーの「配信トリガー」を上記で作った「スクロール距離_15%」を選び，図13のように「GA4スクロール率15%計測」と名前をつけて保存します．

図13．15%のスクロール率計測用のタグの設定

同様にして，各割合で専用のイベント名をつけ，該当する配信トリガーを選び，30%のスクロール率計測用のタグ（図14），45%のスクロール率計測用のタグ（図15），60%のスクロール率計測用のタグ（図16），75%のスクロール率計測用のタグ（図17），90%のスクロール率計測用のタグ（図18）を作ります．

各タグのイベント名は上記で示したルールなどを守れば自由に付けられますが，レポートを作るときその並び順がレポート上で調整ができないので，このタグでの名称で調整するようにしてください．つまり，15%のスクロール率のイベント名を「add_scroll_15per」としたので，30%のスクロール率は「add_scroll_30pe」，45%のスクロール率は「add_scroll_45pe」・・・とすることで，イベントを名前順（昇降順）に並べたときスクロール率が15%, 30%, ･･･，90%と並ぶようにしています．

図14．30%のスクロール率計測用のタグの設定

図15．45%のスクロール率計測用のタグの設定

図16．60%のスクロール率計測用のタグの設定

図17．75%のスクロール率計測用のタグの設定

図18．90%のスクロール率計測用のタグの設定

GTMでの設定は以上で終わりです．あとはプレビューで，実際にスクロールタグが動いているかを確認して，問題が無ければ公開します．

3．GA4でのカスタムディメンション設定

記事「Google Analytics 4でスクロール率を追加計測しレポートを作る」の設定をしている方は，このGA4のディメンション設定はすでに終わっているので必要ありません．

GA4へのデータ反映は1日ぐらいかかります．そして，レポートでスクロール率（つまり，「15, 30, 45, 60, 75, 90」の値）を表示するために，GA4でカスタムディメンションを作っておく必要があります（作った後からしかデータが対応しないのでGTMでの設定と同時に作っておきましょう）．

GA4の設定のカスタム定義にてカスタムディメンションを作成するために，図19のような管理のカスタム定義のカスタムディメンションにおいて「カスタムディメンションを作成」の青いボタンをクリックします．図20のようにディメンション名として「percent_scrolled」，説明を「スクロール率」と入力し，範囲を「イベント」，イベントパラメータとして「percent_scrolled」を選択して，右上の青い「保存」ボタンを押して，カスタムディメンションを作成します（図21参照．注：図20と21は古い管理画面なので画像の左側が現状と異なります）

これで，準備は整いました．あとは，データが貯まるのを待ちます．

図19．GA4のカスタム定義

図20．GA4でカスタムディメンションを作成する

図21．カスタムディメンション「percent_scrolled」

4．GA4のスクロール率のレポート作成

レポートを作成するために，GA4のデータ探索で「自由形式」を選択します（図22の赤色枠内参照）．

図22．GA4のデータ探索

最初にレポートに使いたいスクロールのイベントを集めるセグメントを作ります（図23の赤枠内の「＋」をクリックして，図24の赤枠内の「イベントセグメント」をクリックします）．図25のような「次の条件に当てはまるイベントを含める」という表示で，イベントとして存在する「add_scroll_15per」と「add_scroll_30per」と「add_scroll_45per」と「add_scroll_60per」と「add_scroll_75per」と「add_scroll_90per」を，図26のように「または」で追加して，「add_scrollのイベント」と名前をつけて保存します．

図23．セグメントの追加

図24．セグメントの新規作成のイベントセグメント

図25．「次の条件に当てはまるイベントを含める」という表示

図26．セグメント「add_scrollのイベント」作成

さらにGA4のデータ探索のディメンションで「＋」をクリックして，「ページタイトル（図27参照）」を一覧に追加します．

図27．ディメンション「ページタイトル」を追加

準備は整ったので，後は図28のようにセグメントの比較を「add_scrollのイベント」（図28の赤色枠内参照），行を「ページタイトル」（図28の水色枠内参照．下にある「表示する行数」はデフォルトだと「10」なので必要に応じて変更してください），列を「イベント名」（図28の紫色枠内参照．下にある「表示する列グループ数」がデフォルトだと「5」なので「10」にします），値を「イベント数」（図28の緑色枠内参照）という選択で組み合わせます．あと，レポートのタイトルも「スクロール率」（図28の橙色枠内参照）と変えておきましょう．

図28．GA4のデータ探索の自由形式レポートのタブ設定

以上で，図29のようなページタイトルをディメンションとしたスクロール率のテーブルが完成します．

図29．GA4のページタイトルごとのスクロール率のレポート

ここで，レポートで使うセグメントを図30のようにしてみます．つまり，「add_scroll_15per」と「add_scroll_30per」と「add_scroll_45per」と「add_scroll_60per」と「add_scroll_75per」の登録順番をバラバラに，さらにデフォルトの90%のスクロール率を計測しているイベント「scroll」を「または」でつないで，「scrollのテスト」と名前をつけたセグメントを作ります．これを使って，レポートを表示するとテーブルの列が図31のようになりました．

つまり，テーブルの列は「add_scroll_15per」と「add_scroll_30per」と「add_scroll_45per」と「add_scroll_60per」と「add_scroll_75per」の間は名前順で自動的に並びかわり，なぜか「scroll」が「add_scroll_60per」と「add_scroll_75per」の間にあります．「scroll」の列がちゃんと「add_scroll_75per」の後になるときもあります（期間などいじると）が，図31のようなことも生じます．テーブルの列の項目の並びは探索のレポートで調整することができません（現在のところ）．したがって，レポートの列の項目を見やすくするために，デフォルトの「scroll」を使わず，GTMで「add_scroll_90per」を作ることにしました．