サイトに設置したSNSシェアボタンがクリックされた数をGoogle Analyticsで計測する

やりたいこと

自分のサイトに設置しているSNSシェアボタンが何回クリックされているのか、Google Analyticsで計測したい。

Google Analyticsのトラッキングコードのあとに以下のコードを入れることで計測できた。

集計は、アナリティクスの「ソーシャルプラグイン」という画面で見られる。
(集客＞ソーシャル＞プラグイン)

Facebook

まずは公式の「いいね！ボタン」コードを取得
https://developers.facebook.com/docs/plugins/like-button

Facebook公式コード(script内)

//2016年5月現在
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

続いて下記のコードを入れることで、いいね！された数と取り消しされた数を計測できる。

Facebook計測用

window.fbAsyncInit = function(){
 FB.Event.subscribe("edge.create", function(){
  ga('send', 'social', 'facebook', 'like', location.href);
 });
 FB.Event.subscribe("edge.remove", function(){
  ga('send', 'social', 'facebook', 'unlike', location.href);
 });
};

Twitter

公式のコードを取得
https://about.twitter.com/ja/resources/buttons
ただしJavaScriptの部分は、公式デベロッパーサイトに載っているコードを使う。
https://dev.twitter.com/web/javascript/loading

Twitter公式コード

//2016年5月現在
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));

続いてトラッキング用コード。「ツイート」ボタンが押された数を計測できる。

Twitter計測用

twttr.ready(function (twttr) {
 twttr.events.bind("click", function (){
  ga('send', 'social', 'twitter', 'click', location.href);
 });
});

LINE 等

LINEやはてななどのシェアボタンは、適当にクラス名を付けて、jQueryを使って計測できる。

例えば、LINEで送るボタン
https://media.line.me/howto/ja/

LINEで送るボタン公式コード

<!-- 2016年5月現在 -->
<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>

上記の「span」にクラス「line」を付けた。クラス名は何でもいい。

<span class="line">

そしてトラッキングコードのほうに以下コードを追加。
「LINEで送る」ボタンをクリックされた数が計測できる。

LINE計測用

$(function() {
//↓spanに付けたクラス名を入れる
$('.line').click(function(){
var shareurl = $(this).attr('href');
ga('send', 'social', 'line', 'click', shareurl);
});
});

参考

Facebookのいいねボタンや、Twitterのツイートボタンのクリックを計測する

---

コピペ用

HTML

<!-- fb -->
<div id="fb-root"></div>
<div class="fb-like" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

<!-- tw -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>

<!-- line -->
<span class="share-line">
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>

ga.js

//fb
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function(){
FB.Event.subscribe("edge.create", function(){ga('send', 'social', 'facebook', 'like', location.href);});
FB.Event.subscribe("edge.remove", function(){ga('send', 'social', 'facebook', 'unlike', location.href);});
};

//tw
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr || {};if (d.getElementById(id)) return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));
twttr.ready(function (twttr) {
twttr.events.bind("click", function (){ga('send', 'social', 'twitter', 'click', location.href);});
});

//line
$(function() {$('.share-line').click(function(){
var shareurl=$(this).attr('href');
ga('send', 'social', 'line', 'click', shareurl);
});
});