こんにちは。コーダーのアキモトです!
みなさん、制作したサイトにGA4(Google Analytics 4)は導入していますか?
「一応、設置はしたけどね…」な状態でうまく使いこなせている気がしないという方も多いのではないでしょうか。
かくいう私もGA4になってから本格的にさわれておらず、ふわっとしているのが正直なところ…
よし、考える前に手を動かそう!ということで実際に色々と設定をし計測・確認をしてみる、ということをしてみたいと思います。
![](https://ent-plus.com/wp-content/uploads/2024/04/campaign_lp.png)
制作したのは『抽選で賞品をプレゼントキャンペーン』のLPサイト(仮)とします。
このシンプルでよくあるページに対し、設定・計測をしていきます。
※すでにGA4タグは設置済みとしてスタートします。
第1回は『スクロール率の計測』です。
私も1から勉強するつもりでやっていきますので一緒にやっていきましょう!
「スクロール率」とは
さて、今回設定・計測をするスクロール率とは、Webページ全体を100%としてスクロールされた割合のことを言います。
計測をすることで、何がわかり、どのように活かせるのでしょうか。
計測の目的と結果
スクロール率の計測をすることにより。ユーザーが「Webページのどこまで見てくれているのか」、逆に「Webページのどの部分で離脱したのか」ということがわかります。
計測の結果、例えば大半のユーザーがスクロール率20%ほどで離脱している場合は、「ファーストビューを含む上部のデザインが目立たないのか?」と考えられることができますし、
読んでほしい規約のところまで読まれていないことがわかれば「レイアウトが分かりにくいのか?コンテンツの順番を変えようか?」と検討することができ、改修に役立つわけです。
読了率とは
スクロール率と関係があるのが読了率です。
スクロール率が「Webページ全体を100%としてスクロールされた割合」を指すのに対して、「Webページを100%(=最後まで)見た割合」となります。
そんなスクロール率ですが、取得の設定方法は2つあります。
1. GA4の「拡張計測機能」を使用して設定
2. GTM(Googleタグマネージャー)を使用して設定
です。
1つ注意点として、「GA4の拡張計測機能」で設定する場合は「深度90%」しか計測ができないという点があるようですね。
もっと20%、40%…と細かく計測したいよという方は「GTM(Googleタグマネージャー)」を使用した設定を行いましょう!
また、両方を設定しているとバッティングが起きてしまいうまく数値が取れないようですので、どちらか一方を採用するようにしましょう。
それでは順番にやっていこうと思います。
GA4の「拡張計測機能」を使用
設定方法
①管理画面を開き、左メニューの下にある「管理」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_setting_1.png)
②左サブメニューの「データの収集と修正」>「データストリーム」をクリックし計測したいWebサイトを選択
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_setting_2.png)
③詳細画面の「イベント」にある「拡張計測機能」を表示し、歯車マークをクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_setting_3.png)
④拡張計測機能の「スクロール数」をオンにし、「保存」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_setting_4.png)
これでスクロール率の設定は完了です!
データを取得し表示させるにはカスタムディメンションを作成する必要があります。
カスタムディメンションとは
アクセス解析の分析軸となる項目のことです。
設定すると、デフォルトにはないディメンションのデータを取得し、レポートに表示させて分析できるようになります。
表示方法
①左メニューの下にある「管理」>「カスタム定義」クリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_1.png)
②「カスタムディメンションの作成」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_2.png)
③「カスタム ディメンションの編集」にて設定
[ディメンション名(任意の名称)]、[説明]、[イベントパラメータ(= プルダウンで”percent_scrolled”を選択)]を入力し、右上の「保存」をクリック。
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_3.png)
④左メニュー「データ探索」から新しいデータ探索を作成
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_4.png)
⑤編集画面より各設定をする
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_5.png)
1.「変数」欄ディメンションの[+]アイコンをクリック
2. ディメンションの選択画面より「カスタム」>「③で設定したディメンション名」と「ページ/スクリーン」>「ページタイトル」を選択
3. 右上の「インポート」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_6.png)
1.「変数」欄の指標の[+]アイコンをクリック
2. 指標の選択画面より「イベント」>「イベント数」を選択
3. 右上の「インポート」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/ga4_scroll_check_7.png)
⑥設定完了!
データが表示されればOKです! ※データの取得までに48時間かかりますのでご注意ください。
GTM(Googleタグマネージャー)を使用
GTMとは
Googleタグマネージャーの略。
Google広告やGoogleアナリティクスなどのタグを一元管理することができる管理ツールのこと。
設定方法
①新規「トリガー」を作成
Googleタグマネージャーの管理画面を開き、該当のワークスペースにて左メニューの「トリガー」から新規作成をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_1.png)
「トリガータイプの選択」からすでに用意されている「スクロールの距離」を選択
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_2.png)
②「トリガー」の設定
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_3.png)
1.わかりやすい任意の名前をつけます(スクリーンショット内「スクロール率(20%,40%,60%,80%)」の欄)
2.基本的にWebページは縦方向で計測になるので「縦方向スクロール距離」を選択
3.割合を選択し、区切って計測したいパーセンテージの数字を記入(スクリーンショット内「20,40,60,80」の欄)
4.次の時にこのトリガーを有効化するの箇所を「ウィンドウの読み取り」にする
5.このトリガーの発生場所を選択。一部のページに適用する場合はPage Pathを選択しディレクトリ名をを記入するなどし設定する
③「変数」の作成
左メニューの「変数」から、組み込み変数の「設定」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_4.png)
④「変数」の設定
「Scroll Depth Threshold」にチェックを入れます
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_5.png)
⑤GA4のイベントタグの作成
左メニューの「タグ」から、「新規」をクリックし設定画面へ
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_6.png)
1.タグ名(任意)を記入
2.タグの設定から、タグの種類を「Googleアナリティクス:GA4イベント」に設定
3.測定IDにGTMタグを入力
4.イベント名に任意の名称を入力(percent_scroll)
5.イベントパラメータに4と同じ名称を記入し値は「Scroll Depth Threshold」を選択。
6.右上の「保存」で設定完了
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_7.png)
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_8.png)
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_9.png)
⑥タグの公開
作成したスクロール率のタグが発火してるか確認し、公開する
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_setting_10.png)
表示方法
①カスタムディメンションの作成
左メニュー下「設定」>「データの表示」>「カスタム定義」を選択
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_custom_1.png)
「カスタムディメンションを作成」を選択
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_custom_2.png)
タグマネージャーで設定したイベントパラメータを設定
・ディメンション→percent_scroll(わかりやすい任意の名前)
・範囲→イベント
・イベントパラメータ→タグマネージャーで設定したイベント名を入力
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_custom_3.png)
②左メニュー「データ探索」から新しいデータ探索を作成
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_1.png)
③編集画面より各設定をする
1.「変数」欄ディメンションの[+]アイコンをクリック
2. ディメンションの選択画面より「すべて」> 先ほど作成したカスタムディメンション[percent_scroll]を選択
3. 右上の「インポート」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_2.png)
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_3.png)
「変数」欄、ディメンションにドロップ
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_4.png)
1.「変数」欄、指標の[+]アイコンをクリック
2. 指標の選択画面より「カスタム」> 「イベント数」を選択
3. 右上の「インポート」をクリック
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_5.png)
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_6.png)
「変数」欄、値にドロップ
![](https://ent-plus.com/wp-content/uploads/2024/04/gtm_scroll_check_7.png)
④設定完了!
右の自由記述欄に表示されたらOKです!
まとめ
いかがだったでしょうか?
今回はスクロール率をメインに設定をしてみました。
限定的なものではありましたが、こうして1つずつ触っていくと理解と慣れが必要だな…と感じますね(笑)
引き続きニーズの高い要素の設定をしていきたいと思いますのでお付き合いよろしくお願いします!