AngularJSでGoogleAnalyticsを使う

先日作った [RedmineTimeTracker](https://chrome.google.com/webstore/detail/redmine-time-tracker/dmmneannhefdfnmkfheapickfaialefp?utm_source=chrome-ntp-launcher) というChromeAppでAngularJSからGoogle Analyticsを使うためのモジュールを作ったのでメモ。


# 背景

作っていたアプリで Google Analytics を使おうと思ったのだけれど、このアプリでは AngularJSを使っている。そうするとButtonタグとかクリックイベントのついたタグが動的に追加・削除されるので、idを指定してクリックイベントへ Google Analytics のコードをバインド、というのができない。

調べたらライブラリはいくつか見つかったのだけれど、トラッキングしたいだけなのになんだか面倒。  
と思ったので作りました。



# 作ったモジュール

```coffeescript:analytics.coffee
angular.module('analytics', [])
  .factory 'Analytics', ['$log', ($log) ->
 
    _service = null
    _tracker = null
 
    return {
 
      ###*
       Set parameter, and initialize.
       @method init
       @param param {Object} Parameter for Initialize (required).
       @param param.serviceName {String} service name (required).
       @param param.analyticsCode {String} google analytics code (required). ex) UA-32234486-7
      ###
      init: (param) ->
        _service = analytics.getService(param.serviceName)
        _tracker = _service.getTracker(param.analyticsCode)
 
 
      ###*
       Track a click on a button using the asynchronous tracking API.
       @method sendEvent
       @param category {String} The name you supply for the group of objects you want to track (required).
       @param action {String} A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object (required).
       @param label {String} An optional string to provide additional dimensions to the event data (optional).
       @param value {Integer} An integer that you can use to provide numerical data about the user event (optional).
      ###
      sendEvent: (category, action, label, value) ->
        if not _tracker
          $log.error "please init analytics."
          return
        _tracker.sendEvent category, action, label, value
 
 
      ###*
       Track a view using the asynchronous tracking API.
       @method sendView
       @param viewName {String} view's name which will be tracked.
      ###
      sendView: (viewName) ->
        if not _tracker
          $log.error "please init analytics."
          return
        _tracker.sendAppView viewName
 
 
      ###*
       Set Tracking is permitted.
       @method setPermission
       @param permitted {Boolean} Is enable tracking.
      ###
      setPermission: (permitted) ->
        if not _service
          $log.error "please init analytics."
          return
        _service.getConfig().addCallback (config) ->
          config.setTrackingPermitted(permitted)
 
    }
  ]
```

```coffeescript:ga-click.coffee
myApp.directive 'gaClick', (Analytics) ->
  return {
    restrict: 'A'
    link: (scope, element, attrs) ->
      element.on 'click', () ->
        Analytics.sendEvent 'user', 'clicked', attrs.gaClick
  }
```


# 使い方

直接使う感じ。

```coffeescript
angular.module('myApp', ['analytics'])
  .controller 'MainCtrl', (Analytics) ->

      # 初期化
      Analytics.init {
        serviceName:   "MyApplicationName"
        analyticsCode: "UA-32234486-7"
      }

      # 画面更新 
      Analytics.sendView("/app/")

```

DirectiveとしてHTMLに記述する感じ。

```html
<div ng-click="clickButton()" ga-click="clickButton" class="button">
  ・・・
</div>
```



# 感想

なんかモジュール化しておくとパッと使えそうで便利な感じ。  
とはいえ、Directiveにするとタグごとに記載しないと行けなくてすごく面倒だ。  
ng-clickを拡張するとかできないのかぁ?


# 参考

* [GoogleChrome / chrome-platform-analytics](https://github.com/GoogleChrome/chrome-platform-analytics/wiki)