やりたいこと
自分のサイトに設置しているSNSシェアボタンが何回クリックされているのか、Google Analyticsで計測したい。
Google Analyticsのトラッキングコードのあとに以下のコードを入れることで計測できた。
集計は、アナリティクスの「ソーシャルプラグイン」という画面で見られる。
(集客＞ソーシャル＞プラグイン)
まずは公式の「いいね！ボタン」コードを取得
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);
});
};
公式のコードを取得
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);
});
});