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

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

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

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

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

830閲覧

Googleアナリティクスのクリックイベントのタグを、動的ページのリンクに追加したい

vankick

総合スコア22

Google Analytics

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

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/09/21 06:28

Googleアナリティクスのクリックイベントのタグを、動的ページのリンクに追加したいです。

現在、動的に生成されるブログ記事一覧があり、そのブログ記事それぞれに、googleアナリティクスのコードを追加したいと考えています。

<div class="topicsCard"> <a onclick="ga('send','event','ブログ','ブログ一覧','ブログタイトル')" href="#"> <div class="topicsCard_head">   <figure class="topicsCard_thumb"><img src="dummy.jpg" alt=""></figure> </div> <div class="topicsCard_body"> <div class="topicsCard_meta"> <p class="topicsCard_date">2019.09.21</p> </div> <h3 class="topicsCard_heading">タイトル</h3> <p class="topicsCard_desc">サマリー</p> <p class="categoryLabel">カテゴリー名</p> </div> </a> </div>

動的に生成されるコードの時点ではaタグにはhref以外のattributeはないので、
querySelectorAllでaタグをすべて取得し、setAttributeでga('send', 'event')の部分を後からつけたいのですが、やり方が分かりません。
(それが出来ないため、現在はブログ一覧の部分をすべてhtmlにべた書きしている状態です。)

何かいいやり方があるか、もしくはsetAttributeでのやり方をご存知の方がいらっしゃいましたら、教えて頂きたいです。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

querySelectorAllでaタグをすべて取得し、setAttributeでga('send', 'event')の部分を
後からつける
…まで分かっているのならそのまま実装するだけだと思いますが、
どのあたりが分からないのでしょうか?(aタグのリストのループの回し方? setAttributeの使い方?)

下記のような感じでいけると思います。

html

1<a href="#">1</a> 2<a href="#">2</a> 3<a href="#">3</a> 4 5<script> 6var aElementList = document.querySelectorAll("a"); 7 8for (var i = 0; i < aElementList.length; i++) { 9 aElementList[i].setAttribute("onclick", "ga('send','event','ブログ','ブログ一覧','ブログタイトル')"); 10} 11</script>

投稿2019/09/21 13:36

shun-K

総合スコア508

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問