javascript - 动态改变<script>标签src

Question

动态改变src标签

我正在将 Google 分析集成到我的 Angular 应用程序中。它需要在 script-src 及更高版本中添加 google tracking id。它需要先加载，然后再加载。

虽然它适用于一个环境，但我想为不同的环境使用不同的 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 标签没有改变。

Answer 1

您可以先根据主机名找到所需的跟踪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>