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

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)

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

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)

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

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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL