CODEWITHSUNDEEP
javascriptperformanceasynchronousloadinggoogle-tag-manager
And Finally
And Finally

Reputation: 5704

Google Tag Manager - what about scripts in the footer?

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?

Upvotes: 7

Views: 16259

Answers (3)

Ben McCann
Ben McCann

Reputation: 19004

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

Upvotes: 0

Francesco
Francesco

Reputation: 328

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.

Upvotes: 4

Nick Blexrud
Nick Blexrud

Reputation: 9603

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.

Upvotes: 5

Related Questions