angular 如何根据不同环境,动态加载外部的script

YoungChen
  • 62

在Angular应用中,使用Google Tag Manager来做跟踪,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/">
    <title>Angular Tour of Heroes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 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-WLQ6ZPC');</script>
    <!-- End Google Tag Manager -->
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQ6ZPC"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <my-app>Loading...</my-app>
  </body>
</html>

现在有生产环境,开发环境,测试环境,想要分别使用不同的GTM容器。
上述代码只能使用“GTM-WLQ6ZPC”一个GTM容器。

如何根据环境使用不同的GTM容器呢?
1.是否有办法不这样硬编码写到index.html文件中,而是根据某个变量动态加载<script>,<noscript>这两个标签?
2.或者有没有办法把GTM-WLQ6ZPC这个容器ID提取出来,再根据某个变量来控制。

我知道在environments文件夹下可以定义开发和生产环境的配置。但是能在这个index.html文件中用吗?

3.又或者,可以不像上述代码那样安装GTM到angular应用中,用其他方式安装?

回复
阅读 4.2k
1 个回答

似乎不能直接在index.html把容器ID定义为变量而后通过environment来指定
现在的做法
方法一:
在main.ts文件中根据environment中的定义来判断使用哪个容器

if (environment.production) {
  enableProdMode();
}

var gtmScript = document.createElement("script");
if (environment.production) {
  gtmScript.innerHTML = "(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-DUMMY-PROD');";

} else {
  gtmScript.innerHTML = "(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-DUMMY-DEV');";
}
document.head.appendChild(gtmScript);
platformBrowserDynamic().bootstrapModule(AppModule);

方法2:
定义多个index-{env}.html文件,在其内部写好要使用的容器ID。
在package.json中定义scripts,

"start-dev": "cp src/index-dev.html src/index.html && ng serve",
"start-prod": "cp src/index-prod.html src/index.html && ng serve",

通过命令区分是用哪个文件。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