nuxt / scripts

Third-Party Scripts Meets Nuxt Developer Experience.
https://scripts.nuxt.com
MIT License
328 stars 45 forks source link

GoogleTagManager: Custom gtm.js source loads default source #249

Closed Mokkapps closed 2 months ago

Mokkapps commented 2 months ago

🐛 The bug

We're defining a custom gtm.js source URL like this in our nuxt.config.ts:

  scripts: {
    registry: {
      // @ts-expect-error - crossorigin is not typed as boolean
      googleTagManager: {
        scriptInput: {
          crossorigin: false,
          src: 'https://custom-domain.com/gtm.js?id=GTM-12345',
        },
      },
    },
  },

It works but in the network tab we can see that https://www.googletagmanager.com/gtm.js is tried to be loaded before the actual custom source is fetched with success.

The first call fails:

image

Unfortunately, I cannot provide a reproduction because the custom source is from my client. If you have any test URL for me, I'm happy to create a reproduction.

🛠ī¸ To reproduce

-

🌈 Expected behavior

Only the custom source is loaded

ℹī¸ Additional context

No response

harlan-zw commented 2 months ago

Hi, it's not clear what the blocker is for not creating a reproduction? I made one here and I can't replicate this behavior https://stackblitz.com/edit/nuxt-starter-ntkmbz?file=nuxt.config.ts

You may be trying to access GTM in your app somewhere using useScriptGoogleTagManager, but because you've modified the src you'll instead be creating a new instance (as we support multiple gtm container ids).

If this is the case then you can access the instance on useNuxtApp().$scripts or you should just use the composable.

Mokkapps commented 2 months ago

Hi, it's not clear what the blocker is for not creating a reproduction? I made one here and I can't replicate this behavior https://stackblitz.com/edit/nuxt-starter-ntkmbz?file=nuxt.config.ts

You may be trying to access GTM in your app somewhere using useScriptGoogleTagManager, but because you've modified the src you'll instead be creating a new instance (as we support multiple gtm container ids).

If this is the case then you can access the instance on useNuxtApp().$scripts or you should just use the composable.

So I failed twice: at creating the reproduction and using the composable in the right way.... 🙈

Indeed, we used useScriptGoogleTagManager which caused the request.

Thanks for your quick answer and the solution 🎉🚀👍đŸģđŸ’ĒđŸģ

harlan-zw commented 2 months ago

No problem, good to know what is tripping people up.

I think you should have been getting a warning in dev as you would have been creating the useScriptGoogleTagManager instance without an id :thinking:

Mokkapps commented 2 months ago

No problem, good to know what is tripping people up.

I think you should have been getting a warning in dev as you would have been creating the useScriptGoogleTagManager instance without an id :thinking:

Yeah something like this would have been helpful