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

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

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

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



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

```js: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'));

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

```js: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

```js: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"));
```
続いてトラッキング用コード。「ツイート」ボタンが押された数を計測できる。

```js: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/

```html: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」を付けた。クラス名は何でもいい。

```html
<span class="line">
```

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

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

# 参考
[Facebookのいいねボタンや、Twitterのツイートボタンのクリックを計測する](http://www.kwonline.org/memo2/2016/03/02/facebook%E3%81%AE%E3%81%84%E3%81%84%E3%81%AD%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%80%81twitter%E3%81%AE%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E3%82%AF%E3%83%AA/)


***
コピペ用

```html: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>

```

```js: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);
});
});
```