动态更改 <script> 标签 src

debugcn 发表于 Dev

达南杰

动态更改 src 标签

我正在将 Google 分析集成到我的 Angular 应用程序中。它需要google tracking id在 script-src 和更高版本中添加一个。它需要首先加载。

虽然它适用于一个环境，但我想为不同的环境使用不同的 ID。

我正在尝试类似的东西：

<script>
    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', googleTrackingId);
  </script>

但是 src 标签没有改变。

雷波先生

您可以先根据主机名找到所需的跟踪 ID，然后创建<script>标签。

<script>

    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }

      document.write( '<scr' + 'ipt async src="https://www.googletagmanager.com/gtag/js?id=' + googleTrackingId + '"></scr' + 'ipt>' );

  </script>

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', googleTrackingId);
  </script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。