バナーやメッセージが何回表示された？GTMで表示回数を計測する方法
Webサイトにバナーやお知らせ、キャンペーンメッセージなどを設置していると、
「このバナーは実際に何回表示されているんだろう？」
「ページの下にある案内まで、ユーザーは見ているのかな？」
「クリック数だけではなく、表示された回数も確認したい」
と思うこともあるのではないでしょうか。
Googleタグマネージャー（GTM）では、「要素の表示」というトリガーを利用することで、特定のバナーやメッセージなどがユーザーの画面に表示されたタイミングを検知できます。
さらに、そのタイミングでGA4へイベントを送信しておけば、対象の要素がどのくらい表示されたのかを確認できるようになります。
この記事では、GTMの「要素の表示」トリガーを活用し、特定のバナーが画面に表示された回数をGA4で計測する手順を紹介していきます。
INDEX
GTMで要素の表示回数を計測する仕組み
通常のページビューでは、「ページが表示された」ということは分かります。
ただし、ページの中にあるすべての内容をユーザーが見ているとは限りません。
たとえば、ページの下の方にバナーを設置していた場合、ユーザーが途中でページを離れてしまえば、そのバナーは画面に表示されないままです。
そこで利用できるのが、GTMの「要素の表示」トリガーです。
このトリガーでは、指定したHTML要素がブラウザの画面内に表示されたタイミングを検知できます。
今回の記事では、
バナーが画面に表示される
↓
GTMが対象の要素を検知する
↓
「banner_view」というイベントをGA4へ送信する
という設定を行います。
これにより、単純にページが開かれた回数ではなく、対象のバナーが実際に画面内へ表示された回数を確認できるようになります。
計測したい要素を確認する
設定を始める前に、まずは計測したいバナーやメッセージをGTMから識別できるようにする必要があります。
GTMの「要素の表示」トリガーでは、主に
ID
または
CSSセレクタ
を使って対象の要素を指定できます。
たとえば、計測したいバナーのHTMLが次のようになっているとします。
<div id="campaign-banner">
キャンペーン実施中
</div>この場合は、
campaign-bannerというIDを使って対象の要素を指定できます。
一方、IDが設定されていない場合は、class名などを利用したCSSセレクタで指定することもできます。どのIDやCSSセレクタを指定すればよいか分からない場合は、ブラウザの開発者ツールなどで対象のHTMLを確認しておきましょう。
GA4へ送信するイベントタグを作成する
対象の要素を確認できたら、まずはGA4へ表示イベントを送信するためのタグを作成します。
1．GTMの「タグ」から「新規」をクリックする
Googleタグマネージャーを開き、左側のメニューから「タグ」を選択します。
タグ一覧が表示されたら、「新規」をクリックします。
2．GA4イベントを設定する
タグの設定から、GA4へイベントを送信するためのタグを設定します。
「Google アナリティクス」の中にある、「Google アナリティクス: GA4 イベント」を選択します。
選択すると、GA4へ送信するイベントの設定画面が表示されます。
イベント名には、今回計測する内容が分かる名前を設定します。
今回は、
banner_viewと設定します。
イベント名は自由に設定できますが、あとからGA4で確認したときに「何を計測しているイベントなのか」が分かる名前にしておくと管理しやすくなります。
「要素の表示」トリガーを設定する
続いて、どのタイミングで「banner_view」イベントを送信するのかを設定します。
1．トリガーを新しく作成する
作成したGA4イベントタグの画面から「トリガー」をクリックし、新しいトリガーを作成します。
トリガータイプの一覧から、
「要素の表示」
を選択します。
2．計測する要素を指定する
次に、対象となる要素を指定します。
選択方法では、
「ID」
または
「CSSセレクタ」
を選ぶことができます。
先ほどの例のように、
<div id="campaign-banner">となっている場合は、「ID」を選択して、
campaign-bannerと入力します。
これで、campaign-bannerというIDを持つ要素が画面内に表示されたタイミングを検知できるようになります。
どのくらい表示されたら計測する？
「要素の表示」トリガーでは、単純に要素が少しでも画面に入ったタイミングだけではなく、
「どのくらい表示されたら計測するのか」
を設定できます。
そのために利用するのが「視認の最小割合」です。
たとえば、
50%と設定した場合、対象の要素の50％以上が画面内に表示されたタイミングでトリガーが動作します。
バナーの端がほんの少し見えただけで「表示された」と判断したくない場合は、この割合を調整するとよいでしょう。
GTMではデフォルトで50％が設定されています。
また、より細かく計測したい場合は、
「画面上での最小表示時間」
を設定することもできます。
たとえば、
2000ミリ秒と設定すれば、指定した表示割合を満たした状態が一定時間続いた場合にイベントを発生させる、といった設定もできます。
ただし、最初から条件を細かくしすぎると、意図したとおりにイベントが発生しない原因にもなります。
まず表示回数を確認することが目的であれば、シンプルな条件から始めるのがおすすめです。
トリガーを発生させる回数を設定する
「要素の表示」トリガーでは、同じ要素が何度表示されたときにイベントを発生させるかも設定できます。
主に、
・1ページにつき1度
・1要素につき1度
・各要素が画面に表示されるたび
といった設定があります。
単純に、
「このページを見たユーザーのうち、何回バナーまで到達したのか知りたい」
という場合は、「1ページにつき1度」が分かりやすいでしょう。
一方で、表示と非表示を繰り返すポップアップなど、表示されるたびに計測したい場合は、設定を変える必要があります。
何を「1回」として数えたいのかを決めてから設定することが大切です。
GTMのプレビューモードで動作を確認する
タグとトリガーを作成したら、そのまま公開せずにGTMのプレビューモードで確認しましょう。
1．GTMの「プレビュー」をクリックする
GTMの画面右上にある「プレビュー」をクリックします。
Tag Assistantが開いたら、確認したいWebサイトのURLを入力して接続します。
2．対象のバナーまでスクロールする
接続したWebサイトを開き、今回計測対象にしたバナーが表示されるところまでページをスクロールします。
バナーが画面に表示されたら、Tag Assistantへ戻ります。
3．banner_viewのタグが発火しているか確認する
対象のバナーを表示したタイミングで、作成したGA4イベントタグが「Tags Fired」に表示されているか確認します。
表示されていれば、「要素の表示」トリガーによってタグが正常に動作しています。
反対に「Tags Not Fired」に表示されている場合は、
・指定したIDやCSSセレクタが正しいか
・視認の最小割合を満たしているか
・対象の要素が実際に画面内へ表示されているか
などを確認してみましょう。
GA4でbanner_viewイベントを確認する
GTM側でタグが正常に動いていることを確認できたら、GA4にもイベントが届いているか確認します。
GA4を開き、リアルタイムレポートを表示します。
確認用のWebサイトで対象のバナーを表示させ、イベント名の一覧に
banner_viewが表示されるか確認しましょう。
表示されていれば、GTMからGA4までイベントが正常に送信されています。
設定直後の動作確認では、リアルタイムレポートやDebugViewを利用すると確認しやすくなります。
banner_viewが計測できない場合に確認すること
設定したにもかかわらずイベントが発生しない場合は、いくつか確認しておきたいポイントがあります。
IDやCSSセレクタが正しいか
まず確認したいのが、対象の要素を正しく指定できているかです。
HTMLのIDやclass名が異なっていると、GTMは対象の要素を検知できません。
特にCSSセレクタを利用している場合は、別の要素を指定していないかも確認しましょう。
表示条件を満たしているか
視認の最小割合を50％に設定している場合、対象の要素が画面内に少し入っただけではトリガーが発生しません。
対象のバナーが十分に画面へ表示されるところまでスクロールして確認してみましょう。
あとから表示される要素ではないか
Webサイトによっては、ページを開いた時点ではHTML上に存在せず、JavaScriptなどによってあとからバナーやメッセージが追加されることがあります。
このような場合は、「DOMの変化をモニタリング」の設定が必要になることがあります。
ただし、DOMの監視対象を広げすぎるとWebページのパフォーマンスへ影響する場合もあるため、必要な場合に利用するようにしましょう。
GTMを公開しているか
プレビューモードでは正常に計測できても、変更したGTMコンテナを公開していなければ、通常のWebサイトでは新しい設定は反映されません。
動作確認が終わったら、忘れずにGTMの変更内容を公開しましょう。
「表示された回数」＝「しっかり見られた回数」ではない
表示回数を確認するときに、ひとつ注意しておきたいポイントがあります。
「banner_view」が発生したからといって、
ユーザーがそのバナーをしっかり読んだ
ということまで分かるわけではありません。
今回計測しているのは、あくまで設定した条件を満たした状態で対象の要素が画面内に表示されたことです。
たとえば、ユーザーが素早くスクロールして通過した場合でも、設定内容によってはイベントが発生することがあります。
そのため、表示回数だけを見るのではなく、
バナーの表示回数
↓
バナーのクリック数
↓
その後の問い合わせや購入
といったように、ほかのイベントとあわせて確認すると、ユーザーの行動をより詳しく把握できます。
表示回数とクリック数を一緒に見ると分かること
バナーのクリック数だけを見ていると、
「クリックが少ない」
という結果しか分からないことがあります。
しかし、表示回数も計測しておけば、
そもそもバナーまで到達している人が少ないのか
表示はされているけれどクリックされていないのか
を分けて考えられるようになります。
たとえば、10,000回ページが表示されていても、バナーが表示されたのが1,000回しかないのであれば、バナーの位置を見直すという考え方もできます。
反対に、多くのユーザーに表示されているのにクリックされていない場合は、バナーのデザインや文章、リンク先などを見直すきっかけになります。
表示回数は、それだけで成果を判断する数字というよりも、「なぜクリックされているのか、されていないのか」を考えるための材料として活用するとよいでしょう。
まとめ
GTMの「要素の表示」トリガーを利用すると、Webサイトに設置されているバナーやメッセージなどが画面内に表示されたタイミングを検知できます。
今回の設定では、特定の要素が表示されたときに、
banner_viewというイベントをGA4へ送信しました。
ページビューだけでは、
「ページの中にあるバナーまでユーザーが到達したのか」
までは分かりません。
表示回数を計測することで、バナーがどのくらいユーザーの画面に表示されているのかを確認するためのヒントになります。
さらにクリック数などと組み合わせれば、
「表示されていないからクリックされないのか」
「表示されているけれどクリックされていないのか」
といった違いも見えてきます。
ただし、表示されたことと、ユーザーが内容をしっかり見たことは同じではありません。
表示回数だけで判断せず、クリックや問い合わせなど、ほかのユーザー行動とあわせて確認していきましょう。
合同会社ファムでは、GTMやGA4の設定、動的タグの設定なども行っています。
「バナーの表示回数を計測したい」
「特定の要素が表示されたタイミングをGA4へ送りたい」
「自社サイトに合わせたGTMの設定をお願いしたい」
といった場合は、お気軽にお問い合わせフォームからご相談ください。
このブログでは、GA4の設定方法だけでなく、
「どこを見ればいいのか」
「数字をどう読み取ればいいのか」
といった、次の一歩に気づくための視点もお届けしていきます。