土. 5月 18th, 2024

前回の記事に続いて、実装編です。
前回の記事をまだ読まれていない方はこちらからどうぞ。

【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ファイルをサンプルコードページからダウンロードします。

ga_social_tracking.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の設定が必要ですが、それは他に詳しいサイトがたくさんあり、また情報も古くなっていないので、ここでは割愛させてください。すいません。

One thought on “【GA】GoogleアナリティクスでFacebookのいいね!ボタンを計測する方法(実装編)”

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です