如何将 gtm dataLayer 添加到 nuxt.js 组件？

Question

我在添加到 dayaLayer 时遇到问题。对于 gtm，我使用这个插件，但我不\xe2\x80\x99不明白如何通过组件为其添加 dataLayer。\n我的 nuxt.config fo 插件

\n\n

modules: [\n    [\'@nuxtjs/google-tag-manager\', {\n      id: \'GTM-xxxxxxxxxx\',\n      pageViewEventName: \'nuxtRoute\',\n      pageTracking: true,\n      layer: \'dataLayer\'\n    }]\n  ]\n

\n\n

我的组件

\n\n

head() {\n    return {\n      title: this.seo.title_meta,\n      meta: [\n        // hid is used as unique identifier. Do not use `vmid` for it as it will not work\n        { hid: \'google-site-verification\', name: \'google-site-verification\', content: \'test\' },\n        { hid: \'description\', name: \'description\', content: this.seo.description_meta }\n      ],\n      __dangerouslyDisableSanitizers: [\'script\'],\n      script: [\n        {\n          innerHTML: JSON.stringify({\n            \'@context\': \'http://schema.org\',\n            \'@type\': \'Organization\',\n            name: \'test\',\n            url: \'https://test.co\',\n            sameAs: this.linkMeta,\n            description: `${this.seo.description_meta}`\n          }),\n          type: \'application/ld+json\'\n        },\n        {\n          innerHTML: `\n            window.dataLayer = window.dataLayer || [];\n            window.dataLayer = [{ \'pageType\': \'Main\'}]\n          `\n        }\n      ]\n    };\n  },\n

\n\n

我尝试将带有 dataLayer 的脚本添加到头部，但没有任何结果。我的 Google Tag Assistant 插件找不到 dataLayer。谢谢你的帮助！

\n

Answer 1

在 nuxt.config.js 中，您需要将其添加到head对象中：

script: [
  {
    hid: 'gtm',
    innerHTML: `window.dataLayer = window.dataLayer || [];`,
    type: 'text/javascript'
  }
]

在你的 nuxt 页面中，你可以使用安装的钩子将数据推送到 dataLayer，如下所示：

mounted: {
    window.dataLayer.push({variable: value, someOtherVar: anotherValue})
}

使用已安装的钩子非常重要，因为这个钩子称为 wenn asycData() 或 fetch() 已完成并且应用程序已完成水合，因此窗口可用。