【gtag】ajaxで読み込まれたバナーのクリックイベントを取得したい

Question

前提・実現したいこと

メディアECサイト内に複数のバナーを設置しています。

バナーの設置方法はHTMLコードのベタ打ちではなく、
同一ドメインの下層ディレクトリにWordPressを入れて、
WordPressのカスタム投稿でバナーを登録し、
メディアECサイト上にajaxで読み込まれるようにしています。

このajaxで呼び出されたバナーごとのクリック数を計測したく、
bodyタグに以下のように記述してみたのですが、上手くいきません。

ajaxなど非同期でページに読み込まれたバナーを計測することはできますか？
わたしの書き方で足りない部分や、根本的に間違っている部分などあれば
ご指摘いただけますとありがたいです。

ajax部分

$(document).ready(function(){
    $.ajax({
      url: '取得するURL',
      type: 'GET',
      cache: false,
      success: function(res) {
        if (res.responseText) {
            content = $(res.responseText);
        } else {
            content = $(res);
        }
        $(".sideBnrWp").html(content);                      
      }
    });
  });

バナーのクリック数を取得するため設置したコード

​$(document).on('click', '.ga_banner', function() {
　const $this = $(this);
　const altBnr = $this.find('img').attr('alt');
　console.log(altBnr); // これは取れています
　gtag('event', 'ga_banner', {
　'event_category': 'バナークリック',
　'event_label': altBnr
  });
});​

ajaxにより吐き出されるHTML

リンク先、画像URL、バナータイトルはカスタム投稿で入力した各値が入ります。

<li><a href="リンク先URL" class="ga_banner"><img src="画像URL" alt="バナータイトル"></a></li>
<li><a href="リンク先URL" class="ga_banner"><img src="画像URL" alt="バナータイトル"></a></li>
：
常時4～6個のバナー

試したこと

開発ツールのconsoleを見ると、コンソールログのaltの取得は出来ていますが、
gtagにイベントが飛ばないようです。

bodyではなくhead内（gtagより下）に書いてみたりもしましたが、やはりカウントはされません。

ECサイトはカラーミーショップを使用していて、
アナリティクス（gtag）自体は通常通り設置しており、アクセス解析は問題ありません。

補足情報

社内スタッフが簡単に登録や削除が行えるようにするため、
バナーの呼び出し方法自体を変更するのは難しいです。

ECサイト部分とWordPress部分でヘッダー・フッター・サイドメニューなど
共通デザインのため、WP部分にも同じバナーが設定されていますが、
WordPress部分はGoogleタグマネージャで管理しており、クリックイベントを取得できています。
ECサイト部分はタグマネージャが使えないため、gtagを使っております。

Answer 1

ajaxの呼び出し元のファイル（バナーのカスタム投稿を出力しているWPファイル）に以下を追加することで、ECサイト上のバナークリックイベントを取得してアナリティクスに反映できました。

$('.ga_banner').on('click', function() {
    const altBnr = $(this).find('img').attr('alt');
    gtag('event', 'ga_banner', {
        'event_category': 'バナークリック',
        'event_label': altBnr
    });
});

WP側のサイドバナーはajaxで呼び出すのを止め、get_postsでカスタム投稿の値を出力することで、そのままGoogleタグマネージャでバナーのクリック数をカウントしています。

質問内容の、「呼び出し先のECサイトのテンプレート上にscriptを記述し、.on()の第二引数で後から追加された要素（バナー）にイベントを設定したが上手くいかなかった」ことは、知識が足りてなくて何でできないんだろうという気持ちですが、とりあえずECサイト側のバナークリックを計測する目的は達せたため解決とさせていただきます。

全く回答が付かずめげかけていた中、アドバイスくださったyhasegawa55様、ありがとうございました。

Answer 2

ajaxで読込んだデータで書き出した要素にはその段階でEventを記述する必要が有ります。
.on('click')部分を
ajaxのsuccessにて alt を Setした後

$('.ga_banner').off('click').on('click'), function() {
　gtag()
  })
```と再設定すれば大丈夫かと

Comments

[ync_pp]

ありがとうございます！早速アドバイスいただいたように設定し直してみます！

[ync_pp]

「ajaxのsuccessにて alt を Set」というのが上手く理解できません。
success: function(res) {}内に
---
const altBnr = $('.ga_banner').find('img').attr('alt');
や
gtag('event', 'ga_banner', {
'event_category': 'バナークリック',
'event_label': altBnr
});
---
を記述するということではないと思うのですが、どう書けば良いのか、どう調べたら良いのかが分かりません.... 大変恐縮ですが、もう少しヒントをいただけますと幸いです。
回答でご教示いただいたコードのgtag()部分は、元のように「gtag('event')～」を入れるのでしょうか。（gtag()だけ書いても何も呼び出されないようなので... 初歩的なことが分かっておらずすみません。）

[yhasegawa55]

ごめんなさい、既にPCの前を離れてしまっていてスマホではどうにもこうにも見通しが利かず
document.readyで読み込み
別に
document.clickを組んでいたかと
readyの中のajax success の中にclickを書かないとと言う意味とimageのaltを使うのであれば、set後(doneだったかな？lodeだったかな)にイベントを貼り直さないとダメではと書きました

明日には見直してもう一度書きますゴメンなさい

[ync_pp]

ご親切に回答ありがとうございます！
自分でも引き続き調べてみてあれこれ試してみます...！

[yhasegawa55]

スンマセン