vue.jsnuxt.jsgoogle-tag-manager

Nuxt add GTM (noscript) to body tag on every page / route


I am trying to implement Google Tag Manager on a Nuxt app and am stuck on how to add the noscript tag to the app on every page / route inside the opening body tag. I tried creating a static script and adding the file through the nuxt config:

{ src: "/scripts/gtm.js", body: true }

which added the file to the body but was throwing errors due to the noscript tag and nested iframe from gtm. Not sure if there is a better way to inject the actual script directly inside the body

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

Solution

  • @Eike is correct there. Noscript is completely useless in 99.99% of GTM usage cases. It's used when a user has JS off, but unlike what you think, it won't make GTM work with no JS. In fact, only one tag can "fire" in that state and that would be a rarely used custom image tag. Most commonly used for firing pixels.

    Yes, noscript implies an iframe and if your app doesn't support them, well then no noscript for you. Really, Nuxt is a front-end rendering framework. Why would you have anything in your <noscript> other than asking the user to enable JS in order to see the site...