AngularJSでGoogleAnalyticsを使う

先日作った RedmineTimeTracker でAngularJSからGoogle Analyticsを使うためのモジュールを作ったのでメモ。

背景

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

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

作ったモジュール

AngularJSでGoogle Analyticsを使うためのシンプルなServiceとDirective

使い方

直接使う感じ。

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

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

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

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

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

感想

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

参考