I have a problem on our webpage when gtm.js loads asyncrounous. In the moment it happens our site "flickers", so you have feeling that the site is loaded 2 times. I have commented the script for GTM and there is no "flickering" anymore. I have tried placing the script call just after <body> tag and also at the bottom before closing <body> tag, but same thing happens. I've read somewhere that this is the downside of async? Is this true and how could I solve this? Has anyone had same experiences/problems?
Snippet I use:
<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>
Thanks in advance.
This is not, per se, a problem with GTM or asynchronous code (and you should not place the script at the bottom of the page since this has it's own share of problems, even if it seems to be working at first glance; also take care not the wrap GTM in any other HTML tags).
However there might a problem if your GTM container contains tags that cause the page to be redrawn, i.e. pretty much anything that changes the layout of the page or inserts visible HTML (which is why Google warns against those kinds of tags).
If you have any custom HTML tags in your page you should disable them and try again (tags created from GTMs tag templates should not affect page layout).