CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-tag-manager
northernMonkey
northernMonkey

Reputation: 1403

Google Tag Manager delaying window.load?

I have a page that fires an ajax call on load

$(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).

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

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.

Upvotes: 14

Views: 14877

Answers (2)

Marquinho Peli
Marquinho Peli

Reputation: 5139

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:

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

Upvotes: 2

lossleader
lossleader

Reputation: 13505

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:

  1. fix the custom scripts to use async resources
  2. change the firing trigger to page view -> window loaded
  3. replace the scripts with google provided tags (if available) as they should be constructed to use only async resources

  4. Block custom scripts in the GTM (which will also prevent the related tracking)

  5. Change async to defer on your GTM snippet.

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.

Upvotes: 8

Related Questions