AngularでGoogleアナリティクスの解析をする方法

Question

AngularでGoogleアナリティクスを利用したいです。

【Angular】Googleアナリティクスをページ毎に設定する を参考にしたのですが、
environment.ts, environment.prod.tsでトラッキングIDを分けてせっかく書いても
index.htmlで<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*******-*"></script>と書いてしまうとIDが分けられないと思いました。
index.htmlでenvironmentで定義したトラッキングIDを使う方法は無いでしょうか？

---

使用環境

Angular CLI: 8.3.19
Angular: 8.2.14

Comments

[miyabi_pudding]

一点質問です。
プロジェクト（アプリケーション）は一個で、その中で、コンポーネント別にルーティングでページ分けを行っている、
ってことでよろしいですか？

Answer 1

参考ページのindex.htmlで実行しているもの、

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*******-*"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

をAngular上で組み直して実行しちゃえばいいかと。

// 全て、参考記事からの引用のため、質問者さんが手を加えている部分の考慮はしていない
export class GaService {

  // 前後省略

  /**
   * ページトラッキング
   * @param  {string} url URLのパス。スラッシュで始まる必要がある。
   */
  // コンポーネントから、windowと、documentを取得できるようにしておく
  sendPageView(url: string, window: Window, document: Document): void {
    // 初期でgaを定義してるわけではないので、下記はスルー
    // if (!this.useGA()) { return; }
    
    // まず、一番最初のGAのscript要素を挿入
    const f = document.getElementByTagName('script')[0];
    const j = document.createElement('script');
    j.setAttribute('async', 'true');
    j.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${environmentから使いたい方を入れる}`);
    f.parentNode.insertBefore(j, f);
    
    // あとは実行系を、Angular風に書き起こす
    window['dataLayer'] = window['dataLayer'] || [];
    window['gtag'] = () => {
      window['dataLayer'].push(arguments);
    };
    // window['gtag']('js', new Date());
    
    if (!url.startsWith('/')) { url = /${url}; }
    // 下記のenvironmentは使い分ける
    window['gtag']('config', environment.analytics.id, {
      'page_path': url
    });
  }

  // 前後省略
}

で、コンポーネント側からの実行は下記で。

// 前後省略
export class AppComponent implements OnInit {

  // 前後省略

  ngOnInit() {
    // tracking
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((params: any) => {
        // コンポーネントなら、windowとdocumentは存在するので、引数に入れる
        this.gaService.sendPageView(params.url, window, document);
      });
  }

}

動作検証は行っておりませんのでご了承ください。