我正在尝试在 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) -->
@Eike 是正确的。 Noscript 在 99.99% 的 GTM 使用案例中完全没用。当用户关闭 JS 时使用它,但与您想象的不同,它不会使 GTM 在没有 JS 的情况下工作。事实上,只有一个标签可以在该状态下“触发”,并且这将是很少使用的自定义图像标签。最常用于发射像素。
是的,noscript 意味着 iframe,如果您的应用程序不支持它们,那么 noscript 不适合您。确实,Nuxt 是一个前端渲染框架。除了要求用户启用 JS 才能查看该网站之外,为什么您的
<noscript>
中还要有其他内容...
要在 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);'
},
]
}
}
这适用于 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 开发工具中看到的内容:
但是当我尝试关闭 JavaScript 时,代码似乎运行良好:
它对我有用:
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
}
],