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

Question

我在添加到 dayaLayer 时遇到问题。对于gtm我用的是这个plugin，但是我不明白如何通过组件为它添加dataLayer。我的 nuxt.config fo 插件

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

我的组件

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

我试图在头部添加一个带有数据层的脚本，但没有任何结果。我的 Google Tag Assistant 插件找不到数据层。感谢您的帮助！

Answer 1

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

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

在您的 nuxt 页面中，您可以像这样使用挂载钩子将数据推送到数据层：

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

使用已安装的挂钩很重要，因为这个挂钩称为 wenn asycData() 或 fetch() 已完成并且应用程序已水化，因此 window 可用。

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

how to add gtm dataLayer to nuxt.js component?

google-tag-manager

vue.js

nuxt.js