GA4＆GTMで特定のボタンクリックイベントを計測しレポート表示する方法

そんなお悩みをお持ちの方向けの記事です。

Webサイトの中にフォームやLPへ誘導するボタンを設置してみたものの、どの程度クリックされているのか把握できていないという場合も多いことでしょう。

Google タグマネージャーを使えば、サイト内の特定のボタンクリックをイベントとして計測し、Google アナリティクス（GA4）で分析できるようになります。Looker Studioなどで以下のような表が作れれば、ページやボタンの表示位置ごとのクリックされやすさを特定し、CVRの改善に役立てることが可能です。

この記事では、GTMとGA4を使ってWebサイト内のクリック計測する方法を紹介します。Webサイトのコンバージョンを改善したいとお考えの方はぜひご覧ください。

なお、すでにGoogle アナリティクスとGoogle タグマネージャーを設定が済んでいる前提で進めます。まだの方は以下の記事を参考に、先に設定を済ませておきましょう。

ボタンクリックイベントを含め、体系的に学べるオンライン講座を用意しています。本1冊分程度の価格で学べますので、以下のページからご覧ください。

ボタンクリック計測の仕組み

まずは、ボタンクリックを計測する仕組みを理解しておきましょう。GTMでクリックを計測する方法は1つではありませんが、ここではGTMやWordPressの操作に慣れていない方でも比較的取り組みやすいものを紹介します。

今回計測する方法では、計測する要素を特定するためにHTML要素のid属性を利用します。※「HTMLの話をされると頭痛がする」という方でも設定できますので安心してください。

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

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

ボタンにidが設定されているかを見てみましょう。idは、ボタンを形作るHTMLタグに付与されている「id=”任意の文字列”」です。このidの文字列をGTMで読み取ることで、ボタンがクリックされかどうかを判定しようというわけです。

「idが見つからない」という場合もあるでしょう。ですが問題ありません。次のパートで、WordPressを使って任意のidを付与する方法を解説します。

※idが付与できない場合の計測方法についてもあわせて説明します。

ボタンクリックを計測する手順

ボタンクリックを計測するには、Googleタグマネージャー（GTM）による設定が必要です。

ボタンのHTML要素にあらかじめ任意のidを振っておき、そのidの振られた要素がクリックされたときにタグが動くようGTMでトリガーを設定します。

GTMの操作に慣れていない方は、以下の記事もあわせてご覧ください。

手順は以下の通りです。

設定したイベントは、コンバージョンとして設定することも可能です。コンバージョン設定については以下の記事で解説しているので、必要な場合はこちらも参考にしてください。

ボタンのHTML構造による計測方法の違い

ここでは、ボタンのHTML構造による計測方法の違いについて解説します。

Webサイトの数だけHTMLのマークアップ方法が異なり、ボタンの構造もさまざまです。下の表でまとめたボタンも、見た目はすべて同じですが、ボタンを構成するHTMLタグは異なります。

代表的なボタンの構造をまとめましたので、ある程度HTMLの知識がある方は、以下の表もヒントにしてください。

ボタンの見た目	ボタンのHTMLコード	説明
aタグ	<a href="http://example.com" class="button">aタグ</a>	リンクを表すaタグで作られたボタンです。WordPressの標準機能で作成したボタンはaタグになっています。 GTMの「リンククリック」トリガーでも計測可能ですが、aタグに高さが設定されておらずユーザーがaタグ自体をクリックできない場合にはうまく反応しないことがあります。
divタグ	<div class="button">divタグ</div>	特定の意味を持たないdivタグで作られたボタンです。 aタグと組み合わせて使われているパターンもよく見かけます。 divタグをaタグが囲んでいるパターン、またはaタグをdivタグを囲んでいるなどさまざまです。 多重構造になっている場合には、ボタンの一番外側の要素にidを付与するのが良いでしょう。
	<input type="button" value="inputタグ" class="button">	inputタグはフォーム内のボタンで使われるタグです。 フォームのボタンクリックを計測する場合には、このタグのクリックを計測します。 こちらも装飾用のdivタグやリストタグで囲まれている場合があるため、ボタンの一番外側の要素にidを付与しましょう。
buttonタグ	<button type="submit" class="button">buttonタグ</button>	buttonタグで作られたボタンです。 JavaScriptと組み合わせてユーザーにアクションさせるような機能実装に使われることが多いボタンです。 他のタグと同様、多重構造になっている場合にはボタンの一番外側の要素にidを付与しましょう。

上記はあくまでも例です。繰り返しになりますが、ボタンのHTML構造はWebサイトによりさまざまなため、上記を参考にご自身のWebサイトに当てはめて実装してみてください。

クリックイベント設定を行う際の注意点

この記事ではidやclassを識別子として使ったクリックイベントの計測方法を紹介しています。

ただidやclassなどは、そもそもWebサイトのデザインのための属性であり、イベント計測用のものではないという点には注意しましょう。デザインやWebサイトの構造が変われば、それまで取れていたイベントも取得できなくなる場合があります。

「ある日突然イベントが取れなくなる」というトラブルを避けるためには、Webサイトの制作者側とも連携しながら運用していくことが重要です。

クリックイベントは表示イベントとセットで計測するのが効果的

クリックイベントを設定する際には、合わせて「表示」のイベントも設定するのが効果的です。

例えページビューがあったとしても、そのボタンがユーザーに表示されなければ、クリックされるはずがないからです。特にページの下の方にあるボタンの場合は、表示されないことも多いです。

ボタンがクリックされない要因が「ボタンが見られていないから」なのか「ボタンの訴求に魅力がないから」なのかによって、行うべき改善施策も変わってきます。

事象	施策
ボタンが見られていない	ボタンの掲載位置変更 記事のリライト等によるスクロール率の改善
ボタンが表示されているがクリックされない	ボタンの見た目の変更（デザイン、訴求） テキストリンクへの変更

表示とクリックをセットで計測することで、ボタンのパフォーマンスを正しく評価することが可能になります。

表示イベントの計測方法については、以下の記事をご覧ください。

ボタンクリックイベントをレポートで見る方法

設定したイベントは、GA4のレポートや探索、Looker Studioなどの各種レポートで確認できます。

レポートの詳しい操作方法は以下の記事で解説していますので、あわせてご覧ください。

レポート

イベント設定後24時間程度経つと、カスタムイベントをレポートに表示することができるようになります。

ここでは例として、ページ別のボタンクリックイベントを見てみましょう。

GA4管理画面から「レポート ＞ エンゲージメント ＞ ページとスクリーン」と進むと、ページ別のレポートが表示されます。

表の中の「イベント数」のプルダウンを「button-a-click」に切り替えれば、ボタンクリックのイベント数を見ることができます。

探索

設定したカスタム指標「cta_click_count」は、探索機能を使って確認できます。探索でも同様に、設定後24時間経過したらカスタムイベントやカスタム指標を表示できます。

GA4管理画面から「探索」をクリックし、「空白」のレポートを表示させましょう。

ディメンションに「ページパスとスクリーンクラス」、指標に「cta_click_count」「表示回数」を設定すると、以下のような表が表示されます。

Looker Studio

ボタンの表示回数に対するクリック数のような計算指標を見たい場合には、Looker Studioが便利です。

計算指標を作る場合は、「フィールドの作成」ボタンを押し、計算式に「[cta_click_count]/[cta_view_count]」などと設定します。

※分母にしている「cta_view_count」はボタンの表示回数です。今回解説しなかった表示イベントで計測しています。設定方法は以下の記事をご覧ください。

よくある質問

ボタンクリックイベントの設定に関するよくある質問をまとめました。

まとめ

GA4によるボタンクリックイベントの設定方法について解説しました。

ブログ記事やヘッダーにお問い合わせボタンなどを設置している場合は、クリック率を計測することで、ユーザーにうまく訴求できているかどうか検証してみましょう。

表示イベントとともに設定すれば、以下の画像のように場所ごとの「本当のクリック率」を算出可能です。

ボタン以外にも、バナーテキストなど形式の異なるCTAを設置していることもあるでしょう。今回紹介したイベント設定方法で可能な場合もあれば、異なるトリガーを使わなければならない場合もあり、Webサイトの構造によりまちまちです。

内部リンクの計測方法は他にもありますので、以下の記事も参考にしてみてください。

また、ボタンやバナーなどのCTAをどのように使い分ければ良いのかわからないという方向けには、以下の記事がお役に立てるはずです。あわせてご覧ください。

このページではボタンクリックというピンポイントなイベントについて解説しましたが、Webサイトでは他にもさまざまなデータを計測する必要があります。これらを体系的に学びたい方に向けて、オンライン講座も用意しています。

以下のページで本1冊分程度で学べるクーポンをご用意していますのでご利用ください。