GoogleタグマネージャーとGA4でサイト内バナーやフォームの表示イベントを計測する方法

• ランディングページ内のフォームが表示された回数を知りたい。
• サイト内に設置したバナーの表示回数を知りたい。
• ページの読了率を知りたい。

そんな時に役に立つのが、Google タグマネージャー（GTM）による「要素の表示イベント」です。サイト上の見出しやボタンなどのHTML要素をユーザーが表示した回数を計測することができます。

例えば、よくあるフォーム一体型のランディングページでは、フォームに移動するためのページ遷移が発生しないため、フォーム到達率を計測することができません。こうした場合に、ユーザーがページをスクロールしてフォームを表示させたタイミングでGoogle アナリティクスにイベントを送るよう設定します。

フォームが表示された回数をページビュー数で割り算すれば、どれくらいの割合でユーザーがフォームにたどり着くのかという「フォーム到達率」を把握できます。フォーム到達率が把握できれば、ページ内の要素をABテストで比較する時の指標として使えるというわけです。

他にも、ページ内に設置したバナーなどの表示回数からクリック率を算出する、最後の見出しが表示されたことを読了として計測するなどといった使い方が可能です。

要素が表示された回数をイベントとしてカウントするというシンプルな設定ですが、サイトの改善に非常に役立つので、ぜひ設定しておきましょう。

この記事では、GTMで要素の表示イベントを設定し、GA4でイベントとしてカウントする方法を解説します。

GTMとGA4の初期設定が終わっていることを前提に進めますので、未設定の方は以下の記事を参考に設定作業を終わらせておいてください。

GoogleタグマネージャーやGA4を体系的に学びたい方向けに、オンライン講座も用意しています。本1冊分ほどの価格で学べますので、以下のページもご覧ください。

要素の表示イベントで改善できること

冒頭で書いた内容と重なる点もありますが、要素の表示イベントで改善できる点について詳しくみておきましょう。

フォーム一体型LPのフォーム到達率を計測

商品・サービスの訴求と申込フォームが1ページにまとめられたランディングページ（LP）では、GAの基本指標ではページビューとコンバージョン数しか計測できません。

この2つの指標だけでは、極端にコンバージョンが少ない場合に、データをもとに改善ポイントを探るのは難しいでしょう。

こうした場合には、フォームが表示されたことをイベントとしてカウントし、中間指標として利用する方法がおすすめです。

フォームの表示回数を計測できるようになれば、以下のような改善が可能です。

1. フォームが表示されているのにコンバージョンしない場合
   →フォーム項目を減らす、フォーム周辺のマイクロコピーを見直す。
2. フォームの表示回数が少ない場合
   →フォームに到達するまでのコンテンツを魅力的な内容に書き換える。

フォームの表示をGAでコンバージョンとして設定すれば、Google オプティマイズなどでABテストをする際の指標として使うことも可能です。

見出しの表示で本当の読了率を計測

GA4にはデフォルトで「scroll」というイベントが存在します。これはページの上から90％地点まで到達した場合に発生するイベントで、「読了率」的な使い方をすることが可能です。

しかし、どんなサイトでも一律で90％で読了とするのは無理があります。例えば、記事の読了後に関連記事のリストやバナーエリアがあるようなサイトやコンテンツが短いサイトの場合、読了ポイントは90％よりも上の地点になる場合もありえます。

そのサイトの「本当の読了率」を算出するのに最適なのは、ページの最後に必ず存在する要素の表示計測です。ブログのような読み物であれば、最後に「まとめ」を書く人も多いはずです。この「まとめ」が表示されたことを「読了」とみなすことで、より実態に近い読了率を把握できます。

表示イベントを使った読了率の計測方法は以下の記事で詳しく解説しています。実際に設定を試してみたい方は参考にされてください。

ページ内バナーのクリック率を計測

アフィリエイトリンクなどのバナーをページ内に設置しているWebサイトでは、バナーの表示回数を計測することで成果に結びつきやすい訴求方法を探すことが可能になります。

