Google Tag Manager - what about scripts in the footer?

Question

On our site we have script tags for third-party services like Lotame, Peer39 and Google Analytics in the footer just before the closing body tag, to avoid blocking the page render. We make scripts defer or async wherever possible, but some of the services don't work with asynchronous loading and have to be left as normal tags. We also send our other analytics service a bunch of data about the content of each page, which means we have opted to include that in the footer too.

We're now looking at using Google Tag Manager to include external scripts for us. To implement GTM, Google recommend you place their code block

<!-- Google Tag Manager -->
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
            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.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

just after the starting body tag. This will be the point at which GTM starts requesting the tags. I understand this position is recommended to avoid problems with IE6 and IE7.

GTM doesn't give you any way to specify the loading order of scripts. I'm concerned that if I follow this advice I'll be moving the requests for some synchronous script files from the footer, where they're safely out of the way of the main content, to the header.

Am I worrying unnecessarily? It seems too complicated to create a second GTM containers to manage my footer scripts. Would it make sense to place the GTM code block in the footer if I don't support IE7, given that some of my scripts are currently in the header?

Nordrheinwestfalen

Just commenting on the placement of GTM only: if you have the GTM placed further down the page, then there is a greater possibility that interactions that are supposed to be tracked through GTM may be missed if the user triggers those interactions before GTM has a chance to load. Also, if a user enters the site, and then quickly navigates to another page, again before GTM loads, then you may miss pageviews altogether. – Myongmyopia

If the user clicks so quickly that GTM misses the interaction, then I'd rather serve my users a faster experience and maybe miss some marketing data. – Roane

Answer 1

If your third-party services must be synchronous, then it's best to leave them out of Google Tag Manager (source: Are there tags that Google Tag Manager does not support?); this is fine. Often this is the case with website testing tools where you actual need to load content prior to the page rendering otherwise you see a flicker.

Also, GTM does offer a prioritization of when you're tags should fire - see Can I prioritize how tags are fired.

TLDR; throw all your async tags in to GTM and leave your sync tags out.

Reduplicative

Thanks a lot Blexy, that answers it! – Nordrheinwestfalen

Answer 2

You can also fire the GTM tags when the DOM is loaded or when the page is fully-loaded, a condition very close to put the tag before the </body> tag.

In the first case create a New Trigger Page View > DOM Ready, in the second create Page View > Window Loaded.

Wurster

Answer 3

To improve blocking, you can also try partytown, which moves your analytics scripts off the main thread and into a worker

Decathlon