N
Nuxt•4w ago
Han2

Gtag multiple tags

Hello, can someone please help me with nuxt config and GTM tags setup? I am using nuxt3 and laravel. I have multilingual (2) website with 3 env files (root,api,env). In my nuxt config, i am hardcoding gtm script, but i want to switch just the container id, when the page is switched to the second language. Should and i use the nuxt-gtag and how to setup the gtag id please
5 Replies
kapa.ai
kapa.ai•4w ago
Hi @Han2. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle multiple Google Tag Manager (GTM) container IDs for different languages in your Nuxt 3 application, I recommend using the Nuxt Scripts module, specifically the Google Tag Manager integration. This approach provides a more flexible and maintainable solution compared to hardcoding the script in your Nuxt config. Here's how you can set it up: 1. First, install the Nuxt Scripts module if you haven't already: 
npm install @nuxt/scripts
npm install @nuxt/scripts
2. In your nuxt.config.ts, add the Nuxt Scripts module and configure the Google Tag Manager: 
export default defineNuxtConfig({
  modules: ['@nuxt/scripts'],
  scripts: {
    registry: {
      googleTagManager: {
        id: process.env.NUXT_PUBLIC_GTM_ID_DEFAULT
      }
    }
  },
  runtimeConfig: {
    public: {
      gtmIdDefault: process.env.NUXT_PUBLIC_GTM_ID_DEFAULT,
      gtmIdSecondLanguage: process.env.NUXT_PUBLIC_GTM_ID_SECOND_LANGUAGE
    }
  }
})
export default defineNuxtConfig({
  modules: ['@nuxt/scripts'],
  scripts: {
    registry: {
      googleTagManager: {
        id: process.env.NUXT_PUBLIC_GTM_ID_DEFAULT
      }
    }
  },
  runtimeConfig: {
    public: {
      gtmIdDefault: process.env.NUXT_PUBLIC_GTM_ID_DEFAULT,
      gtmIdSecondLanguage: process.env.NUXT_PUBLIC_GTM_ID_SECOND_LANGUAGE
    }
  }
})
3. In your environment files, set the GTM container IDs: 
NUXT_PUBLIC_GTM_ID_DEFAULT=GTM-XXXXXXX
NUXT_PUBLIC_GTM_ID_SECOND_LANGUAGE=GTM-YYYYYYY
NUXT_PUBLIC_GTM_ID_DEFAULT=GTM-XXXXXXX
NUXT_PUBLIC_GTM_ID_SECOND_LANGUAGE=GTM-YYYYYYY
4. In your app, you can use the useScriptGoogleTagManager composable to dynamically change the GTM container ID based on the current language. Here's an example of how you might do this in a component or plugin: 
<script setup>
import { useI18n } from 'vue-i18n' // Assuming you're using vue-i18n for localization
import { useRuntimeConfig } from '#app'

const { locale } = useI18n()
const config = useRuntimeConfig()

const { proxy } = useScriptGoogleTagManager()

watch(locale, (newLocale) => {
  const gtmId = newLocale === 'secondLanguage' 
    ? config.public.gtmIdSecondLanguage 
    : config.public.gtmIdDefault

  proxy.dataLayer.push({ event: 'gtm.setContainerId', 'gtm.newContainerId': gtmId })
})
</script>
<script setup>
import { useI18n } from 'vue-i18n' // Assuming you're using vue-i18n for localization
import { useRuntimeConfig } from '#app'

const { locale } = useI18n()
const config = useRuntimeConfig()

const { proxy } = useScriptGoogleTagManager()

watch(locale, (newLocale) => {
  const gtmId = newLocale === 'secondLanguage' 
    ? config.public.gtmIdSecondLanguage 
    : config.public.gtmIdDefault

  proxy.dataLayer.push({ event: 'gtm.setContainerId', 'gtm.newContainerId': gtmId })
})
</script>
This setup allows you to: 1. Use different GTM container IDs for different languages. 2. Keep your GTM IDs in environment variables for better security and easier management across environments. 3. Dynamically change the GTM container ID when the language changes. The Nuxt Scripts module provides a more robust and type-safe way to handle Google Tag Manager compared to the nuxt-gtag package. It also offers better performance optimizations and is officially maintained by the Nuxt team. For more detailed information on using Google Tag Manager with Nuxt Scripts, you can refer to the Google Tag Manager documentation in Nuxt Scripts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@796764399775121419> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Han2
Han2OP•4w ago
@kapa.ai my typescript's plugin error message - Cannot find name 'config'.ts-plugin(2304)
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you're encountering, it seems you're facing a TypeScript issue related to the config variable not being recognized. This is likely occurring in a Nuxt plugin. Let's address this issue using the information from the knowledge sources provided. The error "Cannot find name 'config'.ts-plugin(2304)" typically occurs when TypeScript can't find a declaration for the config variable. In the context of Nuxt 3, this is often related to accessing the runtime config. To resolve this issue, you should use the useRuntimeConfig() composable to access the runtime configuration in your Nuxt 3 plugin. Here's how you can do it: 
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  console.log('API base URL:', config.public.apiBase)
});
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  console.log('API base URL:', config.public.apiBase)
});
This approach is described in the Runtime Config documentation. A few important points to note: 1. Make sure you're using defineNuxtPlugin to define your plugin. This function is globally available in Nuxt 3 without the need for an import. 2. The useRuntimeConfig() composable should be called inside the plugin function, not outside of it. 3. Remember that on the client-side, only keys in runtimeConfig.public are available, while on the server-side, the entire runtime config is accessible. 4. If you need to type your runtime config for better TypeScript support, you can do so by extending the RuntimeConfig interface as described in the Typing Runtime Config section: 
declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// It is always important to ensure you import/export something when augmenting a type
export {}
declare module 'nuxt/schema' {
  interface RuntimeConfig {
    apiSecret: string
  }
  interface PublicRuntimeConfig {
    apiBase: string
  }
}
// It is always important to ensure you import/export something when augmenting a type
export {}
By following these steps, you should be able to resolve the TypeScript error and properly access your runtime configuration within your Nuxt 3 plugin. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@796764399775121419> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?