GA4でバナークリックを計測する方法|オウンドメディアのCTA評価に

基礎を身につければ、GA4とGTMは怖くなくなります。→6時間のオンライン講座を受ける

  • サイト内に設定したバナーのクリック数を計測したい
  • リンク先URLが内部リンクになっているバナーのクリック数を計測したい

オウンドメディアを運営されている場合、サイト内に設置したバナーがどれだけクリックされたのかは重要な指標です。

記事単位でバナーのクリック数を把握できるだけでなく、クリック率が悪い記事のパフォーマンス改善に役立てることができるからです。

しかし、GA4にはデフォルトで内部リンクのクリック計測機能がないため、クリック数を把握できずに困っている人も多いことでしょう。

この記事では、サイト内に配置したバナーのクリック数を計測する方法を解説します。紹介する方法を実行することで、以下の図のようにバナーが表示されたページや表示位置ごとのクリック数を算出することが可能になります。

上記の図では、クリック率の分母はバナーの表示回数になっています。表示回数の計測方法についても言及していますので、より正確なクリック率を計測したい方は後半までご覧ください。

なお、バナーのクリック数を計測するにはGoogleタグマネージャー(GTM)の導入が必要です。未導入の方は、以下の記事を参考に設定してみましょう(簡単です)。

アフィリエイトリンクのクリック率について

アフィリエイトバナーのクリック計測については、この記事とは別の「外部リンククリックの計測」によって行います。アフィリエイトリンクのほとんどは、バナーもテキストリンクも「<a href=”****.com”></a>」という形式の外部リンクになっているためです。

以下の記事の方法で計測可能ですので、こちらを参考にしてください。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

読みたい場所にジャンプ

バナークリックを計測する手順

バナークリックを計測するには、Googleタグマネージャー(GTM)による設定が必要です。

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

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

GTMでバナーのクリックを計測する方法は1つではありませんが、ここではGTMやWordPressの操作に慣れていない方でも比較的取り組みやすいものを紹介します。

バナークリックの計測も含め、Webサイトに設置したユーザー導線のイベント計測をまとめて設定したい方に向けて、Udemyのオンライン講座もご用意しています。以下のリンクは割引クーポンになっていますので、よろしければご利用ください。

【実践】GoogleタグマネージャーによるGA4カスタムイベント設定入門

※割引率はタイミングにより異なります。

バナークリック計測の設定手順は以下の通りです。

STEP

バナーにid属性を付与する

最初にバナー要素にidを付与しましょう。

WordPressの場合はidを付与したい画像ブロックを選択し、メニューの「高度な設定 > HTMLアンカー」に任意の文字列を入力します。

HTML要素に直接idを付与することも可能です。その際には、以下のようにidを付与したい要素に直接追加しましょう。「id=””」の部分に任意のid文字列を付与します。

<a href="exsample.com"  id="banner-a">
    <img src="../banner-a.jpg">
</a>
idの命名ルールについて

idにはいくつかの命名ルールがあります。正しい計測のために、最低限以下は守るようにしてください。

  • 半角英数のみ使用可能。
  • 使える記号は「_(アンダーバー)」と「-(ハイフン)」のみ。
  • 数字で開始することができない。
  • 1つのページ内で同じidの使用は1回まで。
    →1つのページ内で同じidを複数使うことはできないため、同じ画像を使う場合にも「banner-top」「banner-mid」などとidは分けておきましょう。こうしておくことで、「どの位置のバナーがクリックされたのか」という区別もできるようになります。
バナーにidを付与できない場合

ページの管理権限がないなど、バナーにidを付与できない場合もあるでしょう。

こうした場合には、ブラウザのデベロッパー機能を使い、すでに設定されているidまたはclassを使います。

Chromeをお使いの場合には、計測したいバナーの上で右クリックし、「検証」を選択します。以下の画像のように、デベロッパーツールが起動しHTML要素が表示されたら、計測したい要素の上で右クリックし「コピー > selectorをコピー」を選択しましょう。

上記の例では、「main_content > article > div.post_content > figure:nth-child(11)」という文字列が取得できますが、これはWebサイトによって変わります。

この文字列を、後のトリガー設定で使います。

STEP

組み込み変数の設定

設定したidをバナーから取り出すために、組み込み変数の設定を行います。

GTM管理画面のサイドバーから「変数」メニューを開き、「設定」ボタンを押します。

