从 env 变量读取跟踪 ID，并在 HTML 文件头部部分的 GA 脚本标记中使用它

Question

我有一个跟踪ID，我应该将其作为环境变量传递给包含在HTML文件head部分中的Google Analytics脚本。我的问题是最简单的方法是什么，因为 src 标签不能使用文字字符串。这是代码片段：

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXX-1');
</script>

我只需要用process.env.GA_TRACKING_CODE替换"UA-XXXX-1"的每个外观，我尝试了https://www.googletagmanager.com/gtag/js?id={process.env.GA_TRACKING_CODE}但这是不可能的，所以有什么想法吗？

Answer 1

<script async src="https://www.googletagmanager.com/gtag/js?id={{env('GOOGLE_ANALYTICS_ID')}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{env('GOOGLE_ANALYTICS_ID')}}');
</script>

Answer 2

我在问自己同样的问题时遇到了这个问题，并想添加我发现的内容。我先解释一下我的想法，然后给你具体的代码。

由于您可以访问process.env，我假设您正在基于节点的前端框架中构建单页应用程序(SPA(，例如React，Vue.js或Angular。我认为这个问题是：

如何在 SPA 的index.html文件中动态放置某些内容， 特别是在头牌中？

我建议在整个SPA的生命周期中尽早找到运行函数的时间，我们称之为injectGtagScript()。它会得到process.env.GA_TRACKING_CODE，构建脚本标签并将其注入到你的头标签中。早期的时间可能会在一个js文件中，该文件运行以设置所有内容，根据您的框架称为app.ts或main.js之类的东西。这样做的好处是，您可以在创建 SPA 的顶部组件之前设置 GA 事件的集合，因此您可以完全确定该集合不会错过任何页面浏览量或其他事件。通过注入，我的意思是使用vanilla JS来操作HTML-DOM，我们在使用SPA时习惯于认为这是丑陋的，但请记住，这是在静态html文件中组件的实际SPA树之外。我在 Angular 的 npm 包中找到了解决问题的方法，它这样做了： https://github.com/maxandriani/ngx-google-analytics/blob/master/projects/ngx-google-analytics/src/lib/initializers/google-analytics.initializer.ts#L82 此外，谷歌这样做的方法可能是使用谷歌标签管理器，这是一个仅用于将脚本标签注入静态 html 的工具，所以在这种情况下，这实际上是你在后台所做的。

这是一个片段，其中包含我如何编写injectGtagScript()

的示例

export function injectGtagScript() {
const tagId = process.env.GA_TRACKING_CODE;
const s: HTMLScriptElement = document.createElement('script');
s.async = true;
s.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
head.appendChild(s);
}

这应该回答手头的问题。有了这个解决方案，后续的是如何像在代码段中那样调用gtag()。在那里，我建议在动态代码dynamicGtag()中编写它的一个版本，并在运行injectGtagScript()后立即从那里调用它。这方面的一个片段是：

export function dynamicGtag() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(arguments);
}

因此，现在您可以在app.js或相应的环境中运行以下内容：

injectGtagScript();
dynamicGtag('js', new Date());
dynamicGtag('config', process.env.GA_TRACKING_CODE);