任何人都可以帮助使用基于函数的 id 实现 Nuxt.js Google 跟踪代码管理器

我安装了这段代码并将其添加到我的 nuxt.config.js 中，它工作得很好。 （链接到package https://github.com/nuxt-community/modules/tree/master/packages/google-tag-manager)

  modules: [
   ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }],
  ]

现在我尝试实现一个返回 ID 的函数，而不是静态 ID。

我尝试将此行添加到我的 nuxt.config 中。 js 但它不起作用。显然我必须把它放在其他地方或者其他地方......

这就是我尝试过的

nuxt.config.js

const code = '1234567'
id: () => {
  return 'GTM-' + code
}

export default {
...

modules: [
   ['@nuxtjs/google-tag-manager', { id: id }],
  ]
...
}

实施这个的正确方法是什么？

我想在最后做类似的事情。

modules: [
   ['@nuxtjs/google-tag-manager', { 
       id: ({ req }) => {
         if (req.headers.referer == "exmple.com")
           return 'GTM-156'
         if (req.headers.referer == "exmple.it")
           return 'GTM-24424'
         if (req.headers.referer == "exmple.es")
           return 'GTM-2424'
       }
   }]]

EDIT:我通过重写整个模块解决了我的问题。无法使用此模块，因为它仅在构建时加载。我重写了该模块并将代码移至 nuxtServerInit 中。

nuxtServerInit 在每个请求时被调用（模块仅一次）。在请求中，我询问请求来自哪个域。根据域的不同，我将不同的 google-tag-manager id 添加到头部和插件中。

来自包文档：

modules: [
   ['@nuxtjs/google-tag-manager', { 
       id: () => {
          return axios.get('http://example.com/')
            .then(({ data }) => {
              return data.gtm_id
            })
       }
   }]]

您可以使用process.env.NODE_ENV内部函数将返回一个 ID

Edit 1

要放置 gtm id，根据 req.headers.referer，您需要为返回 id 的函数提供上下文。这可以在中间件中完成

在这里查看它是如何工作的https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/plugin.js https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/plugin.js

Edit 2

据我了解您的问题，在配置中包含查询上下文是行不通的。

看i18n中间件：request.locale -> store -> 更新模块（router、vuetify、moment等）https://nuxtjs.org/examples/i18n/ https://nuxtjs.org/examples/i18n/

〜/中间件/gtm.js

export default function ({ app, store }) {
  // app.$gtm contains id, you can set another from store
}

不要忘记向页面添加中间件

page.vue

export default {
  middleware: ['gtm']
}