AngularJSでGoogle Analyticsなどをいい感じで扱えるようにするAngulartics

AngularJSは仕組だけじゃなくて、モジュールも素敵なんだけど、でもあまり紹介されないから悲しい大橋です。

今回はAngularJSでGoogle Analyticsなどをいい感じで扱うAngularticsの紹介です。

どうなる？

わざわざJS側で_gaq.push(['_trackEvent', 'btn','click'])とか書かなくても
<button id="btn" analytics-on="click" analytics-event="click">と書けばイベントトラッキングしてくれます。

また$routeを使っていても自動で擬似ページ遷移をトラッキングしてくれるようになります。

ちなみにデモサイトがあって、そこをDeveloper Consoleを開いて、見て触っていただくとどんなもんかわかると思います。

またAngularticsはGoogle Analytics以外のアクセス解析ツールも同じインターフェースで利用でき、
アクセス解析のベンダー依存なコードを排除できる点も素敵です。

ちなみに使えるのは

• Google Analytics
• Kissmetrics
• Mixpanel
• Chartbeat
• Segment.io

のようです。

今回は 僕がそれ使ったことがないので Google Analyticsを使う場合の使い方を書きます。

使い方

インストール

いつもどおりbowerがあるのでbower経由で落とします。
ちなみにこれをangularticsはjquery-waypointsというプラグインに依存があり、そこからjqueryへの依存がありますが、
angularticsのScroll Tacking機能（要はスクロールのイベントを自動取得する機能）を使わない場合は無くても動くようです。
※完全に確認ができているわけではないです。

$ bower install angulartics --save

bower使っていない場合は、
デモサイトから落とせます。

bowerで取得したり、落としてきたら必要なjsを読み込みます。

    <script type="text/javascript" src="bower_components/angulartics/dist/angulartics.min.js"></script>
    <script type="text/javascript" src="bower_components/angulartics/dist/angulartics-ga.min.js"></script>

なお利用するアクセス解析によってangulartics-ga.min.jsの部分は変わります。

analytics.jsの修正

既にGoogle Analyticsなどを利用している場合、
自動ページトラッキングのコードが記述されているはずです。
Angularticsではこれを外す必要があると記載があるので外しておきます。

analytics.js

ga('send', 'pageview'); // <---- delete this line!

この辺りはツールによっても異なるので柔軟に対応して下さい。

モジュールの読み込み

そしてモジュールを(ry

module.coffee

angular.module('MyApp', ["angular-intro"])

トラッキング方法

擬似ページ遷移

ここまでの設定で、擬似ページ遷移は自動的に収集されるようになります。
自動収集されないようにする場合は以下の設定を入れて下さい。

module.coffee

angular.module 'MyApp', [
		'angulartics'
    	'angulartics.google.analytics'
		]
	.config [
		'$analyticsProvider'
		($analyticsProvider)->
			$analyticsProvider.virtualPageviews(false)
	]

クリックなどのイベント

analytics-on属性とanalytics-event属性を利用します。
ほぼそのままですが、analytics-onが収集するイベントの名前で、
analytics-eventがイベント名です。

<button analytics-on="click" analytics-event="Buy" value="Buy"></button>

またGoogle Analyticsのようにlabelやcategoryなどのベンダー特有の設定がある場合はanalytics-プレフィックスを使った属性名を付けます。

<button analytics-on="click" analytics-event="Buy" value="Buy" analytics-category="Book" analytics-label="Google-Apps-Scriptクイックリファレンス"></button>

コードから

コードからイベントの収集をする場合は、$analyticsをDIして使います。

HogeCtrl.coffee

angular.module('MyApp')
		.controller 'HogeCtrl',
		 [
			'$scope','$analytics',
			($scope , $analytics)->
				$analytics.pageTrack('/hoge')
				$analytics.eventTrack('click')
				$analytics.eventTrack('Buy', {
					"category":"Book"
					"label" : "Google-Apps-Scriptクイックリファレンス"			
				})
		]

ui-routerを使っている場合の注意

AngularUIのui-routerを使っている場合、擬似ページ遷移の収集が行われません。

どうやらAngularticsは内部で$routeProviderによって擬似ページ遷移が成功した時に発生する$routeChangeSuccessイベントを拾ってページ遷移の収集を行っているようです。

ただui-routerを利用している場合、ページ遷移時にこの$routeChangeSuccessイベントが発生しないため、
イベントの収集ができなくなっています。

ui-routerと併用したい場合は以下のようにui-router側のページ遷移成功時のイベント($stateChangeSuccess)をハンドリングして、$routeChangeSuccessを発生させてやれば良いかなと思います。（邪道感がありますが...

handler.coffee

$rootScope.on "$stateChangeSuccess", ()->
	$rootScope.$emit("$routeChangeSuccess")