mizukami

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

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

  1. 最新のトラッキングコードを取得
  2. ソーシャルトラッキング用のJavaScriptを設置
  3. Twitter用トラッキングコード
  4. Facebook用トラッキングコード
  5. 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

5.GoogleAnalyticsで確認

GoogleAnalytics左メニューの[ユーザー]⇒[サマリー]⇒[ソーシャル]から確認できます。

(1)エンゲージメント

ソーシャル アクションが行われた訪問と行われなかった訪問で比較できます。

(2)アクション

ソーシャル ソース別にアクション(+1 のクリックや「いいね!」の操作)の回数を比較できます。

(3)ページ

サイトのページ別に、ソーシャルソース別・ソーシャルソースとアクションの組み合わせ別に、表示アクション数を比較できます。

※Google Analyticsでは、3月22日に新しいソーシャルメディア分析機能の発表がありました。 数週間後には、より詳細なソーシャル分析レポートが確認出来るようになると思います。

■参考サイト■

ソーシャル プラグイン アナリティクスについて
Google Analyticsでソーシャルメディアの価値をつかむ
Google Analyticsでソーシャルメディア分析、5つのポイント

注意点

WordPressなどのプラグインを用いて、TwitterやFacebookのボタンを表示させている場合は、 計測が出来ないようですのでご注意ください。
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら