谁能帮我用基于功能的id实现Nuxt.js Google标记管理器？

Question

我安装了这段代码并将其添加到我的nuxt.config.js中，它运行得非常好。(链接到套餐)

  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'
       }
   }]]

编辑：我通过重写整个模块解决了我的问题。无法使用此模块，因为它只在构建时加载。我重写了模块并将代码移到nuxtServerInit中。

每个请求都会调用nuxtServerInit (模块只能一次性调用)。在请求中，我询问请求来自哪个域。根据域的不同，我在头和插件中添加了不同的google标记管理器id。

Answer 1

来自包文档：

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

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

编辑1

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

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

编辑2

就我理解您的问题而言，在配置中使用查询上下文是行不通的。

查看i18n中间件: request.locale ->存储->更新模块(路由器、虚拟设备、瞬间等) 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']
}