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

Google Analytics 4(以下,GA4)とGoogleタグマネージャ(以下,GTM)を使って,Webサイトのスクロール率を計測し,それをGA4でどのように表示するかを紹介します.

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

 

1GA4とスクロール率

GA4ではデフォルトでスクロール率が計測されています.ただし,ページのトップを0%として下に90%の割合の位置が表示された場合に,90%スクロールされたとしてイベント計測されます.図1は,Googleが提供しているGA4のデモアカウントの「設定 > イベント」の画面です.イベント名「scroll(図1の赤色枠内参照)」が,その90%のスクロールを計測しているイベントです.

図1.デフォルトで計測されている90%のスクロール率

図1.デフォルトで計測されている90%のスクロール率

 

記事を公開しているサイトや広告用のランディングページでは,既読率としてスクロール率を計測することは重要だったりしますが,90%よりももっと細かい情報を知りたくなります.そこでこの記事では,「15%,30%,45%,60%,75%」のスクロール率を追加で計測できる設定をGTMで加えて,それをGA4のレポートでどのように表示するかを紹介します.

追加するスクロール率を「15%,30%,45%,60%,75%」としたのは,デフォルトで90%は測定しているのだからそれも利用して効率よく計測しようと考えたからです.もちろんデフォルトの計測とは別に90%も追加の計測に入れること,つまり「15%,30%,45%,60%,75%, 90%」としても問題ありません.

 

2GTMでの設定

スクロール率を計測するために,まずGTMの該当するワークスペースにて,新しいトリガーを追加します.スクロール率計測用の専用トリガーは準備されていますので,「トリガータイプの選択」で「ユーザーエンゲージメント」の「スクロール距離」を選択します(図2の赤色枠内参照).

図2.GTMのスクロール距離のトリガー

図2.GTMのスクロール距離のトリガー

 

最もスタンダードな縦方向のスクロール率を割合で計測することにします.図3では,「縦方向スクロール距離」を選択して,「割合」として「15, 30, 45, 60, 75」と入力し,「このトリガーの発生場所」を「すべてのページ」として,このトリガーに「スクロール距離_[15_30_45_60_75]用」と名前を付けて保存しています.割合の「15, 30, 45, 60, 75」がスクロール率「15%,30%,45%,60%,75%」を測るための数値に該当するので,このトリガーで90%も同時に計測したいならば,「15, 30, 45, 60, 75, 90」と入力します.

図3.トリガー設定(すべてのページ)

図3.トリガー設定(すべてのページ)

 

もしも特定のページだけスクロール率を測りたい場合は,「このトリガーの発生場所」で「一部のページ」を選び,条件を入れます.例えば,図4はPage Pathが「/test_menu03.html」を含む場合だけこのトリガーが有効になるので,パスが「/test_menu03.html」のページだけで「15%,30%,45%,60%,75%」のスクロール率が計測されるようにできます.

図4.トリガー設定(一部のページの例)

図4.トリガー設定(一部のページの例)

 

次に変数を設定します.図5のようにGTMで変数を選択し,組み込み変数の「設定(図5の赤色枠内参照)」ボタンをクリックします.そして図6のように,組み込み変数の設定で「Scroll Depth Threshold」にチェックを入れます.

図5.GTMの組み込み変数の設定

図5.GTMの組み込み変数の設定

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

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

 

最後に,スクロール計測のイベント用のGA4のイベントタグを作ります.GTMの該当するワークスペースにて,タグタイプとして「Googleアナリティクス:GA4 イベント」のタグを選択します(図7の赤色枠内参照).

図7.GTMでGA4のイベントタグを選択

図7.GTMでGA4のイベントタグを選択

図8.GTMのGA4のイベントタグの設定

図8.GTMのGA4のイベントタグの設定

 

このGA4のイベントタグの設定において,「設定タグ」はこのイベントタグを使う既存のGA4の計測タグを選びます(図8の例では「GA4設定」がそのタグなので,それを選んでいます).

図8では,イベント名に「scroll_less_than_90」を入れています.イベント名は半角英数字で入れたほうが良いです(BigQueryを使う場合に半角英数字でないと問題がおきるようです).また,デフォルトで用意されているイベント名と異なる名称にしています(イベント名の長さの上限は40文字です).スクロール率だから「scroll」とすると,デフォルトで計測されている90%のスクロール率と一緒のイベントとして計測されてしまいます.トリガーの設定で「90」を入れていなければ,重複のようなことは起きないと思うので大きな問題は生じないと思われますが,やはりデフォルトの設定はそのままに違うイベントとして計測したほうが安全です.したがって,90%より少ないスクロール率の計測として,この例ではイベント名を「scroll_less_than_90」としました.

イベントパラメータは図8のように,パラメータ名を「percent_scrolled」,値を「{{Scroll Depth Threshold}}」とします.

そしてトリガーは上記で作った「スクロール距離_[15_30_45_60_75]用」を選び,このタグに名前を付けて保存します.

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

図9.GTMのプレビューで動作を確認

図9.GTMのプレビューで動作を確認

 

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

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

GA4の設定のカスタム定義にてカスタムディメンションを作成するために,図10の「カスタムディメンションを作成」の青いボタンをクリックします.図11のようにディメンション名として「percent_scrolled」,説明を「スクロール率」と入力し,範囲を「イベント」,イベントパラメータとして「percent_scrolled」を選択して,右上の青い「保存」ボタンを押して,cっっcを作成します(図12参照).

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

図10.GA4のカスタム定義

図10.GA4のカスタム定義

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

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

図12.カスタムディメンション「percent_scrolled」

図12.カスタムディメンション「percent_scrolled」

 

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

レポートを作成するために,GA4のデータ探索で「自由形式」を選択します(図13の赤色枠内参照).

図13.GA4のデータ探索

図13.GA4のデータ探索

 

最初にスクロースのイベントを集めるセグメントを作ります(図14の赤枠内の「+」をクリックして,図15の赤枠内の「イベントセグメント」をクリックします).図16のような「次の条件にあてはまるイベント含める」という表示で,イベントとして存在する「scroll」と「scroll_less_than_90」を,図17のように「または(OR)」で追加して,「スクロール」と名前をつけて保存します.

図14.セグメントの追加

図14.セグメントの追加

図15.セグメントの新規作成のイベントセグメント

図15.セグメントの新規作成のイベントセグメント

図16.「次の条件にあてはまるイベント含める」という表示

図16.「次の条件にあてはまるイベント含める」という表示

図17.セグメント「スクロール」作成

図17.セグメント「スクロール」作成

 

さらにGA4のデータ探索のディメンションで「+」をクリックして,「ページタイトル(図18参照)」と「percent_scrolled(図19参照)」を一覧に追加します.

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

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

図19.ディメンション「percent_scrolled」を追加

図19.ディメンション「percent_scrolled」を追加

 

準備は整ったので,後は図20のようにセグメントの比較(図20の赤色枠内参照)を「スクロール」,行(図20の水色枠内参照)を「ページタイトル」,列(図20の紫色枠内参照)を「イベント名」と「percent_scrolled」,値(図20の緑色枠内参照)を「イベント数」という選択で組み合わせます.あと,レポートのタイトル(図20の橙色枠内参照)も「スクロール率」と変えておきましょう.

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

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

 

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

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

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

 

5.おわりに

スクロール率を細かく刻んで,すべてのページで取得すると,計測されるイベント数が一気に増えます.計測対象サイトのデータ量を考慮して,計測するならどのような設定にすべきかを必ず検討しましょう.