環境別に Angular で Google Analytics 4 の設定をする
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 の 準備
- 測定ID (上のスクショの緑枠)
-
index.htmlに貼り付けるscriptタグ (上のスクショの赤枠)
上記までの設定値の取得までは、公式のページなどで参照してください。
Angular に GA の 設定
1. index.html に GA の設定を追加
headタグの一番下に、GAの設定を追加します🐴
環境別(ステージング・本番)で 測定ID を変える場合にも対応するため、設定ページに貼ってあるタグ(スクショの赤枠)のパラメーターを消してます🐴
環境別に分ける必要がない場合、赤枠のタグをそのままベタ貼りで大丈夫です🐴
<!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
{
"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 の設定を追加します🐴
/* 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.ts のgtagIdが設定され、prod環境では、environment.prod.ts のgtagIdが設定されます🐴
export const env {
+ gtagId: 'G-XXXXXXXXXXXX',
}
export const env {
+ gtagId: 'G-XXXXXXXXXXXX',
}
5. main.ts に GA の設定を追加
+ import { env } from './environments/environment';
+ // google analytics
+ gtag('js', new Date());
+ gtag('config', env.gtagId);
これで完了です。
Angular の tsファイル内でgtagが使えるようになりました！
あとは、Angular のコンポーネントで gtag 関数を思いのまま使うだけです🐴
gtagのイベント送信内容などはこちら
Discussion