Webサイトの運営者は常に「サイトの売り上げを最大化したい」と考えているはずです。
そこで、サイトに訪れてくれたユーザーの動きを把握することがとても重要になります。
ユーザーがどの訴求に心を動かされて、どのボタンをクリックしてコンバージョンまで繋がるのかなどの数値を追い続ける必要があります。
また、ユーザーがサイトをスクロールした量が重要になります。
ページ最下部にコンバージョンボタンを置いていてもそこまでみられていない可能性があるからです。
もしページの半分まで読んで離脱しているのであれば、離脱前までにコンバージョンようボタンを置くか、最後まで読んでもらえるような改善が必要になります。
この記事ではサイトを改修するのに重要な指標となるスクロール量を測定するための方法を紹介します。
なお測定には以下の2つのツールを利用します。
- Googleアナリティクス （GA4）
- Google Tag Manager（GTM）
- GTMとGoogleアナリティクスを用いたスクロール量の測定方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
トリガーの設定
まずはトリガーの設定をおこないます。トリガーではイベントの測定タイミングを指定します。
今回はスクロールされた量を測定するため「一定のところまでスクロールされた」タイミングのトリガーを設定します。
トリガーを追加
GTMでトリガー > 新規
トリガーの詳細 > スクロール距離
スクロールの設定
今回はすべてのページで、縦方向にページの50%をスクロールした際に発火するトリガーを作成します。
縦方向スクロール距離 > 50を入力
一部のページのみでトリガーを発火させたい場合は、「このトリガーの発生場所 > 一部のページ」から設定することができます。
では最後に名前をつけて保存します。
今回は50％スクロールトリガーと名前をつけて保存します。
タグの設定
先ほど設定したトリガーが発火したことをGoogleアナリティクスに伝える設定を行います。
GTMで タグ > 新規をクリックします。
タグとトリガーを紐づける
どのトリガーが発火した際にデータを伝えるのか設定するため、トリガーを紐づける必要があります。
トリガーをクリック
先ほど設定した50%スクロールトリガーをクリック
データをGoogleアナリティクスへ送信する
紐づけたトリガーが発火したタイミングでGoogle アナリティクスへデータを送信する設定を追加します。
タグの設定
Google アナリティクス: GA4イベント
設定タグをの値を「Google アナリティクスGA4設定」に、イベント名を任意の値に設定します。
イベント名はアナリティクス側でどのイベントが発生したのかを確認するための名前になります。
イベントの名前がわかる値にしましょう。
今回は50%scrollと設定します。
設定が完了したら任意の名前をつけて保存します。
設定をプレビューで確認する
設定はここまでで終了です。
今設定した内容が正しく測定できるか確認しましょう。
GTMのプレビュー機能を用いて確認します。
画面右上のプレビューをクリック
Googleアナリティクスの測定ができるURLを入力
画面右下Finishをクリック。
*広告などを非表示にすることができるブラウザ「Brave」を利用している方は表示されないためChromeなどのブラウザでテストしましょう。
発火したトリガーは下記画像の赤枠内「Tags Fired」欄に表示されます。
発火していないトリガーは下記画像の黄色枠内「Tags Not Fired」欄に表示されます。
今回は50%scrollタグのトリガーである画面を50%スクロールしていないため、設定した「50% scroll」タグはTags Not Fired欄に表示されています。
この記事では省略しますが、実際にタグを発火させた場合はTags Fired欄に表示されることを確認しましょう。
設定した内容を公開する
ここまででタグの実装とテストが完了しました。
しかし、この状態ではまだ、アナリティクスで確認することはできません。
最後に設定した内容を「公開」して初めて一般ユーザーの測定できるようになります。
画面右上公開ボタンをクリックします。
公開する際はどのような編集をしたのかメモに残しておきましょう。
Google アナリティクスで確認する
設定したタグはGoogle アナリティクスのイベントから確認することができます。
タグの設定で設定したイベント名がアナリティクス上で表示されます。
リアルタイムで数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
過去の数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
まとめ
GTMでスクロールイベントを測定しGoogleアナリティクスへ反映させる方法を理解することはできたでしょうか？
GTMを利用するとスクロールイベントだけでなく、クリックイベントなども簡単に測定することができるようになります。
また、JavaScriptを利用しカスタムイベントを設定すると、様々なユーザーの動きを測定できるようになります。
詳細な動きを測定したい場合はぜひ利用してみましょう。
GTMでスクロールイベントを測定しGoogleアナリティクスへ反映させる方法まとめ
- GTMでトリガーとタグを設定する
- 公開する前にプレビューでテストをする
- タグの設定の際に入力したイベント名がアナリティクスで反映される
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