要素の表示イベントを計測しなくても、カウントしたバナーのクリック数をページビューで割り算すれば、ページごとのクリック率を算出できます。しかし、この方法で算出した数値は、本当のクリック率ではありません。

バナーがクリックされない理由は、次の2通りあります。

1. バナーが表示されたがクリックされない。
2. そもそもバナーが表示されていない。

1の「表示されたがクリックされない」の場合は、バナーを見てくれているもののオファーの内容が魅力的ではないためクリックしてくれないという仮説が立てられます。この場合は、クリックされやすいバナーを作りABテストしてみるのが良いでしょう。

2の「そもそも表示されていない」の場合、いくらバナーの画像や訴求内容を変えても、劇的に成果が上がることはないでしょう。この場合は、バナーの表示位置までユーザーを誘導する仕掛けを考えなければなりません。

クリックされない理由により、打つべき施策が変わるということです。クリックされない理由をデータで把握できれば、効率的に改善施策を考えることが可能です。

要素の表示イベントの仕組み

先ずは、要素の表示イベントの仕組みを理解しておきましょう。

今回設定する方法では、HTML要素に付与したid属性の値をGTMで読み取り、測定したい要素が表示されたかどうかを判定しています。※id属性というのは、Webサイトのパーツにつけるマークのようなものです。

id属性は、ブラウザのデベロッパーモードで確認することができます。Google Chromeをもとに解説します。

計測したいバナーやフォームなどの上で右クリック（Macの場合は2本指クリック）し「検証」を選択するとHTMLコードが表示されます。

バナーやフォームにidが設定されているかを見てみましょう。idは、HTMLタグに付与されている「id=”任意の文字列”」です。

「idが見つからない」という場合もあると思いますが、次のパートでWordPressを使って任意のidを付与する方法を解説しますのでご安心ください。

※classなど、id以外の属性でもクリック計測することはできますが、ケースバイケースですのでここでは割愛します。

要素にid属性を付与する

計測したいHTML要素にidが付いていない場合は、WordPressの標準機能で付与することができます。

WordPressの記事編集画面を開いてみましょう。

対象のブロックを選択したら、右側にブロック編集メニューが表示されます。一番下の「高度な編集」内にある「HTMLアンカー」がidを付与する機能です。

ここに任意の文字列（半角アルファベット）を入力すると、その文字列がidとして設定されます。

WordPress以外のCMSをお使いの場合、HTML編集機能があればid付与は可能です。お使いのCMSのサポートページをご覧ください。また、HTMLで作成した静的なWebサイトの場合は、HTMLタグに直接idを付与していただければ同様のことが可能です。

HTMLの記述ルール上、同じIDはページ内で1つしか使えません。ボタンやバナーが複数ある場合、異なるIDを設定するようにしましょう。

フォームにid属性を付与する

WordPressをお使いの場合、フォームはプラグインを使用することが多いと思います。idの付与方法はプラグインによりますが、例えばメジャーな「Contact Form 7」では、ショートコードに「html_id=””」を追加してidを設定できます。

参考：form 要素に id や class 属性を追加できますか? – Contact Form 7公式サポート

目次のid属性について

WordPressの多くのテーマでは、投稿記事に目次を自動生成する機能がついています。この場合、すべての見出しにid属性が自動で付与されます（目次機能をオンにした場合）。例えば当サイトが使っているWordPressテーマ「Swell」の場合は、「index_id**」というidが自動で設定されます。

記事により見出し項目の数も変わり判定したいidの値も異なるため、少し工夫が必要です。この設定方法は説明が長くなるため、別の記事で詳しく解説します。

要素の表示イベントの設定手順

ここからは、要素の表示イベントの設定手順について解説します。GTMとGA4の管理画面を用意してください。

タグを作成

まずはタグを作成します。

GTM管理画面左側メニューの「タグ」をクリックし、「新規」ボタンを押します。

タグの名前はわかりやすいものをつけておきましょう。今回は「フォーム表示」としておきました。

タグタイプは「Google アナリティクス：GA4イベント」を選択します。

設定タグのプルダウンは、GTMに設定しているGA4の設定タグを選択します。※タグの名前はそれぞれ異なります。

