GoogleAnalyticsのイベントトラッキングのコードを追加するのがめんどい

これはWanoグループ Advent Calendar 2017の14日目の記事です。

表題の背景としては仕事で数十のサイトを開発・管理していて、効果測定の為にGoogleAnalyticsのイベントトラッキングも使うわけで、ただ新たに数字を取るとなると管理しているサイト全てにコードを追加するのはかなりめんどいです。

さすがにサイト自体はCMSで管理しているので、とりあえず特定のURLをクリックされた時は勝手にイベントトラッキングされる様にjs仕込む事にしました。

##準備
###1.GoogleAnalyticsのトラッキングコード
設置してください。

###2.イベントトラッキングさせたいリンクの作成
リンク内に特定のパラメータが入っていた場合に仕込んだjsが発火し、イベントトラッキングさせたいのでそれ用のパラメータが付いたリンクのaタグを作ります。
（実際にはCMSで登録されたURLがaタグに設置されるイメージ）

<a href="/?event_category=Video&event_label=Campaign">リンク</a>

それぞれのパラメータがイベントトラッキングのイベントフィールドになります。

event_category=VideoがeventCategory、event_label=CampaignがeventLabelです。
他のイベントフィールドも使用したければパラメータを追加してください。

###3.jsのイベント追加
jQery使ってしまってるのでjQeryも読み込んでください。

$(function(){
    $('a[href *= "event_category"][href *= "event_label"]').on('click',function(){
        var link = ($(this).attr('href'));
        var param = link.replace(/#.*$/,"");
        param = param.substr( link.indexOf('?')+1 );
        var key = param.split('&');
        var obj = {};
        for(var i = 0; i < key.length; i++){
            var key_value = key[i].split('=');
            obj[key_value[0]] = key_value[1];
        }
        if(!obj.page){
            ga('send', 'event', obj.event_category ,'click', obj.event_label);
        }	
    });
});

他のイベントフィールドも使用したい時はこっちも変更する必要があります。

あとは対象のリンクをクリックしてもらうだけですね。

##まとめ
この方法がベストだとは思ってるわけではないですが、今のところ煩わしさはないので良しとしています。
注意としてはリンクが生成されるタイミングと、jsのイベントが読み込まれるタイミングに差があるのでそこは工夫が必要です。