はじめに

フロントエンドとしてangular 4を使ってます。全てのアプリケーションは、docker image化して各種環境で動作可能なようにしているシステム構成で開発しています。その時問題になるのが…

google analytics idを各環境毎に切り替えれない！

という問題です。
angularのenvironmentの機能で、各環境毎にビルドしてimage化してしまうという方法も1つの方法ですが、結構aotビルドに時間もかかるので、何とか外部にリソース定義して行えないかなーと他の方法を探しました。

もちろんGoogleAnalytics側のフィルタ設定で各環境毎に見る情報をフィルタリングしても良いと思います。
でも、商用環境と、それ以外の多くの環境をごちゃごちゃさせるのは、精神衛生上よろしくない、またGoogle Analytics側のアカウント権限設定とかいろいろめんどいとかがあったので分けました。

結論

Google Tag Manager (以降GTMと記載しています )使えばなんとかなる。

事前準備

下記作業を行う必要があります。ウィザードに従えば簡単にできます。
1. GTMのアカウントを作成
2. コンテナ(GTMの管理単位) の作成。

実装

angular側

anguar側には、gtmのインストールタグを記載する必要があります。

GTMインストールタグの確認

対象のコンテナを表示して「管理」タブを表示→「コンテナ」の表示項目にある「Googleタグマネージャーをインストール」をクリックすると、下記のように確認することができます。

angular側に組み込み

index.htmlに、上記で確認したtagを記載するだけです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>読み込み中</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TAG-CHANGE-ME');</script>
<!-- End Google Tag Manager -->
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TAG-CHANGE-ME"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <app-root></app-root>
</body>
</html>

GTM側の設定

タグ、トリガー、変数という考え方があります。細かい事はリファレンスを見てもらうとして、ここではGoogleAnalyricsのID変更方法だけ記載します。

変数：EnvGoogleAnlayitcsID

まず、ユーザー定義変数で環境毎のGoogle Analytics IDを変更する定義を作成します。
「変数」→「組み込み変数」→「新規」ボタンを押して作成します。

そして下記のように EnvGoogleAnlayitcsID として作成してみます。
~~変数の種類は、「カスタムJavaScript」です。そして「保存」ボタンをクリックするの忘れないでください。~~
2018/7/25 更新：1987yama3さんに、もっと良い記法があるのを教えてもらいました！

変数の種類は「ルックアップテーブル」です。動作するHostName毎にGoogle Analytics IDを設定しています。

変数：GoogleAnalytics

またユーザー定義変数で、下記のように変数の種類は「Googleアナリティス設定」として、トラッキングIDに関しては、上記で作成した EnvGoogleAnlayitcsID を設定します。

別の話ですが、angularだと、ページタイトルがindex.htmlの初期値でanalyticsに送信されてしまう問題があります。ちょっと遅延させるなどの別対応が必要です。

タグ：画面表示

画面表示された際に、GoogleAnalytics側にsendするための設定です。
「タグ」の新規で作成します。

トリガー：

そしてタグの画面表示を作成した際、画面の下にトリガー表示領域がありますが、トリガーもそのまま作成しちゃいましょう。

動作確認

プレビューモードで実際に動かしてタグ送信されている事を確認してください。
ちょっと上記の設定とは違うものとなりますが、Tags Fired On The EventにGA送信タグ設定があればOKです。

送信内容は、更にクリックしていくことで確認できます。