AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法

10月から引き続きAngularJSな日々を送っている先生です。
今回はAngularJSで作ったシングルページアプリケーション（以下SPA）をGoogle Analyticsでトラッキングさせたいと思います。

SPAでのトラッキング問題

Google Analyticsは、タグを埋め込むだけで勝手にトラッキングしてくれる手軽な解析ツールです。しかしAjaxやpushStateなどページ遷移を伴わないSPAでは、トップページしか解析されません。Analyticsではその対策として、任意のタイミングでトラッキングすることができる仕組みを持っています。

// ページビュー
ga('send', 'pageview');
// イベントトラッキング
ga('send', 'event', 'image1', 'clicked');

参考：高度な設定 – ウェブ トラッキング（analytics.js）

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=ja

AngularJSでのページトラッキング

AngularJSを使ってSPAを作る場合、angular-routeまたはui-routerを使うことが多いかと思います。これらの遷移時にトラッキングさせるには、以下のようにルーティングが成功したときにトラッキングするよう書いてあげる必要があります。

app.run([
     '$rootScope',
     function($rootScope) {
          $rootScope.$on("$routeChangeSuccess", function (event, current, previous, rejection) {
               ga('send', 'pageview');
          });
     }
]);

これでページのトラッキングができます。

AngularJSでのイベントトラッキング

つづいて、指定した要素をクリックした時などにイベントトラッキングを取ります。

通常のページではonclickにトラッキングコードを書いていました。しかしながら、onclickを使った部分ではデータバインディングされた値を取得できません。そのような場合、ディレクティブを作って対処する必要があります。
それを怠って各コントローラーなどにトラッキングコードを書いたりすると、コードが分散してしまうため、保守性がよくありません。

そこで使うのがAngularticsというモジュールです。

Angulartics | Web analytics for AngularJS applications

http://luisfarzati.github.io/angulartics/

Angularticsを使ってみる

bowerでインストールしたり普通にダウンロードしたりした、angulartics.jsとangulartics-ga.jsを読み込みます。

<script src="js/angular1.3.js"></script>
<script src="js/angulartics.js"></script>
<script src="js/angulartics-ga.js"></script>

依存モジュールにも足しましょう。

angular.module('app', ['angulartics', 'angulartics.google.analytics'])

そして、Analyticsのタグから以下の部分を削除してください。これをやらないと初回に二度トラッキングされてしまうので注意してください。

ga('send', 'pageview’); //<= この行をアナリティクスのコードから削除してください

準備ができたらトラッキングしていきましょう。

ページトラッキング

もう終わりました。何もする必要はありません。

イベントトラッキング

イベントトラッキングを取りたい要素に以下の属性を付けます。

<a href="file.pdf" analytics-on analytics-event=“イベント名” analytics-label=“ラベル名” analytics-category=“カテゴリ名">Download</a>

上のように、それぞれラベルやカテゴリも指定することもできます。ちょうどGoogle Analyticsのイベントトラッキングとほぼ同じになります。（valueは対応していないようです）

参考：イベント トラッキング – ウェブ トラッキング（analytics.js）

https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja

クリック以外のイベントを取る場合は、

analytics-on="touchstart"

としてあげるだけでOKです。

任意のタイミングでトラッキング

$analyticsサービスを使って任意のタイミングでトラッキングできます。

app.controller('SampleCtrl', [
     '$analytics',
     function ($analytics) {
          $analytics.pageTrack('/my/url');     // <- ページトラッキング
          $analytics.eventTrack('eventName'); // <- イベントトラッキング
          $analytics.eventTrack('eventName', {  category: 'category', label: 'label' }); // <- イベントトラッキング（オプション付）
     }
});

ページトラッキングが不要な場合

$analyticsProviderでオフにすることができます。

app.config([
     '$analyticsProvider',
     function ($analyticsProvider) {
          $analyticsProvider.virtualPageviews(false);
          // $analyticsProvider.withAutoBase(true); // ページトラッキングをフルパスで取りたい場合はここをtrueにします
     }
]);

オリジナルのトラッキング処理を作成する

プラグインを使ったり作ることでオリジナルのトラッキングも同時に取ることができます。

app.config([
    '$analyticsProvider',
    function ($analyticsProvider) {
        $analyticsProvider.registerPageTrack(function (path,properties) {
               console.log(path,properties);
        });

        $analyticsProvider.registerEventTrack(function (action, properties) {
            console.log(action,properties);
        });
    }
]);

$analyticsProvider.registerPageTrackでページトラッキングが実行されたときの処理を書きます。
$analyticsProvider.registerEventTrackにはイベントトラッキングが実行されたときの処理を書きます。

クリックイベントしか取らない場合には、以下のようなディレクティブを作ることでビューの属性が長くなるのを抑えることができます。
モデルからデータ受け取って常に付けるなどの共通化も可能になります。

app.directive('log', [
    '$analytics',
    function ($analytics) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                function clickHandler(e) {
                    var params = attrs.log;
                    if (!params) return;

                    params = params.split(',');
                    var options = {};
                    if (params[1]) {
                        options.category = params[1];
                    }
                    if (params[2]) {
                        options.label = params[2];
                    }
                    $analytics.eventTrack(params[0], options);
                }
                element.on('click', clickHandler);
                scope.$on('$destroy', function() {
                    element.off('click', clickHandler);
                });
            }
        };
    }
]);

<a href="file.pdf" log=“イベント名,カテゴリ名,ラベル名">Download</a>

まとめ

このようにAngulaticsを使うことで、SPAでも簡単にAnalyticsでトラッキングすることができます。

もし別の解析サービスを利用していても、プラグインを作ってあげれば比較的簡単に対応することができるのでオススメです。

ぜひ活用してみてください。

Enjoy AngularJS！

【AngularJSをさらにEnjoyする】

※ AngularJS勉強会 ng-mtg#6に登壇してきました

※ LIG主催のAngularJS勉強会 #ngCurryが開催されました

※ 業務で安心して使える厳選AngularJSモジュール8選＋α

※ フロントエンドエンジニアがオススメするWeb技術の書籍5選

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。