Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
56
Help us understand the problem. What is going on with this article?
@soundTricker

AngularJSでGoogle Analyticsなどをいい感じで扱えるようにするAngulartics

More than 5 years have passed since last update.

AngularJSは仕組だけじゃなくて、モジュールも素敵なんだけど、でもあまり紹介されないから悲しい大橋です。

今回はAngularJSでGoogle Analyticsなどをいい感じで扱うAngularticsの紹介です。

どうなる?

わざわざJS側で_gaq.push(['_trackEvent', 'btn','click'])とか書かなくても
<button id="btn" analytics-on="click" analytics-event="click">と書けばイベントトラッキングしてくれます。

また$routeを使っていても自動で擬似ページ遷移をトラッキングしてくれるようになります。

ちなみにデモサイトがあって、そこをDeveloper Consoleを開いて、見て触っていただくとどんなもんかわかると思います。

またAngularticsはGoogle Analytics以外のアクセス解析ツールも同じインターフェースで利用でき、
アクセス解析のベンダー依存なコードを排除できる点も素敵です。

ちなみに使えるのは

  • Google Analytics
  • Kissmetrics
  • Mixpanel
  • Chartbeat
  • Segment.io

のようです。

今回は 僕がそれ使ったことがないので Google Analyticsを使う場合の使い方を書きます。

使い方

インストール

いつもどおりbowerがあるのでbower経由で落とします。
ちなみにこれをangularticsjquery-waypointsというプラグインに依存があり、そこからjqueryへの依存がありますが、
angularticsのScroll Tacking機能(要はスクロールのイベントを自動取得する機能)を使わない場合は無くても動くようです。
※完全に確認ができているわけではないです。

$ bower install angulartics --save

bower使っていない場合は、
デモサイトから落とせます。

bowerで取得したり、落としてきたら必要なjsを読み込みます。

    <script type="text/javascript" src="bower_components/angulartics/dist/angulartics.min.js"></script>
    <script type="text/javascript" src="bower_components/angulartics/dist/angulartics-ga.min.js"></script>

なお利用するアクセス解析によってangulartics-ga.min.jsの部分は変わります。

analytics.jsの修正

既にGoogle Analyticsなどを利用している場合、
自動ページトラッキングのコードが記述されているはずです。
Angularticsではこれを外す必要があると記載があるので外しておきます。

analytics.js
ga('send', 'pageview'); // <---- delete this line!

この辺りはツールによっても異なるので柔軟に対応して下さい。

モジュールの読み込み

そしてモジュールを(ry

module.coffee
angular.module('MyApp', ["angular-intro"])

トラッキング方法

擬似ページ遷移

ここまでの設定で、擬似ページ遷移は自動的に収集されるようになります。
自動収集されないようにする場合は以下の設定を入れて下さい。

module.coffee
angular.module 'MyApp', [
        'angulartics'
        'angulartics.google.analytics'
        ]
    .config [
        '$analyticsProvider'
        ($analyticsProvider)->
            $analyticsProvider.virtualPageviews(false)
    ]

クリックなどのイベント

analytics-on属性とanalytics-event属性を利用します。
ほぼそのままですが、analytics-onが収集するイベントの名前で、
analytics-eventがイベント名です。

<button analytics-on="click" analytics-event="Buy" value="Buy"></button>

またGoogle Analyticsのようにlabelcategoryなどのベンダー特有の設定がある場合はanalytics-プレフィックスを使った属性名を付けます。

<button analytics-on="click" analytics-event="Buy" value="Buy" analytics-category="Book" analytics-label="Google-Apps-Scriptクイックリファレンス"></button>

コードから

コードからイベントの収集をする場合は、$analyticsをDIして使います。

HogeCtrl.coffee
angular.module('MyApp')
        .controller 'HogeCtrl',
         [
            '$scope','$analytics',
            ($scope , $analytics)->
                $analytics.pageTrack('/hoge')
                $analytics.eventTrack('click')
                $analytics.eventTrack('Buy', {
                    "category":"Book"
                    "label" : "Google-Apps-Scriptクイックリファレンス"            
                })
        ]

ui-routerを使っている場合の注意

AngularUIのui-routerを使っている場合、擬似ページ遷移の収集が行われません。

どうやらAngularticsは内部で$routeProviderによって擬似ページ遷移が成功した時に発生する$routeChangeSuccessイベントを拾ってページ遷移の収集を行っているようです。

ただui-routerを利用している場合、ページ遷移時にこの$routeChangeSuccessイベントが発生しないため、
イベントの収集ができなくなっています。

ui-routerと併用したい場合は以下のようにui-router側のページ遷移成功時のイベント($stateChangeSuccess)をハンドリングして、$routeChangeSuccessを発生させてやれば良いかなと思います。(邪道感がありますが...

handler.coffee
$rootScope.on "$stateChangeSuccess", ()->
    $rootScope.$emit("$routeChangeSuccess")

56
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
soundTricker
Google API、GSuite、GCP、Angular(1&2)、Google Apps Scriptらへんの人 一応Google Developer Expert(Apps Script)です。 https://developers.google.com/community/experts/directory/profile/profile-keisuke_oohashi

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
56
Help us understand the problem. What is going on with this article?