Angular: динамическая загрузка Google Analytics?

Question

Я использую тег Google Analytics Global site (gtag.js)

Однако я не могу напрямую вставить тег в index.html, так как trackingID динамически загружается по сети, поэтому мне нужно подождать, чтобы получить trackingID, прежде чем загружать Google Analytics.

Для этого я создал сервис.

@Injectable()
export class HelpersService {

  constructor() {}

  static loadGoogleAnalytics(trackingID: string): void {
    document.write('' +
      '<script async src=\'https://www.googletagmanager.com/gtag/js?id=' + trackingID + '\'></script>\n' +
      '  <script>\n' +
      '    window.dataLayer = window.dataLayer || [];\n' +
      '\n' +
      '    function gtag() {\n' +
      '      dataLayer.push(arguments)\n' +
      '    };\n' +
      '    gtag(\'js\', new Date());\n' +
      '\n' +
      '    gtag(\'config\', \'' + trackingID + '\');\n' +
      '  </script>');
  }
}

Затем, как только я получу свой идентификатор отслеживания GA, в моем корневом компоненте я вызываю этот метод:

HelpersService.loadGoogleAnalytics(myGATrackingID);

выпуск

GA загружен и работает (я вижу, что мой пользователь обнаружен в приборной панели GA). Но мой Angular проект вообще не загружен, у меня пустая страница, бесконечная загрузка, и при проверке HTML отображается только код GA, а не мой Angular проект.

Есть идеи?

Answer 1

Использование document.write () после полной загрузки документа HTML удалит весь существующий HTML: пример здесь

В вашем случае я просто извлеку функцию из <script> тег в качестве определения, или, если вам строго необходимо загрузить его после запуска приложения, извлеките его в угловой модуль с ленивой загрузкой.

РЕДАКТИРОВАТЬ -> вот пример кода:

  static loadGoogleAnalytics(trackingID: string): void {

    let gaScript = document.createElement('script');
    gaScript.setAttribute('async', 'true');
    gaScript.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${ trackingID }`);

    let gaScript2 = document.createElement('script');
    gaScript2.innerText = `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date());gtag(\'config\', \'${ trackingID }\');`;

    document.documentElement.firstChild.appendChild(gaScript);
    document.documentElement.firstChild.appendChild(gaScript2);
  }