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

投稿日 by

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でも変わってません。

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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イベントにバインドします。

1
2
3
4
5
6
7
8
9
10
11
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イベントにバインドするという、実装にしました。
もっとスマートなやり方はあるんだろうか。