この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ケーススタディ
index.html に Google Analytics のタグを DEVとSTG の二つの環境別にそれぞれ埋め込む必要がありました。
解決方法
環境変数を格納する.envファイルをそれぞれ作成します。
React の環境変数の命名規則として頭にREACT_APPをつける必要があるのでお作法に従います。
.env.development
REACT_APP_GA_TAG_MANAGER_ID=GTM-N34****.env.stg
REACT_APP_GA_TAG_MANAGER_ID=GTM-KFD****index.html
次に環境変数を参照したい html ファイルで%<変数名>%の形式で文字列として参照します。
具体的には以下のような実装になりました。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ...meta tags and styles are omitted -->
<!-- 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",
"%REACT_APP_GA_TAG_MANAGER_ID%",
);
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=%REACT_APP_GA_TAG_MANAGER_ID%"
height="0"
width="0"
style="display:none;visibility:hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="root"></div>
</body>
</html>動作確認
DEV 環境
STG 環境
少しわかりづらいですが DEV 環境の html にはGTM-N34から始まるタグが埋まっており、STG 環境にはGTM-KFDから始まるタグが埋め込まれているのが確認できます。
25
