Динамически изменить тег <script>src - PullRequest
Новая
       3

Динамически изменить тег <script>src

0 голосов
/ 29 сентября 2019

Динамически изменить тег src

Я интегрирую аналитику Google в свое приложение Angular. Требуется добавить google tracking id в script-src и позже. Он должен загружаться сначала, прежде чем что-либо еще.

Хотя он отлично работает для одной среды, я хотел иметь разные идентификаторы для разных условий.

Я пытаюсь что-то вроде: 

<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 не меняется.

Ответы [ 2 ]

2 голосов
/ 29 сентября 2019

Сначала можно найти нужный идентификатор отслеживания на основе имени хоста, а затем создать тег <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>
1 голос
/ 29 сентября 2019

Используя Javascript, вы можете получить элемент <script> по идентификатору и добавить все, что хотите, к атрибуту src элемента.

Редактировать: Вы можете изменить элемент скриптасразу после загрузки, используя обработчик событий onload скрипта: 

var analyticsScript = document.getElementById('analytics');
analyticsScript.onload = function() {
  analyticsScript.src += '?id=3wrwerf45r3t36y645y4';
  console.log(analyticsScript.src);
}
<script src='https://some_source' id="analytics"></script>

Почему ваш подход не работает

В своем HTML-коде вы пытаетесь использовать здесь литералы шаблона: 

<script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>

Однако литералы шаблонов работают в Javascript, а не в HTML (по крайней мере, насколько мне известно). Кроме того, литералы шаблона заключаются в обратные кавычки (`), а не в двойные кавычки (")!

...