🐴

環境別に Angular で Google Analytics 4 の設定をする

2021/12/13に公開

Angular(typescriptで) で Google Analytics 4(以下GA) の設定する方法がまだ見つからなかったので、こちらを試しました。
今回はngx-angular-analyticsのようなラッパーではなく、シンプルにgtag.jsを使うような設定です。

試した環境

  • "@angular/cli": "~13.0.3"
  • "@angular/core": "~13.0.2"
  • "typescript": "~4.4.4"

GA の 準備

  1. 測定ID (上のスクショの緑枠)
  2. index.html に貼り付けるscriptタグ (上のスクショの赤枠)

上記までの設定値の取得までは、公式のページなどで参照してください。

Angular に GA の 設定

1. index.html に GA の設定を追加

headタグの一番下に、GAの設定を追加します🐴

環境別(ステージング・本番)で 測定ID を変える場合にも対応するため、設定ページに貼ってあるタグ(スクショの赤枠)のパラメーターを消してます🐴

環境別に分ける必要がない場合、赤枠のタグをそのままベタ貼りで大丈夫です🐴

index.html

  <!DOCTYPE html>
  <html lang="ja">
    <head>
      # 他省略
+    <script async src="https://www.googletagmanager.com/gtag/js"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+    </script>
    </head>
    <body>
      <app-root></app-root>
    </body>
  </html>


2. 使用する npm パッケージの追加

Angular が 追加されている package.json に GA に使用するパッケージ追加します🐴

npm i -D @types/gtag.js
package.json
{
  "devDependencies": {
     # 他省略
+    "@types/gtag.js": "^0.0.8",
  }
}

3. tsconfig.app.json に GA の設定を追加

@types/gtag.js を追加しましたが、TSが見つけられず、
TS2304: Cannot find name 'gtag'. というエラーが出ます🐴

TSに見つけてもらうため、tsconfig.app.json に types の設定を追加します🐴

tsconfig.app.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compilerOptions": {
    # 他省略
-    "types": [""],
+    "types": ["gtag.js"]
  },
}

4. 環境別の設定を追加

GAの準備で測定IDをenviroment.tsに記述します。
環境別にある場合は、各環境別に設定しましょう🐴
今回は例として、environment.prod.tsに貼っています。

dev環境では、environment.tsgtagIdが設定され、prod環境では、environment.prod.tsgtagIdが設定されます🐴

environment.ts
export const env {
+ gtagId: 'G-XXXXXXXXXXXX',
}
environment.prod.ts
export const env {
+ gtagId: 'G-XXXXXXXXXXXX',
}

5. main.ts に GA の設定を追加

main.ts

+ import { env } from './environments/environment';

+ // google analytics
+ gtag('js', new Date());
+ gtag('config', env.gtagId);

これで完了です。
Angular の tsファイル内でgtagが使えるようになりました!

あとは、Angular のコンポーネントで gtag 関数を思いのまま使うだけです🐴

gtagのイベント送信内容などはこちら
https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=ja

GitHubで編集を提案

Discussion