angularJSを使ってグロースハッカーになる(Google Analytics, Mixpanel)

これはAngularJS Advent Calendar 2014の7日目(12/7)の投稿です。

みなさん、グロースハックしてますか？(ゆるふわ)

グロースハックをするためには分析するためのツールが必要です。
そんなツールをAngularJSからどうやって使うかを紹介します。

書くこと

基本的にはAngularticsが一番充実してると思うので、そちらの紹介から。
Angularticsを使わない時の話を最後にします。そっちが本題だったり！

AngularJSガリガリ使ったアプリケーションの場合

Angulartics一択かもしれません。virtual pageのtrackingもサポートしていて良いです。

(2014/12/04時点)

Angulartics

複数の分析ツールをAngularJSから統一的に扱えるインターフェイスを提供してくれている。
超便利。

対応しているサービスは以下。

• Google Analytics
• Kissmetrics
• Mixpanel
• Flurry
• Piwik
• Segment.io

Google Analyticsでpv測ってMixpanelでユーザーeventトラッキングするのが王道なんでしょうか。自分はMixpanelゾッコンです。Segment.ioとかもステキな気配が...
こういう対応表を見てトレンドを知る今日このごろです。

使い方

公式のGetting startedです。導入はそちらを見てください。

virtual pageのpage viewをトラックするかどうかを設定できます。

module.config(function ($analyticsProvider) {
  $analyticsProvider.virtualPageviews(true);
}

eventを送る時はdirectiveをattributeで指定しましょう。
analytics-onで指定したeventが発火した時、イベント(analytics-category, analytics-event, analytics-label)が送信されます。

<button analytics-on analytics-event="Play" analytics-category="Videos" analytics-label="Gone with the Wind">Play<button>

controllerから使うには$analyticsサービスを使いましょう。

module.controller('SampleCtrl', function ($analytics) {
  $analytics.pageTrack('/my/url');
  $analytics.eventTrack('eventName');
  $analytics.eventTrack('eventName', {  category: 'category', label: 'label' });
}

AngularJSもまぁ使ってるアプリケーションの場合

ただ、例えばAngularJSを途中から導入してルーティング使ってないよ！的アプリケーションにとってはAngularticsのvirtual pageをトラックするとことか不要です。

直近、修正されようとしてるので記事を投稿する頃には治ってるかもしれませんが、
ハッシュリンクを壊してしまう問題などがありました。
https://github.com/angular/angular.js/issues/8675

このへん修正されればAngulartics入れとけば正解になるのかもしれません。
ただ、やっぱり「Google AnalyticsでPV計測するコードは既に入ってるし、僕は軽いのがいいよ、軽いのが、もぐもぐ」っていう場合があります。

軽めのmoduleはないでしょうか？探してみました。

• revolunet/angular-google-analytics

しっかり機能そろっていてgaのライブラリの読み込みまでやってくれるやつです。
Google Analyticsしか使わないぜ！って割り切ってるならAngulartics以外の選択肢に入ってきそう。

• panrafal/angular-ga

シンプルなライブラリ。勝手に送信したりしない感じが好感触です。
以下例ですがパッとみて何やってるかわかりやすいと思います。

// controllerからおくるよ
angular.module('myModule').controller('myCtrl', function (ga) {
    ga('set', 'dimension1', 'Hello!');
    ga('send', 'pageview', {title: 'Hello world!'});
});

// domから指定するよ
<a href="#" ga="'send', 'event', 'player', 'play', video.id"></a>

// 表示時にpvを送るよ
<div ga="'send', 'pageview', {title: 'Hello world!'}" ga-on="init" />

自分は最近Mixpanelの気分なのでMixpanelのみ扱えるものはないのかなと探してみたのですが、意外となかったです。
なので作ってみました。

imaimiami/ngMixpanel

mixpanel-onのeventが発火したらmixpanel-eventで指定されたeventを送ります。

<a mixpanel-event="Click A" mixpanel-on="click">A</a>

まだこれくらいしか出来ないので、表に出ろって感じなのですが、
運用の続いているアプリケーションはそれぞれでトラッキングの仕方もそれぞれだったりするので、
これぐらいしか必要ない場合もあります。

結局のところ

トラックするユーザー属性をどのタイミングで送るとか、アプリケーションごとにやんごとなきシガラミがあったりするので、意外と上記ライブラリとか参考に自前でdirective書くのが一番かゆいとこに手が届く選択肢だったりするかもしれません。

ただ、計測まで簡単に出来るよ、って環境が整ってるとAngularJS選択する理由にもなるんでAngularJSユーザーとして頑張りたいところです。で、module使うなら、Angularticsはステキだと思うのでAngularticsがマッチするなら選択してみたら良いのではないでしょうか。

以上、アドベントカレンダー！(今考えた掛け声)