如何在Nuxt应用所有页面的body标签内添加Google Tag Manager的noscript标签

云上老周

2026-9-24

方案1：针对Nuxt 3

两种实现方式任选其一即可：

直接在app.vue模板顶部插入代码

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

该方式插入的noscript会自动渲染在所有页面body标签的最开头位置，符合GTM的接入要求。

在nuxt.config.ts中全局配置注入

export default defineNuxtConfig({
  app: {
    head: {
      body: [
        {
          tag: 'noscript',
          innerHTML: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-4BXKY65" height="0" width="0" style="display:none;visibility:hidden"></iframe>',
          position: 'start'
        }
      ]
    }
  }
})

方案2：针对Nuxt 2

在nuxt.config.js中添加如下配置：

export default {
  head: {
    noscript: [
      {
        innerHTML: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-4BXKY65" height="0" width="0" style="display:none;visibility:hidden"></iframe>',
        body: true
      }
    ],
    // 禁用HTML转义，避免iframe标签被解析为纯文本
    __dangerouslyDisableSanitizers: ['noscript']
  }
}

也可以直接在全局默认布局layouts/default.vue的模板最顶部插入noscript代码，所有使用该布局的页面都会自动加载。