Facebookのいいねボタンや、Twitterのツイートボタンのクリックを計測する

5年前とはSDKの仕様が変わってたので、改めてSiteCatalystとGoogleAnalyticsを実装してみた。
こちらのページでテストしました。
http://www.kwonline.org/tst/social.php
下記の4つのボタンのクリックを計測してます。

  • Facebook
  • Twitter
  • はてなブックマーク
  • LINE

Facebook
Facebookは以前のall.jsじゃなくて、sdk.jsになってます。
FB.Event.subscribe関数を使う点はsdk.jsでも変わってません。

window.fbAsyncInit = function(){
	//sitecatalyst
	FB.Event.subscribe("edge.create", function(){
		s.linkTrackVars = "events,eVar1";
		s.linkTrackEvents = s.events = "event3";
		s.eVar1 = "facebook";
		s.tl(true, "o", "facebook");
		//google analytics
		ga('send', 'social', 'facebook', 'like', location.href);
	});
};

Twitter
Twitterは通常のボタン設置方法じゃなくて、developerサイトに載ってるscriptに変える必要があります。
https://dev.twitter.com/web/javascript/loading

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));

上記のスクリプトに変えた上で、下記のようにclickイベントにバインドします。

twttr.ready(function (twttr) {
	twttr.events.bind("click", function (){
		//sitecatalyst
		s.linkTrackVars = "events,eVar1";
		s.linkTrackEvents = s.events = "event3";
		s.eVar1 = "twitter";
		s.tl(true, "o", "twitter");
		//google analytics
		ga('send', 'social', 'twitter', 'click', location.href);
	});
});

はてなブックマーク & LINE
「はてなブックマーク」と、「LINEに送る」ボタンはコールバック関数がないので、
勝手にclass属性をつけて、JQueryでclickイベントにバインドするという、実装にしました。
もっとスマートなやり方はあるんだろうか。