CODEWITHSUNDEEP
javascripttrackinggoogle-tag-manager
user3472527
user3472527

Reputation: 61

Google Tag Manager Positioning

I have a general question regarding the positioning of the google tag manager snippet. According to google's implementation guideline the tag manager should be implemented right after the body-tag starts. My question is the following:

For example VWO (visual website optimizer) recommends to load the code in the head to avoid flickering...

Can I have 2 containers? one at the end of the head and one at the beginning of the body?

Upvotes: 4

Views: 3791

Answers (2)

Eike Pierstorff
Eike Pierstorff

Reputation: 32760

It is possible to have two tag manager tags, but this won't do what you want (and might cause problems). The reason GTM should be placed directly after the opening body tag and not inside another element is that GTM does a bit of DOM manipulation to insert the included tags. All your configured tags are packed into a Javascript object which is inserted into your page and fired from there. Putting the GTM tag into another location will not change the place where the tags are inserted (unless the user has disabled Javascript in which case image tags will be displayed in an iFrame). However it means the GTM tag might fail since the DOM operation that injects the Javascript might not work from another location other than the one specified (especially true if you put it outside the body).

Actually Google says the Tag Manager is not suited for tags that change the look of the page (like A/B-Testing Tools, which are listed as "coming soon" ever since GTM was first published) for that reason.

Upvotes: 2

Lucas Massuh
Lucas Massuh

Reputation: 221

This has changed over time and now GTM features integrations for A/B testing tools like Google's Optimize.

In order to do that, there are two pieces of code you need to add: Right after the <head> tag:

    <!-- 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.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-CONTAINER_ID');</script>
<!-- End Google Tag Manager -->

Right after the <body> tag

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-CONTAINTER_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Upvotes: 1

Related Questions