コピペで簡単！Google AnalyticsでFacebook/Twitterのシェア数を自動集計する方法
2013/09/02
なぜかアナリティクスが取得してくれないFacebook/Twitterのシェア数。今回は、簡単に計測できるようにしてしまう素敵なカスタマイズ方法を紹介します。
旧アナリティクスタグ、および新しいUniversal Analyticsの両方で使えるよう、それぞれのコードを用意しました。コピペでサクッと設定してみてください。
- １.新Analytics（Universal Analytics）での設定方法
- ２.旧Ver.のアナリティクスタグ（ga.js）での設定方法
- ３．WordPressで旧タグ（ga.js）を使っている場合
- おまけ：その他のソーシャルサービスの計測をラクにするカスタムレポート配布
新Analytics（Universal Analytics）での設定方法
現在Googleアナリティクスでの新規アカウント作成時、デフォルトとなっているUniversal Analytics。色々と仕様が変わってしまって困惑されている方も多いのでは？
というわけで、まずはこちらの計測タグを使っている場合の設定方法をご紹介します。
設定タグ
以下のコードをトラッキングしたいサイトに設置された”アナリティクスタグの中”に挿入してください。（※設置位置は</script>の直前） FB.Event.subscribe('edge.create', function(targetUrl) {ga(['send', 'social', 'facebook', 'like', targetUrl]);});
FB.Event.subscribe('edge.remove', function(targetUrl) {ga(['send', 'social', 'facebook', 'unlike', targetUrl]);});
FB.Event.subscribe('message.send', function(targetUrl) {ga(['send', 'social', 'facebook', 'send', targetUrl]);});
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
twttr.ready(function (twttr) {twttr.events.bind('click', function (e) {ga('send', 'social', 'twitter', 'click', window.location.href); });
twttr.events.bind('tweet', function (e) {ga('send', 'social', 'twitter', 'tweet', window.location.href);});});
設置し終わると以下の様な形のタグ構造になります。
設置完了後のタグ構造
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'navigater.info');
ga('send', 'pageview');
FB.Event.subscribe('edge.create', function(targetUrl) {ga(['send', 'social', 'facebook', 'like', targetUrl]);});
FB.Event.subscribe('edge.remove', function(targetUrl) {ga(['send', 'social', 'facebook', 'unlike', targetUrl]);});
FB.Event.subscribe('message.send', function(targetUrl) {ga(['send', 'social', 'facebook', 'send', targetUrl]);});
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
twttr.ready(function (twttr) {twttr.events.bind('click', function (e) {ga('send', 'social', 'twitter', 'click', window.location.href); });
twttr.events.bind('tweet', function (e) {ga('send', 'social', 'twitter', 'tweet', window.location.href);});});
</script>
この設定が完了すると、「トラフィック > ソーシャル＞プラグイン」のレポートに取得データが反映され、Facebookであれば『いいね！数』と『いいね！の取り消し数』、さらに『送信コマンドでコメントを付けてのシェア数』などが別々に計測可能になります。
Twitterの場合は『ツイートボタンのクリック数』、『ツイート数』をそれぞれ計測可能になり、ページごとのシェア数遷移やユーザーとのエンゲージメント把握に活用できるようになります。
設定完了後のレポートイメージ
設定上の注意と取得不可能なケースについて
ちなみに、上記のタグでソーシャルトラフィックが取得可能なのは以下の条件を満たしている場合のみとなるのでご注意ください。- Facebook いいね！ボタン：XFBML・HTML5で実装
- Tweetボタンが：最新のコードで実装
Facebookの場合、iframeだけは実装方法が異なりクリックアクションを取得できないので計測不能。
Twitterの場合は2012年末に大きな仕様変更があったため、それ以降の公式ツイートボタンを使っていることが前提となります。
旧Ver.のアナリティクスタグ（ga.js）での設定方法
Universal Analyticsへの移行はまだまだリスキーだし、いきなり変更は難しい！というサイトや、あまりにも多くのカスタム変数を既に定義してしまっているため移行のコストがかかりすぎる！というサイトの場合、まだまだ旧アナリティクスタグ（通称ga.js）の需要も多いかと思います。というわけで、以下に従来型の非同期アナリティクスタグを（ga.js）を利用されている場合のカスタム方法も紹介しておきます。以前からあったいくつものJSを別途読み込んで・・・という形式よりずっと楽に利用できる形になっています。
設定タグ
以下のコードを計測したいサイトのソース内に設置してください。設置位置は</body>の直前。それだけです。<script type="text/javascript">function extractParamFromUri(uri,paramName){if(!uri){return}var uri=uri.split('#')[0];var parts=uri.split('?');if(parts.length==1){return}var query=decodeURI(parts[1]);paramName+='=';var params=query.split('&');for(var i=0,param;param=params[i];++i){if(param.indexOf(paramName)===0){return unescape(param.split('=')[1])}}}twttr.events.bind('tweet',function(event){if(event){var targetUrl;if(event.target&&event.target.nodeName=='IFRAME'){targetUrl=extractParamFromUri(event.target.src,'url')}_gaq.push(['_trackSocial','twitter','tweet',targetUrl])}});</script>
<script type="text/javascript">window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));</script>
<script type="text/javascript">FB.Event.subscribe('edge.create',function(targetUrl){_gaq.push(['_trackSocial','facebook','like',targetUrl])});FB.Event.subscribe('edge.remove',function(targetUrl){_gaq.push(['_trackSocial','facebook','unlike',targetUrl])});FB.Event.subscribe('message.send',function(targetUrl){_gaq.push(['_trackSocial','facebook','send',targetUrl])});</script>
旧タグの場合はアナリティクスのタグ内への設置ではなく、完全に別のスクリプトとして<body>内に書いてしまえばOK。
これで取得が開始され、上記と同様にソーシャルプラグインでの計測がスタートされます。が、こちらも上記同様に古いボタンや<iframe>型のいいね！ボタンには対応していませんので、その点だけご注意ください。
WordPressで旧タグ（ga.js）を使っている場合
実は、WordPressを使用していて、かつ旧アナリティクスタグ（ga.js）を使っている場合はさらに簡単な実装方法が存在します。
WordPressならプラグインで一発設定も
公式プラグインには登録されていないのですが、 LunaMetricsという方の開発したプラグイン「Google Analytics Social Engagement Tracking Code」です。
なんとこのプラグイン、ダウンロードしてそのままWordPressのPluginディレクトリにアップ ⇒ 管理画面上から有効化にするだけでOK。
残念ながらUniversalAnalyticsにはまだ対応していないようなのですが、すでにWordPressで運用中のサイトがある場合にはまさに「一発OK！」なナイスな機能を持っているのでオススメです。
おまけ：その他のソーシャルサービスの計測をラクにするカスタムレポート配布
Facebookのアクションが取れる事は分かった。Twitterも把握した。じゃあはてブは？Pocketは？Deliciousは？Disqusは？
この辺りのデータ、実は全く別のレポート「トラフィック＞ソーシャル＞データハブのアクティビティ」にて確認できます。が、非常に見づらいんです。
デフォルトのレポートのままでは、いつ、どのページが、どのSNSで共有されたのか。その結果ページビューは？訪問数は？この辺りの主要データがさっぱり分からないんですね。
なので、一発で分かるようになるカスタムレポートも作っておきました。（※オリジナルです）
こちらもぜひGoogleアナリティクスに組み込んで日々の解析に役立てていただければと思います。
（※画像をクリックするだけでカスタムレポートの適用が実行されます）
※画像クリックでカスタムレポートの適用を行うには、Googleアナリティクスのアカウントにログインしている必要がありますのでその点ご注意を。
（執筆/編集 中村健太）
