GA4＆GTMで特定のボタンクリックイベントを計測しレポート表示する方法
- サイト内に設置したCTAボタンがクリックされているのかわからない
- 問い合わせボタンクリック率を計測したい
そんなお悩みをお持ちの方向けの記事です。
Webサイトの中にフォームやLPへ誘導するボタンを設置してみたものの、どの程度クリックされているのか把握できていないという場合も多いことでしょう。
Google タグマネージャーを使えば、サイト内の特定のボタンクリックをイベントとして計測し、Google アナリティクス（GA4）で分析できるようになります。Looker Studioなどで以下のような表が作れれば、ページやボタンの表示位置ごとのクリックされやすさを特定し、CVRの改善に役立てることが可能です。
この記事では、GTMとGA4を使ってWebサイト内のクリック計測する方法を紹介します。Webサイトのコンバージョンを改善したいとお考えの方はぜひご覧ください。
本設定については動画でも解説しています。
なお、すでにGoogle アナリティクスとGoogle タグマネージャーを設定が済んでいる前提で進めます。まだの方は以下の記事を参考に、先に設定を済ませておきましょう。
アフィリエイトリンクや目次などのテキストリンクの計測方法は別の記事で紹介しています。以下の記事もあわせてご覧ください。
ボタンクリックイベントを含め、体系的に学べるオンライン講座を用意しています。本1冊分程度の価格で学べますので、以下のページからご覧ください。
GTM＆GA4を学べるオンライン講座
GoogleタグマネージャーでGA4のカスタムイベントを設定する方法や、アクセス解析の基本が学べる講座を用意しています。
ボタンクリック計測の仕組み
まずは、ボタンクリックを計測する仕組みを理解しておきましょう。GTMでクリックを計測する方法は1つではありませんが、ここではGTMやWordPressの操作に慣れていない方でも比較的取り組みやすいものを紹介します。
今回計測する方法では、計測する要素を特定するためにHTML要素のid属性を利用します。※「HTMLの話をされると頭痛がする」という方でも設定できますので安心してください。
id属性は、ブラウザのデベロッパーモードで確認することが可能です。Google Chromeを元に説明します。
計測したいボタンやバナーの上で右クリック（Macの場合は2本指クリック）し「検証」を選択すると、ボタンを構成するHTMLコードが表示されます。
ボタンにidが設定されているかを見てみましょう。idは、ボタンを形作るHTMLタグに付与されている「id=”任意の文字列”」です。このidの文字列をGTMで読み取ることで、ボタンがクリックされかどうかを判定しようというわけです。
「idが見つからない」という場合もあるでしょう。ですが問題ありません。次のパートで、WordPressを使って任意のidを付与する方法を解説します。
※idが付与できない場合の計測方法についてもあわせて説明します。
ボタンクリックの計測も含め、Webサイトに設置したユーザー導線のイベント計測をまとめて設定したい方に向けて、Udemyのオンライン講座もご用意しています。以下のページで割引クーポンを配布していますので、よろしければご利用ください。
※割引率はタイミングにより異なります。
ボタンクリックを計測する手順
ボタンクリックを計測するには、Googleタグマネージャー（GTM）による設定が必要です。
ボタンのHTML要素にあらかじめ任意のidを振っておき、そのidの振られた要素がクリックされたときにタグが動くようGTMでトリガーを設定します。
GTMの操作に慣れていない方は、以下の記事もあわせてご覧ください。
手順は以下の通りです。
ボタンにid属性を付与する
最初にボタン要素にidを付与しましょう。
WordPressの記事編集画面でクリック計測を設定したいブロックを選択したら、右側にブロック編集メニューが表示されます。一番下の「高度な編集」内にある「HTMLアンカー」がidを付与する機能です。
ここに任意の文字列（半角アルファベット）を入力すると、その文字列がidとして設定されます。
WordPress以外のCMSをお使いの場合、HTML編集機能があればidを付与できます。お使いのCMSのサポートページをご覧ください。
また、HTML要素に直接idを付与することも可能です。その際には、以下のようにidを付与したい要素に直接追加しましょう。「id=””」の部分に任意のid文字列を付与します。
<button type="button" id="button-a">ボタンA</button>idにはいくつかの命名ルールがあります。正しい計測のために、最低限以下は守るようにしてください。
- 半角英数のみ使用可能。
- 使える記号は「_（アンダーバー）」と「-（ハイフン）」のみ。
- 数字で開始することができない。
- 1つのページ内で同じidの使用は1回まで。
→1つのページ内で同じidを複数使うことはできないため、同じボタンパーツを使う場合にも「button-a」「button-b」などとidは分けておきましょう。こうしておくことで、「どのボタンがクリックされたのか」という区別もできるようになります。
ページの管理権限がないなど、ボタンにidを付与できない場合もあるでしょう。
こうした場合には、ブラウザのデベロッパー機能を使い、すでに設定されているidまたはclassを使います。
Chromeをお使いの場合には、計測したいバナーの上で右クリックし、「検証」を選択します。以下の画像のように、デベロッパーツールが起動しHTML要素が表示されたら、計測したいボタン要素の上で右クリックし「コピー ＞ selectorをコピー」を選択しましょう。
上記の例では、「lp-content > main > div > div:nth-child(3) > div > div.swell-block-button.green_.is-style-btn_normal > a」という文字列が取得できますが、これはWebサイトによって変わります。
この文字列を、後のトリガー設定で使います。
組み込み変数の設定
設定したidをバナーから取り出すために、組み込み変数の設定を行います。
GTM管理画面のサイドバーから「変数」メニューを開き、「設定」ボタンを押します。
「組み込み変数の設定」画面から、「クリック」の項目すべてにチェックを入れます。
「変数」とは、クリックした場所に設定されたURLやidなどを一時的に格納しておく箱のことです。
本来はプログラムを書いて設定するものですが、GTMにはいくつかの変数がデフォルト設定されています。それが「組み込み変数」と呼ばれるものです。
タグの作成
GTMでタグを作成します。それぞれの設定項目については、以下のキャプチャと表を参考にしてください。
設定タグ
| タグ | 備考 |
|---|---|
| GA4設定タグ | Googleアナリティクスの初期設定で行ったGA4設定タグ（タグの名前はそれぞれ異なります）を選択します。 GA4設定タグがない場合には以下を参照し設定してください。 Googleアナリティクスの導入方法 – Webサイトへのタグ設置 |
イベント名
| 設定内容 | 備考 |
|---|---|
| button_click （または独自のイベント名） | ここで入力した値がGA4にイベント名として表示されます。 今回は「button_a_click」としましたが、ご自身でわかりやすい名前をつけて問題ありません。 |
※イベント名に任意の名前をつけるときは、以下のルールを守る必要があります。
- 記号は「_（アンダーバー／アンダースコア）」のみ使用可能
- 先頭は文字のみ使用可能（数字や記号は使用不可）
※イベント名は日本語でもつけることができますが、外部連携の際などに不具合が起きる可能性もあります。心配な方は英語でイベント名をつけるようにしましょう。筆者のサイトでは日本語のイベント名を付けているものもありますが、現在のところ不具合はありません。 - 英語でイベント名をつける場合、予約済みのイベント名を使うことができません。以下のGoogle公式ヘルプを参考にしてください。
イベントパラメータ
| パラメータ名 | 値 | 備考 |
|---|---|---|
| button_id | button_a | クリックされたボタンを区別するためのidです。 |
| cta_click_count | 1 | バナーのクリック数を独立した指標として表示するための設定です。 後述するパートでGA4の「カスタム指標」として登録します。 |
| click_url | {{Click URL}} | クリックされたボタンに設定されたURLを読み取るための設定です。 |
| click_text | {{Click Text}} | クリックされたボタンに設定されたテキストを読み取るための設定です。 |
※パラメータ名は任意の文字列で構いませんが、以下のルールを守る必要があります。
- 半角英数で記述
- 記号は「_（アンダーバー）」のみ使用可能
- 先頭は英字のみ使用可能
トリガーの作成
タグを動かすきっかけであるトリガーは、「クリック – すべての要素」を使用します。
今回は特定のボタンクリックのみを計測するので、「一部のリンククリック」を選択しましょう。
表示されたプルダウンと入力エリアには、以下の設定を行います。
| 変数 | マッチタイプ | 値 | 備考 |
|---|---|---|---|
| Click Element | CSSセレクタに一致 | #button-a,#button-a * | 値は、バナーに付与したidを入力します。 |
CSSセレクタとは、HTMLページの中の特定の部分（文字、画像、ボタンなど）に対して、デザインや装飾を適用するための記述です（本来は装飾を適用させるためのものですが、GTMではクリックされた要素を特定するために使用します）。タグ名や、タグに付与されたclass名、id名などを指定するために、記号を使ったルールに基づいて記述します。
上記で設定した例では、以下のCSSセレクタを使っています。
| CSSクラス | 意味 |
|---|---|
| #（シャープ） | idのことを表します。#button-aと記述することで、「button-a」というidが付与された要素を指定できます。 |
| *（アスタリスク） | 「*」は、単体で使うとページ内のすべての要素を指定できる強力な記号です。「#button-a *」のように、idセレクタと組み合わせることで、「button-a」というidセレクタに囲まれたすべての要素を指定できます。 |
| ,（カンマ） | カンマで区切ることで、複数の要素を指定することが可能になります。今回は、「button-a」というidが付与された要素そのものと、「button-a」というidで囲まれたエリアを指定しています。 |
idを付与できず、デベロッパーツールでCSSセレクタを取得した場合には、トリガー条件は以下のように記述します。
| 変数 | マッチタイプ | 値 | 備考 |
|---|---|---|---|
| Click Element | CSSセレクタに一致 | lp-content > main > div > div:nth-child(3) > div > div.swell-block-button.green_.is-style-btn_normal > a | 値は、取得したCSSセレクタを入力します。 ※左の値はサンプルです。 |
プレビュー
タグを設定したら、問題なく動作するかどうか必ずプレビューしましょう。
GTM管理画面右上の「プレビュー」ボタンを押します。
表示された画面に検証を行うURLを入力し「Connect」ボタンを押すと、「Tag Assistant」という検証画面に移動し、新規タブで検証用のページが開きます。
新規タブで開いたページ上で検証を行います。
下の画像のように、検証を行うページとTag Assistantのページを並べて表示しておくと良いでしょう。
Tag Assistantのページは、動いているタグが表示される「Tags Fire（タグが発火した）」と動いていないタグが並ぶ「Tags Not Fire（タグは発火していない）」の上下2つのエリアに分かれています。
今回検証する「ボタンAクリック」のタグはまだ動かしていないので、Tags Not Fireエリアにあります。検証用のページでバナーをクリックした時、このタグがTags Fireエリアに移動するかどうか見ていきます。
ボタンをクリックし、「ボタンAクリック」タグが以下の画像のようにTags Fireエリアに移動すれば、トリガー設定は問題ありません。
GA4のリアルタイムレポートでもイベントの発生状況を見ておきましょう。以下の画像のように、イベント数のカードに「button_click」が表示されていれば、GA4にもイベントが送られています。
公開
設定に問題がなければ、コンテナを公開します。
「バージョン名」の入力を求められるので、「ボタンクリックイベント設定」などわかりやすいものを記載しておきましょう。
コンテナを公開しなければイベントは計測されないので注意してください。
カスタムディメンションの登録
カスタムディメンションを設定することで、クリックされたボタンに設定されたbutton_idをレポートに表示することができます。
「click_url」と「click_text」も登録しておけば、ボタンに設定されたURLとテキストも取得できます。
※ボタンのHTML構造によっては取得できないこともあります。
以下のように、3つのカスタムディメンションを登録できれば完了です。
カスタム指標の登録
カスタム指標を設定することで、ボタンのクリック数を「イベント数」から独立させて見ることができるようになります。ページビュー数などと掛け合わせて計算指標を作る際に利便性が高くなるので、ぜひ設定しておきましょう。
設定したイベントは、コンバージョンとして設定することも可能です。コンバージョン設定については以下の記事で解説しているので、必要な場合はこちらも参考にしてください。
ボタンのHTML構造による計測方法の違い
ここでは、ボタンのHTML構造による計測方法の違いについて解説します。
Webサイトの数だけHTMLのマークアップ方法が異なり、ボタンの構造もさまざまです。下の表でまとめたボタンも、見た目はすべて同じですが、ボタンを構成するHTMLタグは異なります。
代表的なボタンの構造をまとめましたので、ある程度HTMLの知識がある方は、以下の表もヒントにしてください。
| ボタンの見た目 | ボタンのHTMLコード | 説明 |
|---|---|---|
<a href="http://example.com" class="button">aタグ</a> | リンクを表すaタグで作られたボタンです。WordPressの標準機能で作成したボタンはaタグになっています。 GTMの「リンククリック」トリガーでも計測可能ですが、aタグに高さが設定されておらずユーザーがaタグ自体をクリックできない場合にはうまく反応しないことがあります。 | |
<div class="button">divタグ</div> | 特定の意味を持たないdivタグで作られたボタンです。 aタグと組み合わせて使われているパターンもよく見かけます。 divタグをaタグが囲んでいるパターン、またはaタグをdivタグを囲んでいるなどさまざまです。 多重構造になっている場合には、ボタンの一番外側の要素にidを付与するのが良いでしょう。 | |
<input type="button" value="inputタグ" class="button"> | inputタグはフォーム内のボタンで使われるタグです。 フォームのボタンクリックを計測する場合には、このタグのクリックを計測します。 こちらも装飾用のdivタグやリストタグで囲まれている場合があるため、ボタンの一番外側の要素にidを付与しましょう。 | |
<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」はボタンの表示回数です。今回解説しなかった表示イベントで計測しています。設定方法は以下の記事をご覧ください。
よくある質問
ボタンクリックイベントの設定に関するよくある質問をまとめました。
Googleタグマネージャーを使わずにボタンクリックイベントを計測することはできますか？
onclickイベントを使って計測することは可能ですが、HTMLソースを編集する必要がありGTMを使う方法よりもむしろ難易度は高くなります。
クリックイベントを追加する際に設定工数がかかりすぎるため、あまり現実的とは言えない方法です。苦労してこの設定を行うくらいならGTMを設置することを強くおすすめします。
どうしてもGA4単体で設定したい場合には、以下の開発者向けサイトをご参照ください。
clickイベントでボタンクリックは計測できますか？
GA4の拡張イベントである「click」イベントは外部リンクのクリックを計測するものです。ボタンのリンク先が外部ドメインのものであれば計測できます。
同一ドメイン内のボタンクリックイベントを計測するには、GTMによる設定が必要です。
また、すべての外部リンクをclickで取れるかといえばそうでもありません。例えばボタンのHTMLが多重構造になっておりaタグに高さが設定されていない場合はクリックイベントをうまく計測できない場合があります。また、clickイベントではカスタム指標を設定することができず、レポートの際に不便です。
他のイベントとは区別したい特別な外部リンククリックについては、GTMで設定することをおすすめします。
設定したイベントがレポートに表示されません。
まずは以下のいずれかに該当しないか確認してみましょう
- GA4のタグが適切に設定されているか
- GTMで設定した場合には設定したGA4の測定IDが正しいか
- GTMで設定した場合、コンテナが公開されているか
- イベント（カスタムイベント）設定後24時間経過しているか
→ユーザー独自に設定したイベントは、レポートへの反映は設定後24時間経過後になります。
上記に当てはまらない場合には、イベント設定そのものが誤っている可能性があります。当記事を参考に、もう一度設定を見直してみてください。
それでも問題解決しない場合には、弊社でもサポートを行っておりますのでお問い合わせください。
これまで取得できていたボタンクリックイベントが取れなくなってしまいました。
イベントが突然取れなくなる要因はさまざまあり一概には言えませんが、GTMのタグが適切に設定されているのであれば、ボタンのHTML構造が変わったことが考えられます。WordPressのテーマを変えるなど、Webサイトのデザインや構造に関わる変更を行ってはいませんか？
Webサイトのデザインや構造を変えた場合、改めてボタンクリックイベントを設定し直さなければならない場合があります。
まずは「これまでどのような方法でクリックイベントを取得していたのか」を確認してみましょう。idをキーにしてクリックイベントを取得していたのであれば、そのidがボタンに付与されていなければなりません。
idを調べるには、ブラウザの開発者向け機能を使うのが便利です。Chromeであれば、調べたい要素の上で右クリックし「検証」を選択しましょう。
以下のように右側にHTMLが表示されますので、対象のボタンにどのようなidが付与されているのかを確認します。
まとめ
GA4によるボタンクリックイベントの設定方法について解説しました。
ブログ記事やヘッダーにお問い合わせボタンなどを設置している場合は、クリック率を計測することで、ユーザーにうまく訴求できているかどうか検証してみましょう。
表示イベントとともに設定すれば、以下の画像のように場所ごとの「本当のクリック率」を算出可能です。
ボタン以外にも、バナーテキストなど形式の異なるCTAを設置していることもあるでしょう。今回紹介したイベント設定方法で可能な場合もあれば、異なるトリガーを使わなければならない場合もあり、Webサイトの構造によりまちまちです。
内部リンクの計測方法は他にもありますので、以下の記事も参考にしてみてください。
また、ボタンやバナーなどのCTAをどのように使い分ければ良いのかわからないという方向けには、以下の記事がお役に立てるはずです。あわせてご覧ください。
このページではボタンクリックというピンポイントなイベントについて解説しましたが、Webサイトでは他にもさまざまなデータを計測する必要があります。これらを体系的に学びたい方に向けて、オンライン講座も用意しています。
以下のページで本1冊分程度で学べるクーポンをご用意していますのでご利用ください。
GTM＆GA4を学べるオンライン講座
GoogleタグマネージャーでGA4のカスタムイベントを設定する方法や、アクセス解析の基本が学べる講座を用意しています。
GA4を「ざっくりと」理解したい方へ
Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。
※新しいタブでフォームが開きます。
YouTubeチャンネル
本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。
関連記事
-
GA4のイベントって何だ？｜Webサイト改善に必須の超重要概念を理解しよう -
GA4でバナークリックを計測する方法｜オウンドメディアのCTA評価に
-
GA4でサンクスページ到達をコンバージョン（キーイベント）設定する2つの方法 -
GA4で目次クリックを計測する方法｜エンゲージメント率に影響する隠れた重要指標 -
GA4のコンバージョン（キーイベント）の登録方法と設定すべきイベント3選【GTM＆GA4】
-
GA4のカスタムディメンション＆カスタム指標でユーザー行動を見える化しよう -
Webサイトのボトルネックを見つけるマイクロコンバージョンとは【考え方＆設定方法】 -
GTMとGA4でモーダルウィンドウの表示を計測する方法【コンテンツの最適化】
