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


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


今回はAngularJSでGoogle Analyticsなどをいい感じで扱う[Angulartics](http://luisfarzati.github.io/angulartics/)の紹介です。

# どうなる？

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

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

ちなみに[デモサイト](http://angulartics.herokuapp.com/google-analytics.html)があって、そこをDeveloper Consoleを開いて、見て触っていただくとどんなもんかわかると思います。

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

ちなみに使えるのは

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

のようです。

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

# 使い方

## インストール

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

```bash
$ bower install angulartics --save
```

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

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

```html
    <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`がイベント名です。

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

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

```html
<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](https://github.com/angular-ui/ui-router)を使っている場合、擬似ページ遷移の収集が行われません。

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

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

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


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

```