Lonely Doll’s frontend blog

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

Angular2 で Google Analytics ~ クリック計測 の方法 / How to implement click tracking with Google Analytics in Angular2 apps

Angular2 で Google Analytics ~ クリック計測 の方法 / How to implement click tracking with Google Analytics in Angular2 apps

前回の記事で Angular2 でできたサイトに Google アナリティクスを導入する方法を書いたのだが、知り合いから「 クリック計測 はどうやるんだ?」とツッコミをもらったので調べました。

angulartics について

angulartics とは、Angular2 製のサイト・アプリに、いろいろな Web解析や アナリティクス ツールを導入するのを助けてくれる便利な拡張モジュールのことです。
詳しくは前回の記事の angulartics についてのところを読んで下さい。

クリック計測実装の流れ

まず、前回の記事にそって Angulartics 自体をインストールし、Google Analytics の実装を終えている必要があります。
まだ実装が終わっていないなら、こちらの記事にそって Angulartics のインストールと Google Analytics の実装を行ってください。
www.lonelydoll.net

で、それが終わったらクリックの計測をするのだけど、Angulartics を使った Google アナリティクスのクリック計測は、大きくつぎの2つの方法があります。

  • (方法1)angulartics2On +タグのマークアップで Google アナリティクスのクリック計測する
  • (方法2)Component の中で Angulartics2.eventTrack を使ってクリック計測する

の2つがある。

(方法1)angulartics2On +タグのマークアップで Google アナリティクスのクリック計測する

方法1は、クリック計測を行うための angulartics2On という「ディレクティブ」と呼ばれるものを使う方法だ。
(ちなみに、2On は、" にじゅう・えぬ" じゃなくて、" に・おー・えぬ “だ。紛らわしいのでハマるかも。わたしのように・・・)

一度 Angular のアプリのモジュールで、Angulartics2Module を読み込んでおけば、あとはクリック計測したい html 要素(アンカータグやボタン、div など)に、必要な属性を追記していく、という方法だ。

まずはじめに、Angulartics2Module を読み込んでおく。前回記事にそって Angulartics2 と Google Analytics の実装が終わっていれば、この手順は必要ない。
src/app/app.module.ts に、次のように追記する。

...(中略)...
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';

@NgModule({
  imports: [
...(中略)...
    Angulartics2Module.forRoot([
      Angulartics2GoogleAnalytics
    ]),
...(中略)...
  ],
...(中略)...
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

次は、angulartics2On ディレクティブを使って、クリック計測したいタグにマークアップをしていく。
たとえば、Angular2 のチュートリアルにある、Tour of Heros を題材にすると、Hero の詳細画面に「 Back 」のボタンがあるが、このボタンのクリックを計測したい場合は、次のようにボタンのタグに、angulartics2On・angularticsEvent、angularticsCategory といった属性を追加していく。

<button (click)="goBack()" angulartics2On="click" angularticsEvent="ButtonClick" angularticsCategory="Engage">Back</button>

また、Google アナリティクスのイベント ラベルやイベント値を計測したい場合は、次のように書く。

<button (click)="goBack()" angulartics2On="click" angularticsEvent="ButtonClick" angularticsCategory="Engage" [angularticsProperties]="{label: 'backButton', value: 10000}">Back</button>

Angular のモジュールを、app.module.ts に共通化して全ての Component から参照されるようになっていれば、一度 app.module.ts に Angulartics2Module の読み込みをしておけば、あとは html のテンプレート内でクリック計測したい要素に、angulartics2On、angularticsEvent、angularticsCategory などを追記していくだけなので、ロジックを書くエンジニアじゃなくても html がかける人ならクリック計測を追加できるようになる。

(方法2)Component の中で Angulartics2.eventTrack を使ってクリック計測する

もう一つの方法は、テンプレートの html には直接記述せずに、Component 側でクリック計測の実装を行う方法。
さきほどと同じ、Hero の詳細ページの back ボタンのクリック計測は、次のようになる。

まず、src/app/hero-detail.component.ts を次のように変更する。

...(中略)...
import { Angulartics2 } from 'angulartics2';
...(中略)...
@Component({
  selector: 'hero-detail',
  templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent implements OnInit {
  constructor(
    private angulartics2: Angulartics2,
...(中略)...
  ){}
...(中略)...
  goBack(): void {
    this.angulartics2.eventTrack.next({
      category: 'Angulartics2',
      action: 'go-back',
      properties: { label: 'from-inside-component', value: 1000 }
    });
    this.location.back();
  }

上のコードを見ればわかるが、

  1. Angulartics2 をインポートする
  2. Component クラスのコンストラクタ内部で、メンバー変数に Angulartics2 を追加する
  3. あとは、ボタンなどのクリック にバインドされたメソッド内で、Angulartics2.eventTrack.next を呼び出す

という流れだ。

動作確認

前回と同じく、Google Analytics のリアルタイム レポートを使って動作確認をする。
ただ、今回は「イベント」というものが計測されているので、レポート > リアルタイム > イベント というメニューをクリックしてイベントのリアルタイム レポートを開くと・・・

Google Analytics で Angular2 アプリのクリック計測 / How to implement Google Analytics click tracking in Angular2 apps

今回も計測できてた!

まとめ ~ Angular2 と GA による クリック計測の一番簡単な方法は?

結局、方法1と方法2はどっちがいいのだろう?
たぶんこれは、サイトの要件と開発するチームのメンバーによるんだろうな。
例えば、

  • [要件] クリック計測の仕様を事前に決めるのは難しい。html を更新する時に都度必要に応じてクリック計測を追加していきたい
  • [チームメンバー] 気軽に html を変更できる環境で、コーダーも(アウトソースなどではなく)チーム内にいる

という場合なら、方法1の、html にマークアップしていく方法があうだろう。
一方で、

  • [要件] クリック計測の時に、( html 上には記述できない )サイト内部のデータを計測したい
  • [チームメンバー] 気軽に html のコーダーは気軽に仕事を頼める関係ではない(フロントの html をアウトソースしてる、とか)

という場合は、方法2を選択する必要がありそうだ。
わたしは・・・方法1かな・・・

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

www.lonelydoll.net www.lonelydoll.net