Google Analyticsで外部リンクを計測する設定する(タグマネージャは使わない)

広告

Googleアナリティクスは便利ですが、デフォルトのタグでは外部リンクが計測できません。
アウトバウンドリンクの計測のするための設定はGoole公式ヘルプの通りなのですが、これですと一つ一つの外部リンクにタグを書いてゆかねばなりません。
今回はjavascriptで自動的に外部リンクにコードを付記する仕組みを含めて、一通りの段取りを説明します。

ヘッダーにアウトバウンド計測用コードを書く

</head>の直前に下記のコードを追加します。analyticsのコード(ユニバーサルアナリティクスコード)に加えて、google公式ヘルプ「アウトバウンドリンクを計測する」に書かれているコードを書きます。UA-XXXXXXXX-1 のところはご自分のトラッキングIDに置換して下さい。
(google analytics > アナリティクス設定 > プロパティ > トラッキング情報 >トラッキングコード にかかれています)

<script>// <![CDATA[
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'auto');
  ga('send', 'pageview');

/**
* Google アナリティクスでアウトバウンド リンクのクリックをトラッキングする関数。
*/
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
// ]]></script>

フッターに外部リンクへ計測用コード追加用コードを書く

前述のgoole公式ヘルプページには外部リンク一つ一つにちょっと書き足すとイイよ−と書かれていますが、既存記事の数が多いとやってられません。
そこで下記のコードを</body>直前に書き加えます。
http://exisweb.net/link-tracking-universal-analytics より

<!-- アウトバウンド計測コード付記js -->
<script>// <![CDATA[
(function trackOutbounds() {
	
	var hitCallbackHandler = function(url,win) {
	    if (win) {
		    window.open(url, win);
	    } else {
        	window.location.href = url;
        }
    };
    
    var addEvent = function(el, eventName, handler) {
    
		if (el.addEventListener) {
			el.addEventListener(eventName, handler);
			} else {
			el.attachEvent('on' + eventName, function(){
				handler.call(el);
		    });
		}
	}
	
	if (document.getElementsByTagName) {
		var el = document.getElementsByTagName('a');
		var getDomain = document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0];
		
		// Look thru each a element
		for (var i=0; i < el.length;i++) {
		
			// Extract it's href attribute
			var href = (typeof(el[i].getAttribute('href')) == 'string' ) ? el[i].getAttribute('href') : '';
			
			// Query the href for the top level domain (xxxxx.com)
			var myDomain = href.match(getDomain);
			
			// If link is outbound and is not to this domain	
			if ((href.match(/^(https?:|\/\/)/i)  && !myDomain) || href.match(/^mailto\:/i)) {
			
				// Add an event to click
				addEvent(el[i],'click', function(e) {
					var url = this.getAttribute('href'), win = (typeof(this.getAttribute('target')) == 'string') ? this.getAttribute('target') : '';
							
							console.log ("add event", url);
					// Log even to Analytics, once done, go to the link
					ga('send', 'event', 'outbound', 'click', url,
						{'hitCallback': hitCallbackHandler(url,win)},
						{'nonInteraction': 1}
					);
					
					e.preventDefault();
				});
			}
		}
	}
})();
// ]]></script>

まとめ

上記の設定をすると、キャッシュでも残っていない限りデータが反映されます。
リアルタイム計測にもでてきますし、
レポート > イベント
で閲覧することが出来ます。クロス集計もできるので『どのページで、どの外部リンクがクリックされたか』というデータも取れます。

日本語でググるとタグマネージャを使うと良い!と解説しているサイトがあったのですが、ちょっと私には難しくて挫折しました。
アウトバウンドさえ計測できれば、その他のコードを使うことはないのでこのような形になりました。

なお英語ですがこちらの記事を参考にさせていただきました(丸コピですがネ)。
@exisweb Thank you for share your knowledge.
やはりこのようなマニアックな設定は英語で検索できるのとできないのとでは集められる情報量が段違いです。

Akira

北海道出身、旅と写真と山とダンス好き。
クラニオセイクラルやタイマッサージなどのセラピストとして活動しつつ、ウェブ制作も手掛ける。
旅ネタの多い、気まぐれブログ。
詳細プロフィール

この記事は公開から1年以上経過しています。
情報が古くなっている可能性がありますのでご注意下さい

シェアする

フォローする