clover.blue

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

Data
2015/04/28
Tag

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

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

こういうのってプラグイン化しちゃったほうがいいのかな。
ちょっと時間あるとき整理してプラグイン化して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);
                }
            }
    );
})();