GTMを使ってスクロール率を詳細に取得する方法

Writer： ide　更新日：2024/03/18

東京オフィスデザイナーの井手です。
今回このブログでは、Googleタグマネージャーとは何なのか、GA4のタグとの違い、Googleタグマネージャーの使い方について紹介します。

Googleタグマネージャーとは

Googleタグマネージャーは、Googleが無料で提供しているタグ管理システムです。
ウェブサイトやアプリに設定しているタグを簡単に管理することができます。

Googleタグマネージャーで出来ること

GA4タグとの違い

Webサイトやアプリの分析をするとにき、GA4でもイベント(タグ)の作成ができますが、Googleタグマネージャーではより細かい設定が可能です。スクロールを計測するイベントの設定を例にご紹介します。

GA4の場合

GA4のスクロールを把握するイベント「scroll」では、スクロールの距離が、ページの90%に到達した時に集計が行われます。90%以外の数値を設定することはできません。

Googleタグマネージャーの場合

Googleタグマネージャーでは、スクロールの距離を細かく設定することが可能です。5%~100%まで設定することで細かいスクロール値を取得することができ、より詳細な情報を得ることができます。

Googleタグマネージャーの使い方

①組み込み変数の設定を行います。

変数を設定することで、ある値や情報を後で入力するための仮の場所を確保します。

■変数の設定

②トリガーの設定を行います。

トリガーは、タグを配信するときの条件のことです。

トリガーのタイプを選択し、トリガーの詳細設定・トリガーの発生場所の指定をすることができます。

■トリガーのタイプを選択

■トリガーの詳細設定

スクロールの距離は、ページの高さまたは幅に対する割合（%）、またはピクセル数で設定します。割合を選択して、「10, 20, 30」と入力すると、ページの高さの 10%、20%、30% の地点がそれぞれトリガーの発動ポイントに設定されます。

また、特定のページのみスクロールを計測したい場合には、このトリガーの発生場所の一部のページを選択後、特定のページのURLを設定することで計測ができ、全てのページで取得したい場合には、このトリガーの発生場所のすべてのページを設定することで計測することができます。

補足

トリガーが発動するのは各ページで発動ポイントを初めて通過した時のみで、ページ上部にスクロールして戻ってもトリガーは発動しません。ページの再読み込みした場合には、再度トリガーが発動可能になります。

③タグの設定を行います。

タグでは、埋め込む場所の設定と、トリガーの選択を行います。

■タグタイプを選択
（今回はGA4と連携する為、GoogleアナリティクスのGA4を選択）

■GA4のID・イベント名・イベントパラメータを設定する。

■トリガーの選択

④プレビューで動作確認を行います。

プレビューで動作のテストを行うことで、設定したタグが正常動いているか確認することができます。

■タグを選択し、右上のプレビューボタンを押します。

■プレビューから飛んだサイトで実際に動作を試します。

■Summaryに動作の結果が表示されます。

• Tags Fired→正常に動作している
• Tags Not Fired→正常に動作していない

正常に動作していることを確認してからGA4で設定を行うようにしましょう！

■GA4側で確認

正しく設定できた場合には、GA4のレポート>リアルタイム>イベントで確認ができます。

最後に

今回はGoogleタグマネージャーについて紹介しました。

Googleタグマネージャーが使えるようになると、分析の時に知りたい情報をより得ることができるようになり、タグも簡単に管理することができるようになります。

Googleタグマネージャーで目的に合ったタグの設定を試してみましょう！