今回は Facebook と Google の Social Interaction Analytics の話です。 Facebook 関連シリーズ (1回目、2回目) も今回で一区切りです。
初期化コードとイベントリスナー
詳細は Social Interaction Analytics のページに書いてあるので簡単にすませますが、Facebook の「いいね!」ボタンが押されたのをトラックするには以下のようなコードでイベントリスナーを登録します。
FB.Event.subscribe('edge.create', function(targetUrl) { _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]); });
先の記事に書いた通り、fb_xd_fragment の件もあって WordPress で「いいね!」ボタン等 Facebook の機能を使うのであれば、Facebook for WordPress プラグインがお勧めです。 しかし、ここでの問題は上のコードをどこに置いたらよいかということです。 Facebook for WordPress を使用すると以下のようなコードがページに埋め込まれます。
<script type='text/javascript'> /* <![CDATA[ */ window.fbAsyncInit=function(){FB.init({"channelUrl":"https:\/\/hetarena.com\/wp-content\/plugins\/facebook\/channel.php","status":true,"cookie":true,"xfbml":true,"appId":"my_app_id"});} /* ]]> */ </script> <div id="fb-root"></div><script type="text/javascript">(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="http:\/\/connect.facebook.net\/ja_JP\/all.js";ref.parentNode.insertBefore(js,ref);}(document));</script>
これは非同期のスクリプトファイル読み込み処理と初期化コードです。 非同期のため、何も考えずに先のイベントリスナー登録コードを書いてしまうと FB という変数が未定義でエラーとなってしまいます。 プラグインの出力する window.fbAsyncInit の関数の FB.init の後に先のイベントリスナー登録コードを埋め込むことができれば良いのですが、プラグインに手を加えたくないですね。 どうすれば良いのでしょう?
facebook_jssdk_init_extras フィルター
実はちゃんと ‘facebook_jssdk_init_extras’ という名前でそれ用のフィルターが用意されています。 ここにコールバックを登録しておけば目的の位置にコードを出力することができます。 プラグインの readme.txt の中で以下のように説明されています。
* `facebook_jssdk_init_extras` – add extra JavaScript to the `fbAsyncInit` JavaScript function called after the Facebook JavaScript SDK is loaded
というわけで以下の様なコードを function.php に書いておけばオッケーです。
add_filter('facebook_jssdk_init_extras', 'my_facebook_init'); function my_facebook_init() { return " FB.Event.subscribe('edge.create', function(targetUrl) { _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]); }); "; }
readme.txt やソースを読むといいことがあるよということで。