Nuxt: Внутри плагина, как добавить динамический тег сценария к голове?

Question

Я пытаюсь создать плагин Google Analytics для Nuxt, который будет извлекать идентификаторы отслеживания из CMS. Я действительно близок, я думаю.

У меня загрузка файла плагина только на стороне клиента. Плагин загружается из nuxt.config.js через массив plugins:[{ src: '~/plugins/google-gtag.js', mode: 'client' }].

Отсюда основная проблема заключается в том, что скрипту gtag требуется код UA в своем URL, поэтому я не могу просто добавить его в обычный объект скрипта в nuxt.config.js. Мне нужно получить эти коды UA из магазина (это гидратированная форма nuxtServerInit.

Так что я использую head.script.push в плагине, чтобы добавить скрипт gtag с кодом UA в URL. Но это не приводит к добавлению скрипта при первой загрузке страницы, но делает это для всех последующих переходов страницы. Ясно, что я слишком поздно запускаю head.script.push при рендеринге страницы.

Но я не знаю, как еще получить идентификаторы отслеживания, а затем добавить сценарии к голове.

// plugins/google.gtag.client.js with "mode": "client
export default ({ store, app: { head, router, context } }, inject) => {
    // Remove any empty tracking codes
    const codes = store.state.siteMeta.gaTrackingCodes.filter(Boolean)

    // Add script tag to head
    head.script.push({
        src: `https://www.googletagmanager.com/gtag/js?id=${codes[0]}`,
        async: true
    })
    console.log('added 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
        })

        console.log('installed code', code)

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