フィルタじゃNG！ fb_xd_fragment の問題への正しい対処の仕方

「fb_xd_fragment が Google Analytics のログに残るのは Facebook の「いいね！」ボタンのバグなので、Analytics 側でフィルタの設定を行いましょう」という記事が世の中に溢れています。ちょっと気になったので調べてみたところ、根本的な対処が必要であることがわかったのでメモ書きしておきます。

どうすればよいのか

先の現象のことは実は Facebook JavaScript SDK のドキュメントできちんと説明されています。詳細はそちらを読んでいただくとして結論だけ言うと、対策は channelUrl というパラメータを設定して対応するページを用意することです。 channelUrl を設定するとパフォーマンスが向上し、逆に設定しないと以下のような問題が発生するので、設定することが強く推奨されています。 Facebook からするとこれらの問題はバグというよりも仕様なのでしょう。

フレームを使うと Social Plugins が表示されないことがあります。
自動再生ビデオやオーディオを埋め込むと 2つのストリームを再生してしまいます。
channelUrl パラメータを設定しないと fb_xd_bust や fb_xd_fragment といったパラメータつきのログが残ります。

というわけで fb_xd_fragment がログに出ているときの正しい対処法は channelUrl を設定することです。ログのフィルタはそれができない場合の次善策ではありますが、1 や 2 の現象に関しては全く効果がありません。

具体的な対処方法は

JavaScript SDK ドキュメントからの抜粋ですが、以下のようなページを用意します。 PHP での例です。

 <?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/en_US/all.js"></script>

そして「いいね！」ボタン等を設置するページに以下の JavaScript を埋め込み、非同期 js ファイルロードのコードと組み合わせて使います。 channelUrl のところに作成したページの URL を指定します。

<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID from the App Dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };
</script>

JavaScript の書かれたページと channelUrl のページとで document.domain およびプロトコルを合わせておかなければならないとのことなので、環境によってはサーバーサイドで処理が必要かも知れません。

WordPress を使用しているのであればずっと簡単に解決する方法があります。 Facebook for WordPress プラグインを使うのです。 これをインストールするだけで先の 2つの処理を加えてくれます。

余計なひとこと

今回、ちょっとがっかりなのは fb_xd_fragment について書いた記事は多いものの、channelUrl の対策をきちんと説明した記事は見つからなかったことです。だからこそこうして記事にしているというのはありますが、残念です。

どうすればよいのか

具体的な対処方法は

余計なひとこと

共有: