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