Is it possible to load self-hosted GoogleTagManager script?

[IdreesSamadi]

Some of the other analytics Umami and Matomo allow you to load the self-hosted versions. Is this possible for Google Tag Manager?

I am self-hosting the Google Tag Manager, and want to provide the URL to useScriptGoogleTagManager. Something like the following:

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
  scriptInput: {
     src: 'https://example.com/gtm.js?id=${gtmID}',
  },
})

[harlan-zw]

You can just provide the { bundle: true } and it should download the script for you to self host.

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
}, {
  bundle: true
})

Checkout the docs here https://scripts.nuxt.com/docs/guides/bundling

[Quineone]

hi @harlan-zw , if I understand correctly, the requirement of @IdreesSamadi is, we want an option to override the script src here

src: withQuery('https://www.googletagmanager.com/gtm.js', {
   ...
}),

so use own self-hosted script 'https://example.com/gtm.js' instead of 'https://www.googletagmanager.com/gtm.js'
I have the same requirement, too.

See other package did:

import { createApp } from 'vue';
import { createGtm } from '@gtm-support/vue-gtm';

const app = createApp(App);

app.use(
  createGtm({
    ...
    source: 'https://customurl.com/gtm.js', // Add your own serverside GTM script
    ...
  })
)

[harlan-zw]

Hi, you can override the src completely by doing the following:

const ga = useScriptGoogleTagManager({
  id: '...',
  scriptInput: {
    src: 'https://customurl.com/gtm.js',
  },
})

It may break the bundling though (if enabled), I can't remember if it's handled.

[Quineone]

@harlan-zw, yes, we can override the src by doing that, but it also lost the query params.
So what I want is add extra option (maybe named source), then the code can be

src: withQuery(opts.source || 'https://www.googletagmanager.com/gtm.js', {
    id: opts.id,
    l: opts.l,
    gtm_auth: opts.auth,
    gtm_preview: opts.preview,
    gtm_cookies_win: opts.cookiesWin ? 'x' : undefined,
    gtm_debug: opts.debug ? 'x' : undefined,
    gtm_npa: opts.npa ? '1' : undefined,
    gtm_data_layer: opts.dataLayer,
    gtm_env: opts.envName,
    gtm_auth_referrer_policy: opts.authReferrerPolicy,
}),

ok for you? I think this PR is what we wish: https://github.com/nuxt/scripts/pull/408/files

[harlan-zw]

You can override the source via scriptInput.src — the registry will preserve the GTM query params and merge them onto your custom URL:

useScriptGoogleTagManager(
  { id: 'GTM-XXX' },
  { scriptInput: { src: 'https://example.com/gtm.js' } }
)

The proxy + dataLayer work the same way. Closing — open an issue if a specific case isn't covered 🙏