Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 250
northernMonkey Avatar asked Mar 30 '17 15:03

northernMonkey


People also ask

Does Google Tag Manager slow down website?

Does Google Tag Manager slow down the site? The most absolute answer is yes. Just like any additional line of code added to the site, it will have some impact on the page loading speed.

How can I speed up my GTM?

Load GTM Fast by Loading Less Scripts The best solution of them all is to simply load fewer external scripts. Move things in GTM scripts into the application code, the cookie banner, for instance, and reclaim control over the initial layout.

Does GTM load asynchronously?

“Google Tag Manager is an asynchronous tag, meaning that when it executes, it does not block other elements from rendering on the page. It also causes the other tags that are deployed via Google Tag Manager to be deployed asynchronously, meaning that a slow loading tag won't block other tracking tags.”

How do you delay a GTM tag?

Create GTM Timer Trigger The field Interval determines how long the timer will wait after trigger to fire a Tag. To achieve a five-second delay on our Facebook Pixel Tag, enter 5000 milliseconds in the Interval field. If no Limit is placed on this trigger, then it will fire a Tag every consecutive interval.


2 Answers

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.

like image 124
lossleader Avatar answered Sep 18 '22 13:09

lossleader


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>
like image 43
Marquinho Peli Avatar answered Sep 17 '22 13:09

Marquinho Peli