Codeless container placement option and WordPress 5.5
With WordPress 5.5 codeless container placement works now in less cases. But you can fix your theme.
With WordPress 5.5, lots of changes arrived and lots of incompatibilities with plugins and themes. At least one feature of GTM4WP is affected but currently I do not have any specific fix. Codeless container placement works now in less cases. TL;DR – themes need to adopt new best practices introduced in WordPress 5.2 (>1 year ago).
What is container placement?
There is a very basic option in GTM4WP that confuses some users. It is located below the container ID. Historically, this option was mandatory to be setup correctly in order for your Google Tag Manager (GTM) container to work.
The important part of the code
But as GTM evolved, the container code responsible to load and fire your tracking codes has changed. Google split the code into two parts. The first and most important part of the code is now added into the <head> section of your site. The container placement option in GTM4WP no longer controls where to inject this part of the GTM container code. Therefore, you can be sure that regardless of what placement option you select in plugin options, your GTM container will load and work correctly in most cases.
The (perhaps) less important part of the code
The second, maybe less important part of the container code is sometimes called the noscript or iframe part. As the name suggest, it is responsible to load your GTM container in cases when JavaScript, the programming language available inside browsers is not available for some reasons. It will not load and fire all of your tags as there can be many trigger conditions which needs JavaScript to be working. To track clicks on a click, to track an embedded YouTube video on your site, all those user interactions need JavaScript to be enabled in your browser.
Let’s be honest. Most websites need JavaScript for mandatory functions to work. To add a product into the cart. To be able to make the user experience more straightforward. All in all, many websites do not work properly if JavaScript is disabled in your browser. Therefore, the noscript part of the GTM container code is usually considered as less important in terms of tracking capabilities.
The reason the noscript code is still important
This noscript code is however also responsible to verify your site ownership in Google Search Console, if you select to verify ownership using the Google Tag Manager method. To make this work, the noscript code needs to be present just after the opening <body> tag in your HTML. Whitespaces and HTML comments between the opening <body> tag and the GTM noscript code are allowed but noting else.
And this is why proper code placement in GTM4WP is important. This is why there is the codeless option next to adding offered PHP code into your theme directly. If you do not feel comfortable to edit your WordPress themes files, codeless option is here to help. And it helped in many cases… until now.
Why is this so complicated? What is the challenge?
As many of you know, WordPress is a CMS with a very long history. Many years ago, almost all tracking codes needed either the <head> section of the source code or the end of the <body> section (also known as the footer of the page source). For that reason, WordPress has a standard way to add more codes into that sections of your pages. Almost every theme supports this since many years.
The need for the ability to inject a code after the opening body tag came only a few years ago. It was not that easy for any plugin to do this because there was no standard way for that. Some theme builders started to add support using their very own code syntax. Each theme builder used a different name for the same purpose in their code. Many themes did not have native support.
For those unsupported cases GTM4WP introduced the codeless placement option which is actually a hack. It uses the fact that there is a hook in all WordPress themes that allows the addition of extra content while the theme generates the opening <body> element itself. The big win here was that any added code was not encoded which made is possible for this generic integration to work in most cases.
With that, from this:
<body class="some class list">GTM4WP could inject extra content between the “t” and the quote character to generate this:
<body class="some class list"><noscript>...</noscript><br style="display:none;">And then WordPress 5.5 came…
When WordPress 5.5 was released, this little open door was closed when they changed the way the opening <body> tag is generated. Now this hack does not work anymore.
But the good news is that it should not be necessary to work anymore.
Old themes, new ways: the future of container placement
Actually, the issue is currently only with themes that do not implement new features of WordPress. A new theme feature was introduced in WordPress 5.2 (in May 2019) to bring order into the fragmented solutions of theme builders. They created a new WordPress hook: wp_body_open. Every theme that adopted this new hook in the past year is not affected by the update of WordPress 5.5 and the way GTM4WP tried to do what was almost impossible to do.
GTM4WP already supported the hooks of theme builders and added support for wp_body_open as well. Therefore, the only conclusion I can give you is that luckily there was a way to support proper GTM container code placement even if you are using an outdated theme. From now on, you should focus on well supported themes. If you see that the codeless option does not work, please contact your theme developer, and ask to add support for the wp_body_open hook described on the link above. This is the most convenient way to property place GTM tracking codes on your sites.