【GTM】GA4で特定のバナー・ボタンのクリック数を計測する方法

どうもウェブ企画パートナーズ竹内です。今回はGoogleアナリティクス4（GA4）で、特定のバナーやボタンをユーザーがクリックした数を知りたい方向けに、その設定方法をお伝えしていければと思います。

GA4の標準機能だけでは計測できない

まず最初に基本的なことをお伝えしておきたいんですけど、冒頭にGoogleアナリティクス4を使ってとお伝えしたんですが、実際はGoogleアナリティクス4だけでは実現不可能です。

この設定を行うにはGoogleタグマネージャーというツールが必要になります。Googleアナリティクス4を導入するのに、最近はタグマネージャーを経由するのが一般的になってきているので、ほとんどの方はすでに使っているかとは思うんですけど、もしGoogleタグマネージャーを利用せずにGA4を利用しているという方は、まずタグマネージャーの設定から始めるようにしてください。タグマネージャーの設定方法については別途解説しているので、そちらを参考にしてもらえればと思います。

GA4の「拡張計測機能」では計測できないのか

GA4の管理画面の「管理」→「データストリーム」から「拡張計測機能」という項目が確認できます。デフォルトでオンになっているこの機能の中に「離脱クリック」という項目があって、一見これでクリックが測れそうに見えるんですよね。

ただ、この「離脱クリック」はあくまでも外部サイトへ移動したときのクリックを計測するものです。バナーやボタンというのは基本的にサイト内で遷移するためのものなので、この機能では計測できないんですね。なので個別に設定する必要があるということで、これからその設定方法をお伝えしていきます。

なぜ「どのリンクがクリックされたか」を識別する必要があるのか

実際の設定に入る前に、まず概念を説明したいと思います。

たとえば、あるWebサイトに「必ず最初にお読みください」というページへ誘導するリンクが2か所あったとします。一つはページ上部のリンクテキスト、もう一つはナビゲーションメニューの「当サイトについて」という項目で、どちらも同じページに遷移するリンクです。

GA4でそのページへの移動だけを見ていても、ユーザーがどちらのリンクを経由してたどり着いたのかが分かりません。「上部のリンクテキストをクリックしてくれた人だけを計測したい」というシーンは実務でも十分あり得ますよね。

そのためにリンクを識別する仕組みが必要で、その識別をGoogleタグマネージャーで設定していく必要があります。

STEP 1：Googleタグマネージャーで組み込み変数を有効化する

では実際の設定に入ります。まず最初に、Googleタグマネージャーの標準では機能がオフになっているものがあるので、それをオンにするところから始めていく必要があります。

Googleタグマネージャーの管理画面を開き、左メニューから「変数」を押してください。最初からいくつかの変数が設定されていますが、これだけだとちょっと足りないので「設定」ボタンを押して追加していきます。

設定を押すと、オフになっている変数がたくさん出てきます。この中のクリック関連の変数を全部オンにしましょう（「Click Element」「Click Classes」「Click ID」「Click Target」「Click Text」「Click URL」などが該当します）。これで色々な設定ができるようになるので、そのまま閉じればOKです。

変数の一覧画面に戻ると、先ほどオンにしたクリック関連の変数が追加されています。これで準備が整いました。

STEP 2：HTMLにIDを追加してリンクを識別できるようにする

次に、計測したいリンクやボタンをGoogleタグマネージャーが識別できるように、WebサイトのHTMLを修正する必要があります。

WebサイトのHTMLをご覧になると、リンクのコードはおおよそ次のような構造になっています。

<a class="button-class" href="リンク先URL">リンクテキスト</a>

この<a>タグはリンクを意味していて、classという属性でスタイルなどが設定されています。ただ、classは複数の要素に共通して使われることが多いため、特定のリンク一つだけを識別するためにはidという属性を追加するのが適切です。

具体的には次のようにid="button01"といった形で追記します。

<a class="button-class" id="button01" href="リンク先URL">リンクテキスト</a>

こういったHTMLのコードを見ると、慣れていない方はアレルギー反応が出てしまうかもしれないんですが、最近はAIツールも発達しているのでもしかしたら挑戦できるかもしれません。ただ、不安な方はぜひ専門家に依頼されることをお勧めします。

HTMLを修正してサーバーにアップロードしたら、ブラウザのソース表示（右クリック→「ページのソースを表示」）でid="button01"が追加されているか確認しておきましょう。

なぜClick IDで識別するのか

Googleタグマネージャーでは、クリックを識別するための条件としてURL、Class、IDなど複数の方法が使えます。ではなぜIDを使うのかというと、IDというのはHTML上で基本的に1ページにつき1つしか使わないルールがあるので、識別がしやすいんですね。

たとえばURLで識別しようとした場合、ページ上に同じリンク先を指すリンクが複数あると区別できません。Classも複数の要素に同じ値がついていることが多いため同様です。IDであれば一意に特定できるので、今回はIDで設定していくということです。もちろん、他の方法で確実に識別できるのであれば、IDでなくても問題ありません。

STEP 3：Googleタグマネージャーでトリガーを作成する

次にGoogleタグマネージャーの設定に戻って、トリガーを作成します。トリガーとは「どういう条件のときにタグを発動（業界では”発火”といいます）させるか」を定義するものです。

左メニューから「トリガー」を押してください。まだ何も作成されていない状態なので、「新規」ボタンを押して新しいトリガーを作っていきます。

