前回の記事に続いて、実装編です。
前回の記事をまだ読まれていない方はこちらからどうぞ。
【GA】GoogleアナリティクスでFacebookのいいね！ボタンを計測する方法(事前知識編)
前回の事前知識編の通り、現在のところどのブラウザでも問題なくGoogleアナリティクスで計測ができるのは、「古いJavaScript SDKの読み込みコード(同期)」のみですので、それで実装する方法について説明したいと思います。
いいねボタンの設置
Facebookの公式ページでは古い同期版のJavaScript SDK読み込みコードの実装方法は載っていません。
下記を参考にタグを記述してください。
[html title=”いいねボタン用コード:<body>タグ直下に記述”]
<!– Facebook JavaScript SDK を読み込み –>
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<!– いいねボタンを表示 –>
<div data-href="YOUR-URL" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="like"></div>
<!– いいねボタンを表示 –>
<fb:like href="YOUR-URL" send="true" layout="button_count" width="450" show_faces="false" action="like"></fb:like>
[/html]
いいねボタンの設置箇所の記述には色々と属性が付いていますが、すべて必須ではありません。必要に応じて設定してください。
主な属性は下記の通りです。
属性名(HTML5) 属性名(XFBML) 値 デフォルト値 説明 data-href href いいね!するページのURL いいねボタンをクリックしたページのURL いいね!するページを指定する属性。 data-send send true/false false 送るボタンを表示するかどうか。 data-layout layout standard/button_count/box_count standard ボタンのレイアウト。サンプルは公式ページで確認してください。 data-width width 横幅のピクセル値 layout属性によって変化。 ボタンエリアの横幅。ボタン設置場所のデザインに合わせて調整する。 data-show_faces show_faces true/false true いいね!した人の顔を表示するかどうか。 data-action action like/recommend like ボタンを「いいね」にするか「おすすめ」にするか。
他にもオプション項目はありますが、主に使うのはこれぐらいだと思います。
Googleアナリティクスのソーシャルトラッキング設定
Googleアナリティクス側の設定は割りと簡単です。まずソーシャルトラッキング用のjsファイルをサンプルコードページからダウンロードします。
ページ側の「View raw file」を右クリック＞名前を付けてリンク先を保存で保存してください。このjsファイルをいいねボタンを設置するページで読み込みます。Googleアナリティクスのトラッキングコードの後、</head>の前に記述するのが良いかと思います。
[html title=”ga_social_tracking.js読み込み”]
<script type="text/javascript" src="/js/ga_social_tracking.js"></script>
[/html]
jsファイルのパスは適宜変更してください。
次に、</body>の直前に下記の記述を追加します。
[html title=”_ga.trackFacebook実行”]
<script type="text/javascript">_ga.trackFacebook();</script>
[/html]
以上で、Googleアナリティクス側の設定は終わりです。
まとめ
ということで、すべてまとめると下記のようになります。
[html title=”FacebookいいねボタンのGA計測コード” highlight=”17,18,24,25,27,28,30,31,33,34″]
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘あなたのWebプロパティID’]);
_gaq.push([‘_trackPageview’]);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!– Googleアナリティクス ソーシャルトラッキング –>
<script type="text/javascript" src="/js/ga_social_tracking.js"></script>
</head>
<body>
<!– Facebook JavaScript SDK を読み込み –>
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<!– いいねボタンを表示(HTML5) –>
<div data-href="YOUR-URL" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="like"></div>
<!– いいねボタンを表示(XFBML) –>
<fb:like href="YOUR-URL" send="true" layout="button_count" width="450" show_faces="false" action="like"></fb:like>
<!– Googleアナリティクス ソーシャルトラッキング –>
<script type="text/javascript">_ga.trackFacebook();</script>
</body>
</html>
[/html]
です。いいねボタン表示用コードは必要な箇所に必要な数だけ入れてください。 それ以外は1回だけで大丈夫です。
本来はこのあとOGPの設定が必要ですが、それは他に詳しいサイトがたくさんあり、また情報も古くなっていないので、ここでは割愛させてください。すいません。
[…] […]