はじめに

フロントエンドとして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さんに、もっと良い記法があるのを教えてもらいました！