5年前とはSDKの仕様が変わってたので、改めてSiteCatalystとGoogleAnalyticsを実装してみた。
こちらのページでテストしました。
http://www.kwonline.org/tst/social.php
下記の4つのボタンのクリックを計測してます。
- はてなブックマーク
- 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イベントにバインドするという、実装にしました。
もっとスマートなやり方はあるんだろうか。