「組み込み変数の設定」画面から、「クリック」の項目すべてにチェックを入れます。

組み込み変数とは

「変数」とは、クリックした場所に設定されたURLやidなどを一時的に格納しておく箱のことです。

本来はプログラムを書いて設定するものですが、GTMにはいくつかの変数がデフォルト設定されています。それが「組み込み変数」と呼ばれるものです。

STEP

タグの作成

GTMでタグを作成します。それぞれの設定項目については、以下のキャプチャと表を参考にしてください。

設定タグ

タグ備考
GA4設定タグGoogleアナリティクスの初期設定で行ったGA4設定タグ(タグの名前はそれぞれ異なります)を選択します。
GA4設定タグがない場合には以下を参照し設定してください。
Googleアナリティクスの導入方法 – Webサイトへのタグ設置

イベント名

設定内容備考
banner_a_click
(または独自のイベント名)
ここで入力した値がGA4にイベント名として表示されます。
今回は「banner-a-click」としましたが、ご自身でわかりやすい名前をつけて問題ありません。
イベント名について

※イベント名に任意の名前をつけるときは、以下のルールを守る必要があります。

  • 記号は「_(アンダーバー/アンダースコア)」のみ使用可能
  • 先頭は文字のみ使用可能(数字や記号は使用不可)
    ※イベント名は日本語でもつけることができますが、外部連携の際などに不具合が起きる可能性もあります。心配な方は英語でイベント名をつけるようにしましょう。筆者のサイトでは日本語のイベント名を付けているものもありますが、現在のところ不具合はありません。
  • 英語でイベント名をつける場合、予約済みのイベント名を使うことができません。以下のGoogle公式ヘルプを参考にしてください。

参考:[GA4] イベントの命名規則 – アナリティクスヘルプ

イベントパラメータ

スクロールできます
パラメータ名備考
cta_click_count1バナーのクリック数を独立した指標として表示するための設定です。
後述するパートでGA4の「カスタム指標」として登録します。
パラメータ名について

※パラメータ名は任意の文字列で構いませんが、以下のルールを守る必要があります。

  • 半角英数で記述
  • 記号は「_(アンダーバー)」のみ使用可能
  • 先頭は英字のみ使用可能
STEP

トリガーの作成

タグを動かすきっかけであるトリガーは、「クリック – すべての要素」を使用します。

今回はバナーのクリックのみを計測するので、「一部のリンククリック」を選択しましょう。

表示されたプルダウンと入力エリアには、以下の設定を行います。

スクロールできます
変数マッチタイプ備考
Click ElementCSSセレクタに一致#banner-a,#banner-a *値は、バナーに付与したidを入力します。
CSSセレクタについて

CSSセレクタとは、HTMLページの中の特定の部分(文字、画像、ボタンなど)に対して、デザインや装飾を適用するための記述です(本来は装飾を適用させるためのものですが、GTMではクリックされた要素を特定するために使用します)。タグ名や、タグに付与されたclass名、id名などを指定するために、記号を使ったルールに基づいて記述します。

上記で設定した例では、以下のCSSセレクタを使っています。

スクロールできます
CSSクラス意味
#(シャープ)idのことを表します。#banner-aと記述することで、「banner-a」というidが付与された要素を指定できます。
*(アスタリスク)単体で使うと、ページ内のすべての要素を指定するという強力な記号です。「#banner-a *」のように、idセレクタと組み合わせることで、「banner-a」というidセレクタに囲まれたすべての要素を指定できます。
,(カンマ)カンマで区切ることで、複数の要素を指定することが可能になります。今回は、「banner-a」というidが付与された要素そのものと、「banner-a」というidで囲まれたエリアを指定しています。
デベロッパーツールで取得したCSSセレクタを使う場合

idを付与できず、デベロッパーツールでCSSセレクタを取得した場合には、トリガー条件は以下のように記述します。

スクロールできます
変数マッチタイプ備考
Click ElementCSSセレクタに一致main_content > article > div.post_content > figure:nth-child(11)値は、取得したCSSセレクタを入力します。
※左の値はサンプルです。
STEP

プレビュー

タグを設定したら、問題なく動作するかどうか必ずプレビューしましょう。

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のリアルタイムレポートでもイベントの発生状況を見ておきましょう。以下の画像のように、イベント数のカードに「banner_a_click」が表示されていれば、GA4にもイベントが送られています。

STEP

