清水 誠の「その指標がデザインを決める」 ― 第3回

Facebookの「いいね！」で売上は増えるのか？ (3/4)

Facebookの効果を計測する方法

　解析のゴールが明確になったので、実現するための計測・実装方法について検討します。いいね！ボタンのクリックとFacebookからの訪問をGoogle Analyticsで計測するため、以下のようなカスタマイズが必要です。

いいね！ボタンのタグ

　いいね！ボタンの実装には、iframe方式とXFBML方式の2種類があります。いいね！ボタンの設置方法については、公式サイトの「Like Button - Facebook開発者」を参照ください。以下のようにrefを追加するのが今回のポイントです。

iframe方式の場合：

<iframe src="...&ref=facebook-like"></iframe>

XFBML方式の場合：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=XXXXX&amp;xfbml=1"></script>
<fb:like … ref="facebook-like"></fb:like>

設定メモ

• ref属性を追加すると、いいね！で共有されたページをFacebookから訪問する時にURLに2つのパラメーターが追加される（iframe方式とXFBML方式のどちらも同じ）
  例：/xxx.html?fb_ref=facebook-like&fb_source=profile_oneline
  　fb_ref：refで指定した文字列がそのまま入る
  　fb_source：Facebook上でのリンクの掲載場所（「'home」「profile」「search」「other」などの)ストリームタイプと「oneline」「multiline」などのストーリータイプを「_」でつないだ文字列）が入る

　さらに、Google Analyticsでいいね！のクリック数を計測するため、以下のスクリプトを追加します。

if (FB && FB.Event && FB.Event.subscribe) {
     FB.Event.subscribe('edge.create', function(targetUrl) {
       _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
     });
}

設定メモ

• いいね！ボタンの後に記述する必要がある

Google Analyticsの計測タグ

　Facebookからのアクセス時に追加されるパラメーターをGoogle Analyticsの参照元（Source）と広告クリエイティブ（Ad Content）に入れるため、_trackPageviewよりも前のタイミングで以下のコードを実行します。

if (location.search && location.search.indexOf('fb_ref=') > -1) {
_gaq.push(
  ['_setCampSourceKey', 'fb_ref'],
  ['_setCampContentKey', 'fb_source']
);
if (document.cookie.indexOf(‘__utma=’)==-1)
  _gaq.push(['_setCustomVar', 1, 'facebook', location.pathname, 1]);
}

設定メモ

• 通常のトラフィックソースはラストタッチで上書きされてしまうため、初回訪問時のみユーザースコープのカスタム変数に固定文字列「facebook」とURLの一部を入れておく
• カスタム変数のスロット（2番目の引数）はサイトで未使用の番号に適宜変更が必要