Set GA tracking ID outside of Nuxt Config somehow?

It would be great if there was a way to add the tracking IDs into this module somehow. Currently I use nuxtServerInit to fetch them via Apollo add them into Vuex, but I can’t get them into Nuxt Config obviously.

Because the tracking codes are stored in our CMS, and we like clients to be able to change them without requiring a code change from us.

[drewbaker]

For future reference, this is what I ended up with and it seems to work great. The only thing I’ not sure on is @dohomi has defer = true on the script, but google has async = true so I went with that instead.

export default ({ store, app: { router, context } }, inject) => {
    // Remove any empty tracking codes
    const codes = store.state.siteMeta.gaTrackingCodes.filter(Boolean)

    // Abort if no codes
    if (!codes.length) {
        if (context.isDev) console.log('No Google Anlaytics tracking codes set')
        return
    }

    // Abort if in Dev mode, but inject dummy functions so $gtag events don't throw errors
    if (context.isDev) {
        inject('gtag', () => {})
        return
    }

    // Check if we already added script to head
    let gtagScript = document.getElementById('gtag')
    if (gtagScript) {
        return
    }

    // Add script tag to head
    let script = document.createElement('script')
    script.async = true
    script.id = 'gtag'
    script.src = `https://www.googletagmanager.com/gtag/js?id=${codes[0]}`
    document.head.appendChild(script)    

    // Include Google gtag code and inject it (so this.$gtag works in pages/components)
    window.dataLayer = window.dataLayer || []
    function gtag() {
        dataLayer.push(arguments)
    }
    inject('gtag', gtag)
    gtag('js', new Date())

    // Add tracking codes from Vuex store
    codes.forEach(code => {
        gtag('config', code, {
            send_page_view: false // necessary to avoid duplicated page track on first page load
        })

        // After each router transition, log page event to Google for each code
        router.afterEach(to => {
            gtag('config', code, { page_path: to.fullPath })
        })
    })
}

[dohomi]

I guess you are looking for something like this:

let script = document.createElement(`script`)
script.defer = true
script.onload = () => {
   // set a global var that your ga tag is loaded ?
}
script.src = `https://www.googletagmanager.com/gtag/js?id=${codes[0]}`
document.head.appendChild(script)

wrap this code into a function and just load it as long the script never been loaded before. I hope this leads you to the right way