Two or more GTM containers

[konstantin-karlovich-unbiased-co-uk]

@harlan-zw hi!

I may have missed it somewhere, although I've gone through the documentation completely. Can you please tell me if it is possible to add two or more GTM containers? If so, how do I use them?

In brief - I need to use different gtm-id on different url's. And the GTM script should be loaded immediately, by default

[harlan-zw]

@konstantin-karlovich-unbiased-co-uk Can you provide some more technical guidelines around how you'd normally implement this? Do you rename the dataLayer object?

Nuxt Scripts supports loading the same script multiple times by modifying the key, however, it does not support modifying the dataLayer window key so you'd run into both scripts sharing the same data object.

const { dataLayer, $script } = useScriptGoogleTagManager({
  id: 'G-TR58L0EF8P',
})

const { dataLayer: dataLayer2, $script: $script2 } = useScriptGoogleTagManager({
  key: 'gtm2',
  id: 'G-1234567890',
})

@huang-julien, @flashdesignory do you have any thoughts on being able to set the dataLayer key? It seems quite difficult to do with the TPC templating.

[flashdesignory]

Would it help if we'd accept a dataLayer name, in addition to the id here? https://github.com/GoogleChromeLabs/third-party-capital/blob/main/src/third-parties/google-tag-manager/data.json#L15

[harlan-zw]

Seems reasonable if we're doing that for id currently

[konstantin-karlovich-unbiased-co-uk]

@harlan-zw In my application on a particular group of URLs, say ‘/gtm2’, I need to apply the gtm2 container. On the rest of the site, the default container. One of the conditions is that the right container is loaded when loading a site, page, etc. Because gtm connects quite a few other metrics, analytics, etc.

const { dataLayer, $script } = useScriptGoogleTagManager({
  id: 'G-TR58L0EF8P',
})

const { dataLayer: dataLayer2, $script: $script2 } = useScriptGoogleTagManager({
  key: 'gtm2',
  id: 'G-1234567890',
})

I did this example, but the container was connected only during the call of the tracking method, which is not quite suitable for me

[harlan-zw]

I did this example, but the container was connected only during the call of the tracking method, which is not quite suitable for me

I'm not too sure what you mean, both scripts will start loading by default once Nuxt is partially hydrated. GTM is designed to handle this as events are batched to be sent one the script is loaded and the page is idle.

[flashdesignory]

@harlan-zw - something like this should work: https://github.com/GoogleChromeLabs/third-party-capital/pull/52

[konstantin-karlovich-unbiased-co-uk]

I'm not too sure what you mean, both scripts will start loading by default once Nuxt is partially hydrated. GTM is designed to handle this as events are batched to be sent one the script is loaded and the page is idle.

When the script is connected in the way you mentioned, and the dataLayer event has been triggered in any component that is hidden (such as a dropdown menu), the script will not be loaded when the page loads. It will load when the component is visible

For details: I'm using the VMenu component from Vuetify, the dataLayer method is set on the links in these menus

[harlan-zw]

You should use the globals if you want to load the script immediately.

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAnalytics: {
        id: 'YOUR_ID'
      }
    }
  }
})

Then in your component, you should be able to do

const { gtag} = useNuxtApp().$scripts.googleAnalytics
// gtag(...)

We'll improve the docs around this.

The issue as raised was about allowing you to embed multiple GTM / GA containers without conflict so we'll close this once https://github.com/nuxt/scripts/pull/163 is available in a release.