###やりたいこと
あるページの効果を測定するためにどこのリンクがどれくらいクリックされたかを測定したいです。そこで、現在は以下のようなタグをaタグに追加しているのですが、リンクごとに追加する必要があり、まとめてクリック数を計測できるような効率のいい方法はないかと思い質問させてもらいました。
lang
1<a href="#" onclick="ga('send', 'event', 'category', 'action', 'label', value, {'nonInteraction': 1});">テキスト</a>
###詳細
・サイトの効果の測定はGoogleAnalyticsを使用
・あるページのリンクはまとめて測定できるようにしたいが、サイト全体のリンクを測定できるようにしたいわけではない(任意の場所のみ測定できれば尚良)
以上、よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
Jqueryを使える環境ですか?当方生のJavascriptが書けないのでJqueryで書いてみました。未検証ですので利用される際は必ず動作確認お願いします。
###クラスが付与されたリンクのみ送信する
javascript
1 //1. send_anariticsクラスをHTMLに付与。付与されたリンクのみデータを飛ばす 2 $('.send_anaritics').on('click',function(e) 3 { 4 e.preventDefault(); 5 ga('send', 'event', 'category', 'action', 'label', value, {'nonInteraction': 1}); 6 location.href = $(this).attr('href'); 7 });
###URLの内容で判断する
javascript
1 //2. リンクの内容によって動作を変える 2 $('a').on('click',function(e) 3 { 4 var link = $(this).attr('href'); 5 6 //リンクにAAAAAAという単語が含まれている場合のみ送信 7 if(link.indexOf('AAAAAA') != -1) 8 { 9 e.preventDefault(); 10 ga('send', 'event', 'category', 'action', 'label', value, {'nonInteraction': 1}); 11 location.href = $(this).attr('href'); 12 } 13 });
投稿2017/08/18 04:59
編集2017/08/18 12:23総合スコア1724
0
aに必要な情報をdata属性で持たせてjQueryでaのclickイベントを取得する方法ですかね。
ただ、リンク別に埋め込まなきゃいけない項目がありますが、
全てにga()を埋め込むより楽なはず(たぶん)
全てのaのクリックを拾い、非対称リンクはフラグで判断する
html
1<a href="#" data-category="category01" 2data-action="action01" 3data-label="label01" 4data-value="value01" 5data-non="1" data-ga="1">テキスト1</a> 6 7<a href="#" data-ga="0">テキスト2</a> 8 9<a href="#" data-category="category02" 10data-action="action02" 11data-label="label02" 12data-value="value02" 13data-non="2" data-ga="1">テキスト3</a>
javascript
1$(function(){ 2 $("a").on("click", function() { 3 var ga = $(this).data("ga"); 4 if(ga == "1"){ 5 var category = $(this).data("category"); 6 var action = $(this).data("action"); 7 var label = $(this).data("label"); 8 var value = $(this).data("value"); 9 var non = $(this).data("non"); 10 11 ga('send', 'event', category, action, label, value, {'nonInteraction': non}); 12 } 13}); 14 15}); 16
ga()を入れたくないaもあるケースも加味し、data-gaとしてフラグを持たせました。
対象のaには特定のクラスを付与する
もし対象のaが決まっているのであれば適当なクラス名を対象のaに付与し、下記のようにしても良いと思います。
html
1<a href="#" data-category="category01" 2data-action="action01" 3data-label="label01" 4data-value="value01" 5data-non="1" class="hoge">テキスト1</a> 6 7<a href="#" >テキスト2</a> 8 9<a href="#" data-category="category02" 10data-action="action02" 11data-label="label02" 12data-value="value02" 13data-non="2" class="hoge">テキスト3</a>
javascript
1 $("a.hoge").on("click", function() { 2 var category = $(this).data("category"); 3 var action = $(this).data("action"); 4 var label = $(this).data("label"); 5 var value = $(this).data("value"); 6 var non = $(this).data("non");
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要となります。
追記:data属性を1つにまとめる
data属性が何個も出てきて冗長に感じるのであれば、1つにまとめてセパレータをかますのもありです。
html
1<a href="#" data-info="category01|action01|label01|value01|1" class="hoge">テキスト1</a>
javascript
1 $("a.hoge").on("click", function() { 2 var info= $(this).data("info").split("|"); 3 var category = info[0]; 4 var action = info[1]; 5 var label = info[2]; 6 var value = info[3]; 7 var non = info[4]; 8
投稿2017/08/18 04:48
編集2017/08/18 05:08総合スコア80765
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/18 07:47
2017/08/18 12:26