イベント名には任意の文字列を入力します。ここでつけた名前がGA4に送られるので、わかりやすい名前にしておきましょう。ここでは「フォーム表示」としました。

トリガーを作成

次はトリガーの作成です。

トリガーは、タグを動かすための条件のことを指します。今回は「フォームが表示されたらタグを動かす」という条件を設定していきます。

タグ作成画面下部のトリガーエリア中央付近をクリックします。

トリガーの選択画面では、右上のプラスボタンを押します。

トリガーのタイプは、「要素の表示」を選択してください。

トリガー名はわかりやすいものをつけておきましょう。今回はタグと同じく「フォーム表示」としておきました。

「選択方法」のプルダウンは「ID」を選択します。「要素ID」には、今回計測するフォームにつけたid属性の「form02」を入力します。

「このトリガーを起動するタイミング」は、「1ページにつき１度」を選択しておきましょう。1度でも表示されれば、そのページビューでは何度フォームが表示されてもカウントは1のままとなります。

詳細の欄にある「計測の最小割合」は、要素の何％が表示されたら計測するかという設定です。50とすれば、下の図のように要素の50％が表示された場合にタグが動きます。

トリガーまで設定したら、右上の「保存」ボタンを押しましょう。

プレビュー

GTMでは、設定したタグが意図通りの動きをするかどうか本番公開前にテストをすることができます。

管理画面右上の「プレビュー」ボタンを押しましょう。

「Tag Assistant」という新規タブが開くので、中央の入力欄にテストするページのURLを記入し、「Connect」ボタンを押します。

さらに新規タブが開き、テストするページが表示されます。見やすいように別ウィンドウで開くなどしておくと良いでしょう。

一度Tag Assistantのタブに戻り、「Continue」ボタンを押します。

ページが開いたばかりの状態ではフォームが表示されていないため、「フォーム表示」タグはTags Not Firedのエリアにあります。

この状態でページをスクロールして、フォームを表示させてみましょう。フォームが半分以上表示されたところで、「フォーム表示」タグがTags Firedのエリアに移動したら成功です。

※Tag Assistantの画面が選択された状態でスクロールすると、タグが動かない場合があります。計測したいページを選択した状態でスクロールするようにしましょう。

タグが動いたことを確認したら、GA4の画面でも見てみましょう。「リアルタイムレポート」のイベント数に「フォーム表示」が表示されていれば、GA4でもイベント計測ができています。

公開

最後に、設定したタグを公開します。

GTM管理画面右上の「公開」ボタンを押しましょう。

「バージョン名」に作業内容がわかるものを入力し、右上の「公開」ボタンを押します。

タグが公開されたら作業は完了です。

まとめ

要素の表示イベントを使うと、フォーム一体型ランディングページのフォーム到達率やブログの読了率、サイト内バナーの表示回数を把握することが可能になります。

コンバージョンやクリックが発生しない場合、表示されたけど発生しないのか、それともそもそも表示されていないのかを把握する必要があります。そのために活用できるのが要素の表示イベントです。

フォームやバナーが表示されているのにコンバージョンが発生しないなら、フォーム周りやバナーの訴求内容を検討しましょう。フォームやバナーが表示される割合が低いなら、ユーザーを訴求エリアまで誘導する施策を考えなければなりません。

成果が上がらない原因を正しく把握し、効率的に改善を進めましょう。成果改善のためのマイクロコンバージョンの考え方については、以下の記事で詳しく解説しています。こちらもあわせてご覧ください。

要素の表示イベントを応用することで、モーダルウィンドウの表示計測も可能です。以下の記事を参考に設定してみましょう。

計測したイベント数は、GA4のレポートで確認できます。以下の記事で基本操作について解説しているので、あわせてご覧ください。

ここでは要素の表示イベントについて解説しましたが、Webサイトのパフォーマンスを上げるためには、他にもさまざまなデータを取る必要があります。以下のオンライン講座で、必要最低限のイベント設定を網羅的に学べますので、合わせてお役立てください。