トリガー名は分かりやすいものにしておくといいです。今回は「bannerclick」や「buttonclick」などにしておくと後で見返したときに分かりやすいかと思います。

「トリガーのタイプを選択」という画面が開くので、「クリック」→「すべての要素」を選択します。

次に「すべてのクリック」か「一部のクリック」かを選べますが、今回は特定のボタンやバナーだけを計測したいので「一部のクリック」を選択します。

すると条件を設定する欄が出てきます。ここで先ほど説明したClick IDを使います。

• 条件の種類：Click ID
• 一致条件：等しい（「含む」だと条件が緩くなって無駄な計測が生まれてしまうので、「等しい」にします）
• 値：button01（HTMLに追加したidの値と同じものを入力）

この設定ができたら保存します。

STEP 4：Googleタグマネージャーでタグを設定する

トリガーの設定が完了したら、いよいよ最終的なタグの設定です。左メニューの「タグ」を押して、「新規」で作成します。

タグ名は「buttonclick」など分かりやすい名前をつけておきましょう。

タグの設定

「タグの設定」エリアをクリックしてタグのタイプを選びます。今回はGoogleアナリティクスに計測データを送りたいので「Google アナリティクス」→「GA4イベント」を選択します。

次に測定IDを入力します。これはGA4の管理画面→データストリームから確認できる、「G-」から始まるIDです。それをコピーしてここに貼り付けてください。

そしてイベント名を入力します。「buttonclick01」など、GA4のレポートで見たときに分かりやすい名前をつけておくと良いです。

その他の詳細設定として「1回のイベントにつき1度」「1ページにつき1度」「無制限」などの計測タイミングを選べる項目もありますが、これは難しいのでデフォルトのままで問題ありません。

トリガーの紐付け

「トリガー」エリアに先ほど作成した「buttonclick（またはbannerclick）」を選択します。これでタグとトリガーが紐付けられます。

設定が完了したら保存を押してください。

STEP 5：忘れずに「公開」する

ここが一番やり忘れがちなポイントです。 タグやトリガーを設定して満足して、公開を忘れてしまうことが本当によくあるんですよね。

Googleタグマネージャーの右上にある「公開」ボタンを必ず押してください。バージョン名（例：「button01追加」など）を入力して公開します。これをしないと設定が本番環境に反映されないので、絶対に忘れないようにしましょう。

STEP 6：プレビュー機能で動作確認する

公開前に動作確認をする場合は、Googleタグマネージャーの「プレビュー」機能を使うのがおすすめです。

管理画面の「プレビュー」ボタンを押すと、URLを入力する画面が出てきます。そこに計測対象のWebサイトのURLを貼り付けると、サイトがタグマネージャーのデバッグモードで開きます。

サイトが開いたら、設定した対象のリンクやボタンをクリックしてみてください。タグマネージャーのプレビュー画面上で「未配信のタグ」に表示されていたbuttonclickタグが「配信されたタグ」に移動すれば、正しくタグが発火していることが確認できます。

GA4での計測結果の確認方法

プレビューで動作確認できたら、GA4の管理画面でも確認してみましょう。

GA4の左メニューから「レポート」→「リアルタイム」を開くと、イベントが確認できます。ただし注意点があって、最初に設定したイベントは24時間から48時間後くらいに表示されるようになるので、すぐには出てこないんですね。翌日などにもう一回テストして確認してみてください。イベント一覧にbuttonclick01が表示されていたら成功です。

もっと詳しく分析したい場合は「探索」メニューを使う

リアルタイムレポートだけではなく、「どこから来たユーザーがそのボタンをクリックしたのか」といったより詳細な分析もGA4では可能です。

たとえば「検索から来たユーザーがそのボタンをクリックしたのか、広告から来たユーザーがクリックしたのか」を判別するには、GA4の「探索」メニューでオリジナルのレポートを作成することで分析できます。今回はボリュームが多くなるので割愛しますが、さらに踏み込んだ分析をしたい方はぜひ試してみてください。

まとめ

以上が、特定のバナーやボタンをGoogleアナリティクス4で計測するために、Googleタグマネージャーを設定する方法です。大まかな流れをおさらいすると次のとおりです。

1. HTMLにid属性を追加して計測対象のリンクを識別できるようにする
2. Googleタグマネージャーでクリック関連の組み込み変数を有効化する
3. トリガーを作成し、Click IDで対象のリンクを特定する
4. GA4イベントのタグを作成してトリガーと紐付ける
5. 必ず「公開」する

タグマネージャーは慣れていないと概念がちょっと難しく感じるかもしれないんですけど、慣れてくると「なるほどこういう仕組みか」と分かってきます。ただ、HTMLをあまり触ったことがない方は、できれば専門家に依頼するのをお勧めします。最近はAIも発達しているので、チャレンジしてみるのもありかもしれませんが、本番サイトの修正はリスクを考慮した上で判断してください。

こういったWeb周りの面倒くさい設定や管理を弊社ではWeb担当者代行サービスとしてまるっと代行しています。LINE・SNS・ホームページ・広告など、PRのためにWeb上でやらなければならない細かいタスクは多いですが、専門知識を身につけるのはなかなか難しいですよね。そういったことを専門家が代わりに対応するサービスですので、興味のある方はぜひお問い合わせいただければと思います。