Facebookの「いいね!」ボタンのアクションを計測する方法

こんにちは。MOBYLOG事務局です。

 

弊社(株式会社セラン)で提供している「ヘア・コンシェルジュ」というiPhone / Android対応の無料アプリがあります。

ヘア・コンシェルジュに関する話は後日掲載しようかと思います。

 

ヘア・コンシェルジュ紹介サイトはこちら(http://hair.concierge.cm/)

このアプリの紹介サイトにはFacebookの「いいね!」ボタンを設置していますが、今日は「いいね!」ボタンがクリックされたアクションをMOBYLOGで計測する方法を、ヘア・コンシェルジュ紹介サイトトップ(index.html)のHTMLソースを例に用いながらご紹介したいと思います。

 

MOBYLOG 5 から、PCサイトスマホサイトの計測ではページ内で発生するイベントを計測する「イベント」というメニューが追加されましたので、そのメニューで計測させる設定をします。

※携帯サイトは計測できませんのでご注意ください。

 

 

 

■事前に用意しておくこと 

 

まず、「いいね!」ボタンを設置したページに、MOBYLOGの計測タグが貼られていることが前提です。

MOBYLOG ENGINEで出力された自動タグでも、JavaScript版HandloaD TAGでもどちらでも計測できますが、MOBYLOG ENGINEの設定でSocket通信をしている場合、ページにJavaScriptタグが貼り付けされないため、イベント計測ができません。

 

その場合は「いいね!」ボタンを設置したページにJavaScript版HandloaD TAGを貼り付けて、

var __no_init = 1;
var __tracking_cookie_type = “ENGINE”;
と設定しておきます。
__no_init=1;を指定することで、ページが開かれた時にJavaScript版HandloaD TAGはビーコン通知をしないので、MOBYLOG ENGINEで通知されたPVと二重カウントされることがなくなり、且つ__tracking_cookie_type=”ENGINE”;とすることで、MOBYLOG ENGINEが発行したcookieをJavaScript版HandloaD TAGで利用するため、セッションやユニークが異なることを防ぐことができます。

ちなみにヘア・コンシェルジュは共有サーバを使っていてMOBYLOG ENGINEが導入できないのでJavaScript版HandloaD TAGで計測しています。

 

・HTMLソース204〜206行目(HandloaD TAGの配置)

<!– MOBYLOG HandloaD TAG start //–>
<script langage=”JavaScript” src=”http://concierge.cm/js/handload_tag.js”></script>
<!– MOBYLOG HandloaD TAG end //–>

 

 

 

次に、Facebookの「Like Button – Facebook開発者」ページからLikeボタンのプラグインコードを取得してサイトに配置します。

形式はHTML5もしくはXFBMLにします。

ヘア・コンシェルジュ紹介サイトはHTML5形式にしています。

 

・HTMLソース35〜45行目(JavaScript SDKの配置)

<body>
<!– like button //–>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<!– like button //–>

 

・HTMLソース102行目(プラグインコードの配置)

<div class=”fb-like” data-href=”http://hair.concierge.cm/” data-send=”true” data-layout=”button_count” data-width=”180″ data-show-faces=”false”></div>

 

※iframe形式では計測できません。

※設置方法についてはこちらのページで詳細に解説されています。

 

 

 

■「いいね!」ボタンの計測

 

ここまで準備ができていればあとは簡単です。

</body>の直前に以下のコードを配置します。

 

・HTMLソース208〜229行目(イベント計測用関数の配置)

<!– MOBYLOG push event start //–>
<script type=”text/javascript”>
// いいね
try{
  FB.Event.subscribe(‘edge.create’, function(response) {
    __push_event(‘いいね’,'トップページ’);
  });
}catch(e){}
// いいね-取り消し
try{
  FB.Event.subscribe(‘edge.remove’, function(targetUrl) {
    __push_event(‘いいね-取り消し’,'トップページ’);
  });
}catch(e){}
// コメント送信
try{
  FB.Event.subscribe(‘message.send’, function(targetUrl) {
    __push_event(‘コメント送信’,'トップページ’);
  });
}catch(e){}
</script>
<!– MOBYLOG push event end //–>

 

「__push_event(param1,param2)」がJavaScript版HandloaD TAGで用意されているイベント通知用の関数です。

param1はイベント名、param2にイベントカテゴリ名を代入しています。

 

Facebookの関数は「like」だけでなく「unlike」や「message.send」も用意されていますので、計測するようにタグを配置しています。

 

またこちらの記事を参考に、try-catchで囲んでみました。

 

※MOBYLOG ENGINEのイベント通知用関数は「__push.event(param1, param2)」で、JavaScript版HandloaD TAGとは異なります。

 

 

 

■MOBYLOGイベントレポート

 

「いいね!」ボタンをイベント通知すると、30〜40分後にレポート画面に反映されます。

 

 

「いいね」と「いいね-取り消し」をそれぞれクリックした結果が上図のレポートです。

イベント名とカテゴリ名、ページURLがレポート画面に反映されています。

 

MOBYLOGの「アクセス解析・効果測定プラン」と「効果測定プラン」はPV課金ですが、イベント通知はいくら通知されても課金対象にならないので、どんどんご利用ください。

 

 

 

■「いいね!」をコンバージョンとして計測するには

 

MOBYLOGで計測するイベントは、発生したイベントが成果にどれだけ貢献したのか?を「CV貢献数」として計測しますが、成果ページとして設定することができません。

もし、「いいね!」を成果として計測したい場合は、「__push_pv()」関数を利用します。
// いいね
try{
  FB.Event.subscribe(‘edge.create’, function(response) {
    __push_pv(‘いいね’);
  });
}catch(e){}
「__push_pv()」は、通知するログを通常のページログとして扱う関数なので、成果ページに「いいね」を登録しておきます。

これで「いいね!」クリックがコンバージョンとして計測されます。

 

※こちらもMOBYLOG ENGINEの関数は「__push.pv(param1)」で、JavaScript版HandloaD TAGとは異なります。 

 

Ttwitterの投稿の計測方法もありますが、それは後日。