data-ga属性をつけるとGoogle Analyticsのクリックイベントを取得してくれるJavascript

クリックイベントをつけようと思った時に、どうやってつけようかなぁ。とかいつも迷っていたので汎用的に使えるものを作ってみました。

プラグイン化するほどでもないかなぁってことで、ソースのみ書いちゃってます。

こういうのってプラグイン化しちゃったほうがいいのかな。
ちょっと時間あるとき整理してプラグイン化してgithub公開しようかと思います。
とりあえずgaのクリックイベント周り設定しやすくしてくれるjsです。

手順・仕様は下記のとおりです。

1. 取得したいタグにdata-gaをつける。

aタグにつけた場合（単一）

1. data-ga="値"が入っている場合は値を取得
2. 値がなく、そのなかの画像にalt属性がついていた場合にはaltの値を取得
3. 上記どちらにも当てはまらない場合は、タグ内のテキストを取得

aタグ以外についていた場合（複数）

1. タグ内のaタグに反応

2. data-ga="値"が入っている場合は値を取得の形で取得

    'data-ga="値"' + (img alr || タグ内text)
   

3. 値がなく、aタグ内の画像にalt属性がついていた場合にはaltの値を取得

4. 上記どちらにも当てはまらない場合は、タグ内のテキストを取得

最後にCategoryにページのタイトルを入れ
取得したテキスト値をLabelに入れsend eventで送信

ga('send', 'event', 'ページのタイトル', 'click', '値');

実際のソース

var gaClickEvent = (function() {
	var title = $('title').text();
	$('[data-ga] a, a[data-ga]').on('click',
			function(e) {
				var currentTarget = e.currentTarget;
				var $this = $(currentTarget);
				var alt = $this.find('> img').prop('alt');
				var gaq = $this.data('ga');

				if(gaq === undefined) {
					var parentGaq = $this.parents('[data-ga]').data('ga');
					var mainText = alt ? alt : $this.text();

					var text = parentGaq ? parentGaq + ' ' + mainText : mainText;
				} else {
					var text = gaq ? gaq :
							alt ? alt : $this.text();
				}

				if(typeof ga !== 'undefined') {
					ga('send', 'event', title, 'click', text);
				}
			}
	);
})();