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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

426閲覧

特定のWebサイトのページのリンクのクリック数をまとめて計測する方法はありますか?

h-o

総合スコア134

Google Analytics

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/18 04:25

###やりたいこと
あるページの効果を測定するためにどこのリンクがどれくらいクリックされたかを測定したいです。そこで、現在は以下のようなタグをaタグに追加しているのですが、リンクごとに追加する必要があり、まとめてクリック数を計測できるような効率のいい方法はないかと思い質問させてもらいました。

lang

1<a href="#" onclick="ga('send', 'event', 'category', 'action', 'label', value, {'nonInteraction': 1});">テキスト</a>

###詳細
・サイトの効果の測定はGoogleAnalyticsを使用
・あるページのリンクはまとめて測定できるようにしたいが、サイト全体のリンクを測定できるようにしたいわけではない(任意の場所のみ測定できれば尚良)

以上、よろしくお願いします。

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

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

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

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

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

guest

回答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
IShix

総合スコア1724

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

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

h-o

2017/08/18 07:47

返信をいただき誠にありがとうございます。 jQueryは使える環境です。テストしてまた返信いたします。
IShix

2017/08/18 12:26

「URLの内容で判断する」にミスがあったので修正しました。 具体的には$('.send_anaritics') を $('a')に変更しました。 求めているものに合うものが見つかるといいですね。がんばってください。
guest

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
m.ts10806

総合スコア80765

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

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

h-o

2017/08/18 07:49

返信をいただき誠にありがとうございます。 私には少しレベルが高いコードのようですが、試してみます。
m.ts10806

2017/08/18 11:31

焦らず少しずつやっていきましょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問