标签管理器延迟窗口。加载?

I have a page that fires an ajax call on load

我有一个页面可以在加载时触发ajax调用

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

I also have Google Tag Manager javascript at the top of my body (I know the current suggestion is to place this in the head section, but we haven't updated the code yet, and don't think that is the source of the problem).

我的主体顶部也有谷歌标记管理器javascript(我知道目前的建议是将其放在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>

I have a problem with one of the calls made by a script included in a GTM tag. This script sends a request to a third party. If the request can't connect for whatever reason (eg. server being down) my updateDeliverySlots() function (and the ajax call therein) is not fired until the request times out (60 seconds). I also find that the page is still 'loading' (according to the browser icons).

我有一个问题，其中一个调用的脚本包含在GTM标记中。该脚本向第三方发送请求。如果请求因任何原因无法连接(如:我的updatedeliveryslot()函数(以及其中的ajax调用)直到请求超时(60秒)才被触发。我还发现页面仍在“加载”(根据浏览器图标)。

Is there something in my GTM implementation that I am doing wrong? It was my understanding that everything fired on the back of Google Tags should be asynchronous and would have no bearing on the 'readiness' of the page.

在我的GTM实现中有什么事情是我做错了吗?我的理解是，在谷歌标记后面触发的所有内容都应该是异步的，并且不会影响页面的“准备就绪”。

2 个解决方案

#1

Synchronous scripts must be fetched and run when processing reaches them, async scripts may run at any time after processing reaches them.

同步脚本必须在处理到达它们时获取并运行，异步脚本可以在处理到达它们之后的任何时间运行。

Depending on timing that is outside of the server/pages control, an async script can therefore:

根据服务器/页面控制之外的时间，异步脚本可以:

add a synchronous resource before the document finished, with timing that delays the load event
在文档完成之前添加同步资源，使用延迟加载事件的时间
add a synchronous resource after the page is processed and not affect the load event.
在页面被处理后添加同步资源，不影响加载事件。
add an asynchronous resource that should not significantly impact the page (unless it in turn adds a synchronous resource to the page)
添加不应该对页面产生重大影响的异步资源(除非它反过来向页面添加同步资源)

You may choose one of several options to resolve this in GTM:

您可以在GTM中选择以下几个选项之一来解决这个问题:

fix the custom scripts to use async resources
修改自定义脚本以使用异步资源
change the firing trigger to page view -> window loaded
将触发触发器更改为已加载的页面视图->窗口
replace the scripts with google provided tags (if available) as they should be constructed to use only async resources
将脚本替换为谷歌提供的标记(如果可用)，因为它们应该被构造为只使用异步资源。
Block custom scripts in the GTM (which will also prevent the related tracking)

阻止GTM中的自定义脚本(这也将防止相关跟踪)
Change async to defer on your GTM snippet.

更改异步以延迟GTM片段。

I.e:

即:

  <!-- 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 -->

Since this moves the entire GTM process to after the page is fully parsed, it will break "Google Optimizer" tags and early page tracking.

由于这将整个GTM进程移动到页面完全解析之后，它将破坏“谷歌优化器”标记和早期页面跟踪。

#2

I had same issue and GTM was really delaying other scripts execution. A small change to load it with jquery $(window).load solved the issue:

我也遇到了同样的问题，GTM真的推迟了其他脚本的执行。使用jquery $(窗口)加载它的一个小更改。加载解决问题:

<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>

#1