Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the all-in-one-wp-security-and-firewall domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/meaningfree/www/analytics/wp-includes/functions.php on line 6114
【GA】GoogleアナリティクスでFacebookのいいね!ボタンを計測する方法(実装編) – meaningfree.analytics
土. 12月 14th, 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のいいね!ボタンを計測する方法(実装編)”

コメントを残す

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