CODEWITHSUNDEEP
vue.jsnuxt.jsgoogle-tag-manager
hendy0817
hendy0817

Reputation: 1079

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) -->

Upvotes: 3

Views: 7105

Answers (5)

Hosein Miri
Hosein Miri

Reputation: 1

it works for me:

noscript: [
      {
         children: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.GOOGLE_TAG_MANAGER_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
         type: 'text/html',
         body: true
      }
],

Upvotes: 0

Alukret
Alukret

Reputation: 71

To add GTM's <noscript> after <body> (in this example before first <div>) in Nuxt 2, you can edit nuxt.config.js, add there a <script> that will add nodes you need to the DOM.

It uses the same way as Google add another <script> tag to the <head>.

(Don't forget to edit GTM-XXXXXXX).

return {
  head: {
    script: [
      {
        type: 'text/javascript',
        body: true,
        innerHTML: '(function(d){'
          +'var b=d.getElementsByTagName("div")[0],'
              +'n=d.createElement("noscript"),'
              +'i=d.createElement("iframe"),'
              +'c1=d.createComment("Google Tag Manager (noscript)"),'
              +'c2=d.createComment("End Google Tag Manager (noscript)");'
          +'i.src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX";'
          +'i.style.height="0";'
          +'i.style.width="0";'
          +'i.style.display="none";'
          +'i.style.visibility="hidden";'
          +'n.appendChild(i);'
          +'b.parentNode.insertBefore(c1,b);'
          +'b.parentNode.insertBefore(n,b);'
          +'b.parentNode.insertBefore(c2,b);'
          +'})(document);'
      },
    ]
  }
}

Upvotes: 1

BNazaruk
BNazaruk

Reputation: 8081

@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...

Upvotes: 7

Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

This applies to Nuxt v2.

I added the noscript GTM code through layouts/default.vue. Doing that inserts it into body, albeit not completely at the end (which is probably fine). I had to use v-html to avoid hydration mismatch errors ("The client-side rendered virtual DOM tree is not matching server-rendered content.").

<template>
  <noscript v-html="iFrameCode" />
</template>

<script>
export default {
  data() {
    return {
      iFrameCode: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XYXYXYX" height="0" width="0" style="display: none; visibility: hidden" />',
    }
  },
}
</script>

What confused me a bit when testing the implementations was the following:

When I had JavaScript on, this is what I saw in Chrome Dev Tools:

Screenshot when JavaScript is on

But when I tried turning JavaScript off, the code seemed to run fine:

Screenshot when JavaScript is off

Upvotes: 0

Jacob Rex
Jacob Rex

Reputation: 41

The head property in your nuxt.config.js lets you define all the meta data and scripts that appear on each page. It looks like you can add a noscript section for what you need.

Upvotes: 4

Related Questions