Can anyone help implementing Nuxt.js Google Tag Manager with function based id

问题

I installed and add this code to my nuxt.config.js and it works perfectly fine. (Link to package)

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

Now I am trying to implement instead of a static ID a function which will return an ID.

I tried to add this lines into my nuxt.config. js but it is not working. Obviously I have to put it somewhere else or so...

This is what I tried

nuxt.config.js

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

export default {
...

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

What would be the correct way implementing this?

I would like to do something like that at the end.

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: I solved my problem by rewriting the whole module. It is not possible to use this Module because it is loaded only on build time. I rewrote the module and moved the code into nuxtServerInit.

nuxtServerInit is called on each request (modules only onetime). In the request I asked from which domain the request is coming. Depending on the domain I add different google-tag-manager id's to the head and the plugin.

回答1:

From package docs:

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

You can use process.env.NODE_ENV inside function which will return an ID

Edit 1

To put the gtm id, depending on req.headers.referer you need to provide context to the function returning the id. This can be done in middleware

See how it works here https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/plugin.js

Edit 2

As far as I understand your question, it will not work to have a query context in the config.

Look at i18n middleware: request.locale - > store - > update modules (router, vuetify, moment, etc.) https://nuxtjs.org/examples/i18n/

~/middleware/gtm.js

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

don't forget to add middleware to the page

page.vue

export default {
  middleware: ['gtm']
}

来源：https://stackoverflow.com/questions/59236239/can-anyone-help-implementing-nuxt-js-google-tag-manager-with-function-based-id

标签

google-tag-manager

nuxt.js