公開

設定に問題がなければ、コンテナを公開します。

「バージョン名」の入力を求められるので、「バナークリックイベント設定」などわかりやすいものを記載しておきましょう。

コンテナを公開しなければイベントは計測されないので注意してください。

STEP

カスタムディメンションの登録

カスタムディメンションを設定することで、クリックされたバナーに設定されたURLをレポートに表示することができます。

バナーのHTML構造によってはURLは取得できない場合もありますが、念の為設定しておきましょう。

他のクリック系のイベントですでに登録してある場合には、この設定は不要です。

STEP

カスタム指標の登録

カスタム指標を設定することで、バナーのクリック数を「イベント数」から独立させて見ることができるようになります。ページビュー数などと掛け合わせて計算指標を作る際に利便性が高くなるので、ぜひ設定しておきましょう。

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

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

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

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

バナーがクリックされない要因が「バナーが見られていないから」なのか「バナーのクリエイティブや訴求に魅力がないから」なのかによって、行うべき改善施策も変わってきます。

事象施策
バナーが見られていないバナーの掲載位置変更
記事のリライト等によるスクロール率の改善
バナーが表示されているがクリックされないバナークリエイティブの変更(デザイン、訴求)
テキストリンクへの変更

表示とクリックをセットで計測することで、バナーの効果を正しく評価することが可能になります。

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

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

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

ここでは、それぞれのレポートでどのように見えるかについて解説します。

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

レポート

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

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

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

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

探索

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

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

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

Looker Studio

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

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

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

バナークリックイベントについてよくある質問

筆者が顧客対応する中で、バナークリックについてよくいただく質問をまとめました。

アフィリエイトバナーも同様の方法で計測できますか?

アフィリエイトバナーの多くはaタグで構成されているため、ここで紹介した方法では計測できない場合もあります。

aタグはリンククリックと同じ方法で計測可能ですので、以下の記事を参考にしてください。

また多くのASPではアフィリエイトリンクの改変がNGとされていますが、上記のaタグによる計測であればタグを変更せずに計測が可能です。

設定したはずのイベントが計測されません

まずは以下のいずれかに該当しないか確認してみましょう

  • GA4のタグが適切に設定されているか
  • GTMで設定した場合には設定したGA4の測定IDが正しいか
  • GTMで設定した場合、コンテナが公開されているか
  • イベント(カスタムイベント)設定後24時間経過しているか
    →ユーザー独自に設定したイベントは、レポートへの反映は設定後24時間経過後になります。

上記に当てはまらない場合には、イベント設定そのものが誤っている可能性があります。当記事を参考に、もう一度設定を見直してみてください。

それでも問題解決しない場合には、弊社でもサポートを行っておりますのでお問い合わせください。

バナークリックの計測はGTMを使わずに行うことは可能ですか?

リンク先が内部リンクのバナー場合は、HTMLにonclickイベントを仕込むなどすればGA4単体でも計測可能ではあります。ですが、GTMを使うよりもむしろ難易度は上がります。

バナーが外部リンクになっている場合には、clickイベントを使ってGA4単体でも計測できる場合があります。以下の記事でも触れていますので参考にしてみてください。

ですが、いずれの場合も、GTMを使った計測ほど自由度が低くなります。よほどのことがない限りは、GTMで設定することを強く推奨します。

まとめ

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

オウンドメディアなど、同一ドメイン内で集客用のブログを運営されている場合には、記事の評価を行うためにもバナーのクリックイベントを設定してみてください。

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

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

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

また、そもそもCTA自体をどのように使い分ければ良いのかわからないという方は、以下の記事も参考になるはずです。あわせてお役立てください。

GA4を「ざっくりと」理解したい方へ

Googleアナリティクスを活用するための基礎知識をまとめたebookをご用意しました。どなたでも無料でダウンロードしていただけますので、以下のボタンからご利用ください。

※新しいタブでフォームが開きます。

屋嘉比 馨
ボーダーヘイズ・ジャパン代表
ウェブ解析士協会所属・ウェブ解析士。
ラジオ局、広告代理店などに勤務ののち、大手SIerのWebマーケティング担当に。
2022年に独立し、ボーダーヘイズ・ジャパンを設立。
これまで100サイト以上の改善・計測環境構築に貢献。

YouTubeチャンネル

本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。

ブログの内容と若干異なる場合もございます。

読みたい場所にジャンプ