GoogleTagManager: custom gtm.js source

[endorfin]

Describe the feature

In one of our client projects we use a self hosted GoogleTagManager Instance + Matomo (GDPR).
So we need the possibility to specify a custom source for the gtm.js script.

  scripts: {
    registry: {
      googleTagManager: {
        url: 'https://analytics.domain-xyz.de/gtm.js',
        id: 'GTM-123456'
      }
    }
  },

Additional information

just a quick idea for implementation ... tpc/utils.ts:98

src: withQuery('${mainScript.params?.url || mainScript.url}', {${mainScript.params?.filter(p => p !== 'url').map(p => `${p}: options?.${p}`)}})

[harlan-zw]

Hi, the best way to do this is to just provide the entire src yourself.

  scripts: {
    registry: {
      googleTagManager: {
        id: 'GTM-123456',
        scriptInput: { src: 'https://analytics.domain-xyz.de/gtm.js?id=GTM-123456' }
      }
    }
  },

The types don't fully support this but they will in the next version.

[endorfin]

The source replacement works, but fails with CORS header 'Access-Control-Allow-Origin' missing

[harlan-zw]

You either need to serve the CORS headers from your domain or disable the crossorigin defaults, see https://unhead.unjs.io/usage/composables/use-script#referrerpolicy-and-crossorigin

scripts: {
    registry: {
      googleTagManager: {
        id: 'GTM-123456',
        scriptInput: {
           src: 'https://analytics.domain-xyz.de/gtm.js?id=GTM-123456',
           crossorigin: false,
        }
      }
    }
  },