Диспетчер тегов Google задерживает window.load?

У меня есть страница, которая запускает вызов ajax при загрузке

$(window).load(function() {
  updateDeliverySlots();
});

У меня также есть javascript Google Tag Manager в верхней части моего тела (я знаю, что текущее предложение состоит в том, чтобы поместить это в раздел head, но у нас нет обновил код еще и не думаю, что это источник проблемы).

<body>
        <!-- Google Tag Manager -->
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=XXXX" height="0" width="0" style="display:none;visibility:hidden">
    </iframe>
</noscript>
<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='//www.googletagmanager.com/gtm.jsid='+i+dl;f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','XXXX');
</script>
<!-- End Google Tag Manager -->
....
</body>

У меня проблема с одним из вызовов, сделанных script, включенными в тэг GTM. Этот script отправляет запрос третьей стороне. Если запрос не может подключиться по какой-либо причине (например, сервер не работает), моя функция updateDeliverySlots() (и вызов ajax в нем) не запускается до истечения времени запроса (60 секунд). Я также обнаружил, что страница по-прежнему "загружается" (в соответствии с значками браузера).

Есть ли что-то в моей реализации GTM, что я делаю неправильно? Насколько я понимаю, все, что срабатывало на обратной стороне Google Tags, должно быть асинхронным и не имело бы никакого отношения к "готовности" к странице.

Ответ 1

Синхронные скрипты должны извлекаться и выполняться, когда обработка достигает их, сценарии асинхронизации может запускается в любое время после обработки.

В зависимости от времени, которое находится вне управления сервером/страницами, асинхронный script может поэтому:

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

В GTM вы можете выбрать один из нескольких вариантов:

исправить пользовательские скрипты для использования ресурсов async
смените триггер срабатывания на page view -> window loaded
замените скрипты тегами, предоставленными Google (если они доступны), поскольку они должны быть созданы для использования только ресурсов async.
Блокировать пользовательские сценарии в GTM (что также предотвратит соответствующее отслеживание)
Измените async на defer на ваш фрагмент GTM.

то есть:

  <!-- 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.defer=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');</script>
  <!-- End Google Tag Manager -->

Так как это перемещает весь процесс GTM после того, как страница полностью проанализирована, она сломает теги Google Optimizer и раннее отслеживание страницы.

Ответ 2

У меня была такая же проблема, и GTM действительно задерживал выполнение других скриптов. Небольшое изменение для загрузки с помощью jquery $(window).load решило проблему:

<script>function loadgtm(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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
};$(window).load(function(){loadgtm(window,document,'script','dataLayer','GTMID');});</script>