Lonely Doll’s frontend blog

Web や アプリの Frontend 技術についてのブログです

Angular2 で Google Analytics を使って計測を行う方法 / How to implement Google Analytics into Angular2 apps

Angular2 で Google Analytics を使って計測を行う方法 / How to implement Google Analytics into Angular2 apps

SPA (いわゆる、Single Page Application )で作られた Web サイトの アクセス解析って、どうやって実装すればいいんだろ?
SPA Google Analytics とかでググったら公式の開発者向けドキュメントが出てきました。

だけど、これって「 SPA は画面が変わっても URL はかわらないから気をつけてね!」とか「 ハッシュ( # )を含むページの URL は要注意だぞ」ということが書いてあるだけで、具体的にどのようにして実装すればいいのかわからなん・・・

ということで、いろいろ調べてると Angular2 で作られたサイトの場合、angulartics という便利なモジュールがあるらしい、ということがわかったので試してみました。

angulartics について

angulartics とは、公式サイトによると、" Web analytics for AngularJS applications “ ということで、Google アナリティクス にかぎらずいろんな Web アナリティクス・アクセス解析のサービスに対応した、Angular アプリを拡張する便利モジュールのこと。
Google アナリティクス 以外の有名どころだと、Adobe Analytics とか Mixpanel とか、Web 解析 以外でも Marketo なんかにも対応しているみたいです。
なお、Angular はメジャー バージョン アップ に伴い Angular2 が主流となってきている模様。angulartics も Angular2 に対応していると言われる、angulartics2 を試します。

github.com

また、アクセス解析は無料でお手軽に試せる Google アナリティクス で試してみます。

www.google.com

基本的な実装の流れ

大まかには、

  1. インストール ~ すでに存在する、Angular2 アプリの追加モジュールとして angulartics2 をインストール
  2. 初期セットアップ ~ AppComponent と AppModule に angulartics2 のモジュールを追加
  3. Google Analytics のスニペットを index.html に追加
  4. 個々の追加計測の実装

という流れ。

インストール

Google アナリティクスで計測したい Angular アプリの root ディレクトリに移動して angulartics2 をインストールします。
インストールする方法はいろいろあるみたいですが、ここでは npm でインストール。

$ cd PATH_TO_ANGULAR_PROJECT  
$ npm install angulartics2 --save  

初期セットアップ

インストールが終わったらアプリ全体に対するセットアップとして、AppComponent と AppModule に angulartics2 を読み込むためのコードを書く。
* ここでは、Angular2 のチュートリアルである、Tour of Heroes のアプリに追加する手順を書いてるので、まだこのチュートリアルが終わっていない人は先にそちらを御覧ください。

Tutorial: Tour of Heroes ~ Angular docs:title

AppComponent に追加のコンポーネントとして angulartics をロードする

Angular アプリのすべての router の動作をモニターして、route の変化を Google アナリティクスのモジュール( provider )でキャッチできるように、ルートのコンポーネント(通常は AppComponent )に angulartics のコードを追加する。

// AppComponent.ts  
import { Angulartics2GoogleAnalytics } from 'angulartics2'; // <-- これを追加  
import { Component } from '@angular/core';  

AppComponent クラスの Constructor 内部でメンバー変数に設定する

また、AppComponent クラスの Constructor 内で Angulartics2Google アナリティクスがメンバー変数となるように設定する。

// AppComponent.ts  
export class AppComponent {  
  constructor(ga: Angulartics2GoogleAnalytics) {}  
}  

Angular2 のチュートリアル Tour of Heroes が一通り実装し終わったあとの AppComponent に上記の実装を行うと、app.component.ts は以下のようになる。

// app.component.ts  
import { Angulartics2GoogleAnalytics } from 'angulartics2';  
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'my-app',  
  styleUrls: [ './app.component.css' ],  
  template: `  
    <h1>{{title}}</h1>  
    <nav>  
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>  
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>  
    </nav>  
    <router-outlet></router-outlet>  
  `  
})  
export class AppComponent {  
  title = 'Tour of Heroes';  
  constructor(ga: Angulartics2GoogleAnalytics) {}  
}  

AppModule に angulartics2 のモジュールを追加

また、app.module.ts 内部でも、angulartics2 のモジュールに関する記述を追加する。追加する箇所は冒頭の Import

import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';

と、@NgModule 内の imports の配列に、Angulartics2Module.forRoot を追加する。

Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])

Tour of Heroes のチュートリアルが終わった後、上記のコード追加を行うと、app.module.ts は以下のようになる。

// app.module.ts  
import { NgModule } from '@angular/core';  
...(中略)...  
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';  

@NgModule({  
  imports: [  
    BrowserModule,  
    FormsModule,  
    Angulartics2Module.forRoot([  
      Angulartics2GoogleAnalytics  
    ]),  
    AppRoutingModule  
  ],  
  declarations: [  
    AppComponent,  
    DashboardComponent,  
    HeroDetailComponent,  
    HeroesComponent  
  ],  
  providers: [  
    HeroService  
  ],  
  bootstrap: [  
    AppComponent  
  ]  
})  
export class AppModule { }  

Google Analytics のスニペットを index.html に追加

ほとんど通常のサイトと変わらないのだが、サイトの html に Google アナリティクスのタグ(スニペット)を実装する。
ただ、普通のサイトならば前ページにタグを貼る必要があるが、Angular でできたサイトは、SPA なので、土台となる index.html に1度記述するだけでよい。
やり方はほぼ公式の開発者向けドキュメントにある通りで、

  1. Google Analytics の管理画面にログインして、タグをコピーする。
  2. Angular サイトの index.html の タグの直後に追加する

となる。

developers.google.com

ただ、この時公式の方法から少しだけ変更が必要になる。

<!-- Google Analytics -->
<script>  
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){  
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');  
  
ga('create', 'UA-XXXXX-Y', 'auto');  
// ga('send', 'pageview'); <-- この行をコメントアウト(もしくは削除)する  
</script>
<!-- End Google Analytics -->

コメント アウトした ga('send', 'pageview'); というコードは、まさにデータを計測する http リクエストを送信する部分なのだが、開発者ガイドのままだとページ ロードのタイミングと、Angular の router による画面の切り替えのタイミングの両方で http リクエストが送られることがあるので、ページ ロードのタイミングではリクエストを送らないようにコメントアウトしている。

実装はこれで終わり。
なんだ意外と簡単じゃないか。

動作確認

Google Analytics にはリアルタイム レポートというのがあるので、それを見ながら動作確認をすると・・・

Google Analytics で Angular2 アプリの計測ができた! / How to implement Google Analytics into Angular2 apps

計測できてる!
計測リクエストを送っている ga('send', 'pageview'); を結局どこにも記述していないのだが、その部分は angulartics が自動的に行なってくれている。
これで画面(追加の Component )をいくら追加しても自動的に計測されるのでとっても楽チン。これは( ・∀・)イイ!!

その他のフロント エンド関係記事

www.lonelydoll.net