Nuxt 将 GTM（无脚本）添加到每个页面/路线上的正文标记

问题描述 投票：0回答：5

我正在尝试在 Nuxt 应用程序上实现 Google 跟踪代码管理器，但我一直不知道如何在开始正文标记内的每个页面/路由上将 noscript 标记添加到应用程序中。我尝试创建一个静态脚本并通过 nuxt 配置添加文件：

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

将文件添加到正文，但由于 gtm 的 noscript 标记和嵌套 iframe 而引发错误。不确定是否有更好的方法将实际脚本直接注入体内

<!-- 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) -->
vue.js nuxt.js google-tag-manager
5个回答
7
投票

@Eike 是正确的。 Noscript 在 99.99% 的 GTM 使用案例中完全没用。当用户关闭 JS 时使用它，但与您想象的不同，它不会使 GTM 在没有 JS 的情况下工作。事实上，只有一个标签可以在该状态下“触发”，并且这将是很少使用的自定义图像标签。最常用于发射像素。

是的，noscript 意味着 iframe，如果您的应用程序不支持它们，那么 noscript 不适合您。确实，Nuxt 是一个前端渲染框架。除了要求用户启用 JS 才能查看该网站之外，为什么您的 

<noscript>
中还要有其他内容...

4
投票

nuxt.config.js中的

head属性
允许您定义每个页面上出现的所有元数据和脚本。看起来您可以根据需要添加noscript 部分。

1
投票

要在 Nuxt 2 中的 

<noscript>
之后添加 GTM 的 
<body>
（在此示例中，在第一个 
<div>
之前），您可以编辑 
nuxt.config.js
，添加一个 
<script>
，它将向 DOM 添加您需要的节点。

它使用与 Google 相同的方式添加另一个 

<script>
标签到 
<head>
。

（别忘了编辑

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);'
      },
    ]
  }
}
0
投票

这适用于 Nuxt v2。

我通过

noscript
添加了
layouts/default.vue
GTM代码。这样做会将其插入到 
body
中，尽管没有完全插入到最后（这可能没问题）。我必须使用 v-html 来避免水合不匹配错误（“客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。”）。

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

测试实现时让我有点困惑的是：

当我启用 JavaScript 时，这就是我在 Chrome 开发工具中看到的内容：

Screenshot when JavaScript is on

但是当我尝试关闭 JavaScript 时，代码似乎运行良好：

Screenshot when JavaScript is off

0
投票

它对我有用：

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
      }
],
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.