Google Analyticsでサイトに設置したソーシャルボタンをトラッキングする

SEO・SEM

今回は、Google Analyticsで自社サイトに設置したソーシャルボタンを計測する方法を、
ご紹介したいと思います。

最新のトラッキングコードを取得
ソーシャルトラッキング用のJavaScriptを設置
Twitter用トラッキングコード
Facebook用トラッキングコード
GoogleAnalyticsで確認

※以下はサイトにソーシャルメディアボタンが設置されている事を前提として説明しております。
ソーシャルメディアボタン設置の方法に関しては、下記の記事を参考にしてください。
≫~~【WordPress・Movable Type】ソーシャルメディアボタン設置方法のまとめ~~

1.最新のトラッキングコードを取得

Google Analytics新バージョンの画面から、最新のトラッキングコードを取得して、＜/head＞タグの直前に貼り付けます。

<!-- Google Analytics Tracking Code -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _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+1」については、上記トラッキングコードを貼り付けるのみで、その他に必要な設定作業はありません。

2.ソーシャルトラッキング用のJavaScriptを設置

TwitterとFacebookを計測する為に、「ga_social_tracking.js」を以下よりダウンロードして、先程取得したトラッキングコードの下に読み込ませます。(14行目～16行目) ≫ga_social_tracking.js

<!-- Google Analytics Tracking Code -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _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 Analytics Social Button Tracking -->
<script type="text/javascript" src="http://www.tam-tam.co.jp/js/ga_social_tracking.js">
</script>

※「ga_social_tracking.js」UP場所のパスは適宜変更してください。

3.Twitter用トラッキングコード

＜head＞タグ内に下記Twitter用トラッキングコードを挿入。 ≫サンプルコード：twitter_js_async.html

<!-- Load Twitter JS-API asynchronously -->  
<script>  
(function(){  
var twitterWidgets = document.createElement('script');  
twitterWidgets.type = 'text/javascript';  
twitterWidgets.async = true;  
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';  
// Setup a callback to track once the script loads.  
twitterWidgets.onload = _ga.trackTwitter;  
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);  
})();  
</script>

4.Facebook用トラッキングコード

Facebookの「いいね！」ボタンのトラッキングは、iframe版では出来ないようです。「HTML5版」「XFBML版」での実装のみ、Google Analyticsでのトラッキングが可能のようです。 ■XFBML版「いいね！」ボタンの例■

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=IDを記述;xfbml=1"></script>
<fb:like href="SiteURIを入れてください。" send="false" layout="button_count" width="任意の値" show_faces="true" font=""></fb:like>

上記のコードに下記、計測用コードを追加します。 ※挿入場所は「fb:like」前でOKです。

<script type="text/javascript">_ga.trackFacebook();</script>

合体させるとこんな感じです↓

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=IDを記述;xfbml=1"></script>
<script type="text/javascript">_ga.trackFacebook();</script> 
<fb:like href="SiteURIを入れてください。" send="false" layout="button_count" width="任意の値" show_faces="true" font=""></fb:like>

※サンプルコードは下記より取得・参照いただけます ≫Google Analytics Sample Code