Google Analyticsで全てのクリックイベントをXPathの表記で集計する（GTMを使わない方法）

2015.04.23


Google Analytics（GA）に慣れてくると、画面遷移とか広告の成果とか、クリックイベントを集計する事があると思います。
1つずつ、onclickにスクリプトを設定するのも良いのですが、
面倒な手間のないように、Webページのクリック全てをユニークな値として集計するJavascriptを作成してみました。

※設定の手順

  1. クリックイベントをXPathの表記に変換
    まず、hash値等でイベントをユニークな値として格納する方法を検討しました。
    単純にURLをハッシュ値としてもいいのですが、同一ページに同じ遷移先のリンクがある時に区別するために、XPathでタグを表記することにしました。
    ちょうど jsfiddleでXPathを生成するjavascriptを見つけましたので、こちらを引用させて頂きました。
    参考 [ jsfiddle : getXPath ]
     
  2. Javascriptの作成
    Google AnalyticsはUniversal Analyticsの利用を前提として、集計用のjavascriptを作成しました。
    下記のコードを、google analyticsのjavascript定義と、jQuery定義の後でインクルードすれば、
    自動的にクリックイベントのハンドルが設定されます。
    スクリプトのダウンロード [  ga-clickevents.min.js ]
     
  3. HTMLの記述
    HTMLへの記述は下記のように、jqueryとanalytics.js（universal google analytics）の後で読み込めばOKです。

Minify前のga-clickeventsのソース 


jQuery.fn.getXPath = function () {
    var self = this[0],
        xpath = '';
    for (; self && self.nodeType === 1; self = self.parentNode) {
        var id = $(self.parentNode).children(self.tagName).index(self) + 1;
        id = id > 1 ? '[' + id + ']' : '';
        xpath = '/' + self.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
};

jQuery(document).on('click', function (e) {
    var pt  = $(e.target).getXPath();
    var lk  = e.target.parentNode.href;
   	var spr='-';  //separator
    if(!lk){
		lk="click";	
    }else{
		lk='click'+spr+lk;
	}
    ga('send', 'event', 'link', lk, ''+location.pathname+spr+pt, 1);
});

全てのクリックをGoogle Analyticsのイベントとして集計する方法としては、Google Tag Manager（以下GTM）を使って集計する方法もありますが、GTMは最初の設定でタグとしてページ毎に記述しなければならず、Google AnalyticsとJavascriptだけで実現してXPathの表記で記録できた方が汎用性が高いかなと考えて作成してみました。