vue.js - 如何将 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'}]
          `
        }
      ]
    };
  },

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

Answer 1

在您的 nuxt.config.js 中，您需要将此添加到 head目的:

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

比在您的 nuxt 页面中，您可以使用挂载的钩子(Hook)将数据推送到 dataLayer，如下所示:

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

使用挂载的钩子(Hook)很重要，因为这个钩子(Hook)被称为 wenn asycData() 或 fetch() 已经完成并且应用程序是水合的，因此窗口可用。