GoogleAnalyticsでTwitter、Facebookのソーシャルトラッキングを行う方法（WordPress+非同期ロード版）

Google Analyticsのソーシャルトラッキング、デフォルトではGoogle+1のみなのですが、コードを加えることでTwitterやFacebookボタンのトラッキングも行えるようです。

英語ではありますが、Googleでも丁寧なドキュメントが公開されています。

上記をもとに日本語で解説されている記事。

上記に従ってコードを記述すれば問題なくトラッキングできるかと思いますが、せっかく「ソーシャルボタンが重い…非同期読み込みでページの表示速度を改善！」の記事を書いたので、それを応用してGoogle Analyticsとソーシャルトラッキングコードの追加 + WordPressで実行をやってみました。

手順

1.Google AnalyticsのトラッキングIDを取得

まずはGoogle Analyticsでプロファイルの設定を行い、トラッキングIDを取得します（UA-xxxxxxxx-xってやつです）。すでに持っている方はIDを控えておいてください。

2.ga_social_tracking.js

GoogleのドキュメントにFacebookやTwitterと連携する為のコードの解説がいろいろと載っていますが、それらがまとめられたJSをGoogleが用意してくれていますので、それをダウンロードして使います。

ダウンロードしたら、お使いのテーマに放り込んでください（ここでは例として/PATH/TO/themes/お使いのテーマ/js/ga_social_tracking.js に設置したとして進めていきます）。

3./PATH/TO/themes/お使いのテーマ/functions.php

お使いのWordPressテーマのfunctions.phpにコードを追加します。今回は下記を行います。UA-xxxxxxxx-xの部分は(1)で取得したトラッキングIDに差し替えてください。

• ソーシャル系ボタン（Twitter、Google+1、Facebookいいね、Facebookシェア、はてなブックマーク）の設置
• Google Analyticsのトラッキングコード設置
• Google Analyticsのソーシャルトラッキング用コード設置

/**
 * ソーシャルブックマークとか
 * @param	String url
 * 		String title
 * @return	String html
 */
function getSocialBookmarkButton( $url, $title ) {
	$_ret = '
	<div id="socialbookmark">
		<ul class="social_mark">
			<li class="twitter_button"><a href="https://twitter.com/share" class="twitter-share-button" data-url="'.$url.'" data-text="'.$title.'" data-count="horizontal" data-lang="ja">ツイート</a></li>
			<li class="google_button"><div class="g-plusone" data-size="medium" data-count="true" data-href="'.$url.'"></div></li>
			<li class="facebook_button"><div class="fb-like" data-href="'.$url.'" data-send="false" data-width="100" data-show-faces="false" data-layout="button_count"></div></li>
			<li class="share_button"><a name="fb_share" type="button_count" share_url="'.$url.'" href="http://www.facebook.com/sharer.php?u='.urlencode( $url ).'&t='.urlencode( $title ).'">Share</a></li>
			<li class="hatena_button"><a href="http://b.hatena.ne.jp/entry/'.$url.'" class="hatena-bookmark-button" data-hatena-bookmark-title="'.$title.'" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
		</ul>
	<!-- end #socialbookmark --></div>
	';
	return $_ret;
}
function socialBookmarkButtonFooter() {
?>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_trackPageview']);
( function( doc, script ) {
	var js;
	var fjs = doc.getElementsByTagName( script )[0];
	var add = function( url, id, o ) {
	if ( doc.getElementById( id ) ) { return; }
		js = doc.createElement( script );
		js.src = url; js.async = true; js.id = id;
		fjs.parentNode.insertBefore( js, fjs );
		if ( window.ActiveXObject && o != null ) {
			js.onreadystatechange = function() {
				if ( js.readyState == 'complete' ) o();
				if ( js.readyState == 'loaded' ) o();
			};
		} else {
			js.onload = o;
		}
	};
	add( ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', 'google-analytics' );
	add( '<?php echo get_template_directory_uri(); ?>/js/ga_social_tracking.js', 'ga-social', function() {
		add( '//connect.facebook.net/ja_JP/all.js', 'facebook-jssdk', function() {
			_ga.trackFacebook();
			add( 'http://static.ak.fbcdn.net/connect.php/js/FB.Share', 'facebook-share' );
		} );
		add( '//platform.twitter.com/widgets.js', 'twitter-wjs', function() {
			_ga.trackTwitter();
		} );
	} );
	window.___gcfg = { lang: "ja" };
	add( 'https://apis.google.com/js/plusone.js' );
	add( 'http://b.st-hatena.com/js/bookmark_button.js', 'hatena-js' );
	add( 'http://static.bufferapp.com/js/button.js', 'buffer-js' );
}( document, 'script' ) );
</script>
<?php
}
add_filter( 'wp_footer', 'socialBookmarkButtonFooter' );

4.ソーシャルボタンを表示

あとは、ソーシャル系のボタンを設置したい箇所に下記のコードを設置します。

<?php echo getSocialBookmarkButton( get_permalink(), get_the_title() ); ?>

こんな感じでタグが出力されます。

<div id="socialbookmark">
	<ul class="social_mark">
		<li class="twitter_button">...</li>
		<li class="google_button">...</li>
		<li class="facebook_button">...</li>
		<li class="share_button">...</li>
		<li class="hatena_button">...</li>
	</ul>
<!-- end #socialbookmark --></div>

出力されるタグを変更したい場合は、(3)で入力したgetSocialBookmarkButton関数を変更してみてください。