search

zadigetvoltaire / nuxt-gtm

Nuxt 3 module for Google Tag Manager
https://www.npmjs.com/package/@zadigetvoltaire/nuxt-gtm
MIT License
56 stars 3 forks source link

How to change GTM ID dynamically? #20

Open renansantos opened 6 months ago

renansantos commented 6 months ago

I need to use different GTM IDs acording to my routes. Is the only possible configuration via defineNuxtConfig or could i configure it using a composable, for example?

devonik commented 6 months ago

Hey, i had the same request. There are two options. I did the second for my case so not 100% sure the first will work but should.

  1. This package merge the nuxt config gtm: {} with the current nuxt public runtime config public.gtm: {} see in module.ts 

    const moduleOptions: ModuleOptions = defu(nuxt.options.runtimeConfig.public.gtm, options)

nuxt.options.runtimeConfig.public.gtm = moduleOptions

    You should can just set the id in runtime config instead of the module config. So in runtimeConfig.public.gtm.id and then set the environment variable NUXTPUBLIC{whatever} in your environment to overwrite the value

  2. Use the package @gtm-support/vue-gtm directly and create your own plugin so you can initialise the gtm instance in the plugin where you have control on the runtime config

renansantos commented 6 months ago

Thank you, @devonik ! I don't know yet wich will be better for my project. But i think both solutions will work. I am still to understand how lots of thinks work in Nuxt. Would you mind sharing your plugin so i can learn and create my own solution for my needs?