CODEWITHSUNDEEP
javascriptreactjsgoogle-tag-managernext.jsnetlify
aaRitsch
aaRitsch

Reputation: 83

Google Tag Manager noscript tag appears as string, why? (using react-gtm-module)

I use react-gtm-module to place the Google Tag Manager Tags in a react/next.js app hosted with netlify.

The gtm script tag in the head renders perfectly. But the noscript tag in the body is rendered falsely with the iframe as string:

<body>
  <noscript>
    "
          <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX&gtm_auth=&gtm_preview=&gtm_cookies_win=x"
            height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>"
  </noscript>
  ...
</body>

react-gtm-module code:

import TagManager from 'react-gtm-module'
...
componentDidMount(){
const tagManagerArgs = { gtmId: 'GTM-NCGQVKQ' }
TagManager.initialize(tagManagerArgs);
}

Has anybody an idea what might be the cause?

Thanks a lot!

Upvotes: 4

Views: 9065

Answers (2)

remeus
remeus

Reputation: 2424

If your app is only on the client side (no server-side rendering involved), then the noscript part is useless and will never be triggered, since it is loaded using javascript and it is only meant in case javascript is disabled.

From the package's README:

Disabling javascript in the browser can prevent the correct operation of this library if React is only being rendered on the client side.

Upvotes: 1

Thomas Altmann
Thomas Altmann

Reputation: 1744

When scripting is enabled, the noscript element will only contain plain text. Try disabling JS in your browser, then the text in the noscript tag should be parsed as HTML

https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element

Upvotes: 3

Related Questions