質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

1391閲覧

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

ync_pp

総合スコア11

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/04/26 09:56

編集2021/05/01 03:48

前提・実現したいこと

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

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

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

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

ajax部分

ajax

1$(document).ready(function(){ 2 $.ajax({ 3 url: '取得するURL', 4 type: 'GET', 5 cache: false, 6 success: function(res) { 7 if (res.responseText) { 8 content = $(res.responseText); 9 } else { 10 content = $(res); 11 } 12 $(".sideBnrWp").html(content); 13 } 14 }); 15 });

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

jQuery

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

ajaxにより吐き出されるHTML

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

HTML

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

試したこと

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

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

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

補足情報

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

jQuery

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

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

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

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

投稿2021/05/01 09:20

編集2021/05/01 09:23
ync_pp

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

Javascript

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

投稿2021/04/30 23:20

yhasegawa55

総合スコア189

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ync_pp

2021/05/01 02:31

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

2021/05/01 04:07

「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

2021/05/01 05:26

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

2021/05/01 06:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問