Google Tag Manager is Breaking My Oxygen-Built Website (WordPress)

For the past year, I have had GTM integrated into my Oxygen-built website in the following form:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXX');
  gtag('config', 'GTM-XXXXX');
</script>

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

Google Analytics and AdWords were working correctly—I was focusing on maximizing clicks at the time. About 1.5 months ago, I changed my strategy to conversion maximization and created several conversion events on the site without modifying the code. Everything worked great—I noticed a significant increase in user engagement, and the budget utilization decreased. But that only lasted for a while.

A few days ago, conversions stopped working. GTM is undetectable by the debugger, even though it appears as connected in the panel. So, I tried changing the code on the site to the one suggested by Google:

<!-- 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-XXXXX');</script>
<!-- End Google Tag Manager -->

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

With this version, GTM becomes visible, and conversions appear to work when tested in debug mode. However, conflicts arise, particularly with the Oxygen plugin—some elements stop displaying, and even the Oxygen editor becomes unusable. Additionally, maps handled by the WP Maps Pro plugin fail to load.

I've tried everything—I analyzed all the changes I made when my original code stopped working. I also modified the new code to prevent it from loading in the Oxygen editor and ensured it loads asynchronously after all other scripts. However, conflicts with the maps persist. I also don’t want delayed loading to negatively impact conversions.

I also tried adding GTM through various plugins, but every time gtm.js is loaded from the server, the issue occurs.

What else can I check or do?

//EDIT Adding screenshot from console as requested.

The old snippet of code that you used to have wasn't loading or utilizing GTM. At least in the snippets you showed. It used gtag. Gtag is very different from GTM and it's the best practice not to use gtag directly like you used to, but let GTM manage it on its own implicitly. When gtag is manually loaded like that alongside GTM, it's likely to conflict with GTM's own initialization of gtag.

Ignore noscripts. Feel free not to use them at all. It's not like it will work with no JS. It's a bit of misleading Google has been enjoying.

When you conversions stopped working, you could just carefully debug them and restore. Instead, you changed the whole architecture (if you indeed didn't have GTM loaded before), which implies you'd have to reimplement all your gtag logic in GTM's UI. You probably had GTM in place, and gtag loaded alongside, but you didn't quote GTM loading code in your question. This makes me suspect you may have loaded GTM twice? Which I believe GTM counters. But still, check if you have two instances of GTM loaded in the DOM.

Now to your functional issues seemingly caused by GTM.

GTM has the power to interfere with the page, of course. It's considered the best practice to avoid committing document.writes and using global vars besides the dataLayer from GTM, but not everyone knows it.

Simple debugging steps for you:

1. Use the devtools drawer's network request blocker to block gtm from loading, see if the functional issues still happen.
2. If they still happen, your problem is not in GTM, but in the way you edited your templates/plugins. If they still happen, go to GTM and start disabling tags.
3. Start from pausing custom html tags, then switch to pausing anything that uses any custom javascript variables. While pausing, keep checking to find which one interferes with your functionality.