gtm-support / vue-gtm

Simple implementation of Google Tag Manager for Vue
https://www.npmjs.com/package/@gtm-support/vue-gtm
MIT License
192 stars 23 forks source link

Bug: The GTM Tag ID shows as "G-XXXXXXX", "UA-XXXXXX" or "AW-XXXXXXX" not GTM-XXXXXX #400

Closed dominik-j closed 6 months ago

dominik-j commented 6 months ago

Info

Tool Version
Plugin v2.2.0
Vue v3.3.4
Node v18.3.0
OS win

Input

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createGtm } from '@gtm-support/vue-gtm';
const app = createApp(App)
app.use(router)
app.use(
    createGtm({
        id: 'AW-XXXXXXXXX', // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
        queryParams: {
            // Add URL query string when loading gtm.js with GTM ID (required when using custom environments)
            // gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
            // gtm_preview: 'env-4',
            // gtm_cookies_win: 'x',
        },
        //source: 'https://customurl.com/gtm.js', // Add your own serverside GTM script
        defer: false, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
        compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
        nonce: '7646c7f45a', // Will add `nonce` to the script tag
        enabled: false, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
        debug: false, // Whether or not display console logs debugs (optional)
        loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
        vueRouter: router, // Pass the router instance to automatically sync with router (optional)
        //ignoredViews: ['homepage'], // Don't trigger events for specified router names (optional)
        trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
    }),
);

app.mount('#app')

Output or Error

The app and plugin are not working

Uncaught Error: 'AW-XXXXXXXXX' is not a valid GTM-ID (/^GTM-[0-9A-Z]+$/). Did you mean 'GTM-645401673'?

Expected Output

Working application and plugin

Additional Context

dominik-j commented 6 months ago

I am not sure if this is bug, because i realized thatt it is from Google Ads tag identificator.

Shinigami92 commented 6 months ago

I am not sure if this is bug, because i realized thatt it is from Google Ads tag identificator.

It's not a bug, it's by design vue-gtm is not usable with nothing else then Google Tag Manager