4月9日追記: Facebookいいね！ボタンについて認識が足りていない部分があったので追記・修正しました。その結果、IE6・7でGA計測する場合、古い(同期)のXFBML版だけでなく、古い(同期)のHTML5版でも計測が可能ということが分かりました。
————————————————–
————————————————–
Facebookのいいね！ボタンのクリック状況をGoogleアナリティクスで取得する必要があったので色々と調べてみたのですが、本当に大変でした…。
なぜ大変だったかと言うと、GoogleもFacebookもどんどん仕様を変えているので、取得方法を紹介してくださっているブログの情報と公式ページの情報が違っていたり、違うバージョンの仕様をベースにしたブログ同士がリンクしあっていたり、とにかく理解するのに時間がかかりました。
もちろん今後も仕様が変わってこのブログ記事の情報も古くなってしまうと思うのですが、なるべく最新の情報を記すということで、計測方法をまとめてみたいと思います。
まず実装方法に入る前に必要な事前情報です。これを理解するのに本当に時間がかかりました。
表でまとめると以下の通りです。
IE9やSafariは調べてないんですが、基本的にIE8やFirefox、Chromeと同じと思って問題ないと思います。
詳しく説明します。
Facebookのいいねボタンについて
- いいねボタンの実装方法は複数ある。今のところ「HTML5」「XFBML」「iframe」の3つ。
- Googleアナリティクスで計測できるのは「HTML5」と「XFBML」のみ。「iframe」ではできない。
- 「HTML５」と「XFBML」の記述は、「Facebook JavaScript SDKの読み込み部分」と「いいねボタンの表示部分」と２つから構成される。「iframe」はいいねボタンの表示部分のみ。(４月９日追記)
現在公式で提供されているXFBML版コードは非同期(async)のもの。以前は同期(sync)だった。(iframeはずっと一緒。HTML5は非同期のみ)現在公式で提供されているコードではJavaScript SDKの読み込み部分が非同期(async)になっている。以前は同期(sync)だった。(４月９日訂正)- 古いJavaScript SDK読み込みコード(同期のコード)というのが、Googleアナリティクスのログに「?fb_xd_fragment=」付きのページビューを大量に発生させるバグ付きのコード。
- 新しいJavaScript SDK読み込みコードだと、IE6・7でGoogleアナリティクスを使った計測ができない。(いいね自体はできる) ！重要
[html title=”新しいJavaScript SDK読み込みコード(非同期)”]
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘Facebook appID’, // App ID
channelUrl : ‘your-url’, // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
[/html]
[html title=”古いコードJavaScript SDK読み込みコード(同期)”]
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
[/html]
[html title=”いいねボタン表示コード(HTML5)”]
<div data-href="your-url" data-send="false" data-layout="button_count"></div>
[/html]
[html title=”いいねボタン表示コード(XFBML)”]
<fb:like href="your-url" send="false" layout="button_count"></fb:like>
[/html]
Googleアナリティクスのソーシャルトラッキング用コードについて
- 公式ヘルプに書かれている実装方法は、古いXFBML版のコードの場合について。(新しいコードの場合については書かれていない)
- ただ、サンプルコードのページを見ると古いコードの場合も新しいコードの場合も書かれている。なので、これがすごく参考になります。
- サンプルコードのページ右側のChange logという囲みの中にある「Go to:」で「facebook_js_async.html」(新しいコード)や「facebook_js_sync.html」(古いコード)などを参考に。
- 公式ヘルプはいいねボタンのHTML5版について何も書かれていません。(おそらくヘルプページが作られたときには、まだHTML5版がなかったため)
- 公式ヘルプに書いてあるのはいいねボタンのXFBML版についてです。iframe版はトラッキングできないので無視されてます。(iframe版ではトラッキングできないという記載すらない…)
ということで、要するにIE6・7でFacebookのいいねボタンをGoogleアナリティクスを使って計測しようとするなら、古いXFBMLのコードを使わないとだめですよ、っていうことと、Googleの公式ヘルプは古いXFBMLコードのことが書いてあるのでこれを参考にしましょう、特にサンプルコードが役に立ちます、ということでした。
ということで、要するにIE6・7でFacebookのいいねボタンをGoogleアナリティクスを使って計測しようとするなら、古いJavaScript SDK読み込み(同期)のコードを使わないとだめですよ、っていうことと、Googleの公式ヘルプは古いJavaScript SDK読み込み(同期)のコードのことが書いてあるのでこれを参考にしましょう、特にサンプルコードが役に立ちます、ということでした。(4月9日訂正)
事前情報だけでブログ記事が1つ書けてしまったので、具体的な実装方法は次の記事で書きたいと思います。
————————————————–
————————————————–
[…] […]