バナークリックをコンバージョンとして計測する設定をやってみた

2025年1月14日

このブログで皆さんが記事のバナーをクリックしたら、コンバージョンとして計測できるようにしたい…と思い立ち、実際に設定をしてみました。

今回の目標は、GA4でバナークリックを計測し、どの記事からどれだけのクリックが発生しているかを把握することです。せっかくなので、その手順を備忘録としてまとめます。

でも正直なところ、やってみて思ったのですが…この設定は、知識のない人が見てやるのはちょっとハードルが高いかもしれません＾＾；

ITトラブル！困ったときは？

現在お困りのITトラブルはありませんか？
Zoomで画面を共有しながら即解決します！

初回割引ITサポート

設定の流れ

1. バナークリックの仕組みを理解

そもそも、バナーがクリックされたことをどうやって追跡するのか？がわからなかったので、色々な記事を見たり、Chat-GPTに聞いたりして確認しました。

簡単に言うと、
１．Googleタグマネージャー（GTM）を使って、クリックイベントを計測する仕組みを作成する
２．そのデータをGoogleアナリティクス4（GA4）で受け取って記録する
という流れでした。

2. バナーのクリックで想定外の問題が発生

バナーがクリックされたことを判断するためには、以下のような動作が必要となるようです。
１．クリックされた際に設定されているリンク先URLを取得する
２．あらかじめ設定した条件（リンク先URL）と一致しているかチェックする
３．一致していればGA4に情報を送信

しかし、ここで問題が！

バナーをクリックすると設定しているリンクURLではなく、画像自体のURLを取得してしまうという問題が発生しました。

構造自体は、以下のようなよくあるHTMLなのですが、バナークリック時に
「 https://example.com/support-page 」を取得してほしいところ、
「 https://example.com/image.png 」を取得することがわかりました。

これでは正しく計測できないため、この問題を解決するためにカスタムJavaScriptで親要素のリンク情報を取得する動きが必要になりました。

追記
アラン様からのコメントによるご指摘で、上記はトリガーの設定の問題であることが分かりました。
そのため、手順３はまるまる不要となります(^^ゞ

3. GTMでカスタムJavaScript変数を作成

今回の場合、バナーがクリックされた際に、「画像パスではなくリンク先URLを対象とする」ための条件が必要となります。

画像クリックが親要素のリンクに紐付いていない場合でも正しく計測できるよう、カスタムJavaScript変数を作成しました。

コード例

function() {
  // クリックした要素を取得
  var clickedElement = {{Click Element}};
  
  // 親要素を辿り、<a>タグがある場合、そのhref属性を取得
  while (clickedElement && clickedElement.tagName !== 'A') {
    clickedElement = clickedElement.parentElement;
  }
  
  // <a>タグが見つかった場合はhrefを返す。見つからない場合はnullを返す。
  return clickedElement ? clickedElement.href : null;
}

このコードによって、クリックされた要素の親要素を辿り、リンク (<a> タグ) を取得するようにしました。

4. GTMでトリガーを設定

トリガーとは、特定の条件が満たされたときに「これを実行して！」と指示を出す仕組みのことです。

そして、トリガーが実行されることを『発火』といいます。かっこいいですね。

  • タイプ: クリック – リンクのみ
  • 条件: 「Click URL」で、「特定の文字列を含む」場合に発火する
    　　　※URLと一致させる方法でも問題ありません。

つまり、ページ内でクリックがされたときに、それがバナーでかつ変数から取得された値（URL）内に、特定の文字列があれば発火するという設定です。

5.ページタイトルを計測する設定を追加

どの記事からクリックが発生したかを把握するために、「ページタイトル」を取得する設定も追加しました。

あらかじめ使える変数の中にページのタイトルを取得する「Page Title」という変数があるはずということだったのですが、自分の環境では見当たらず。。。

仕方がないので、これもカスタムJavaScript変数で作成することにしました。

function() {
  return document.title;
}

6. GTMでGA4イベントタグを作成

  • タグタイプ: Google Analytics: GA4 Event
  • イベント名: banner_click
  • 測定ID: GA4の測定IDを指定

7. プレビューでテスト

GTMのプレビューモードを使って、バナークリック時に正しいイベントが発火するか確認して、無事タグがGA4に送信されることを確認しました。

8. GA4でリアルタイムテスト

作成したイベントはすぐにはGA4の計測に反映しないようです。

今回は２時間ほど待ってからテストしたところ、GA4のリアルタイム計測でイベント結果に表示されました。

まとめ

今回、行った作業は以下のとおりです。

１．GTMでの設定
　　・カスタムJavaScript変数の作成
　　・トリガーの作成
　　・タグの作成
　　・タグが送信されているかテスト

２．GA4でイベントが計測されるかテスト

私もGA4やGTMはまだまだ勉強不足で、もっと効率的で良い方法があったかもしれませんが、ひとまず直面した問題の対処方法を調べながら設定していたら、こんな手順に落ち着きました。

この手順がおかしいなどの指摘がありましたら教えていただけると嬉しいです。

ご自分の「サイトやLPでクリック計測をしたい」や「GA4でコンバージョン設定をしたい」といった方は、今回の知識を活かしてサポートさせていたただきますので、ぜひご相談ください。

ちなみに、以下のバナーをクリックしていただくと、まさに今回の計測が発動します。

「テストしてあげてもいいよ」という方は、ぜひクリックを（笑）

GA4・GTM

Posted by hiro