nuxt-community / gtm-module

Google Tag Manager Module for Nuxt.js
MIT License
327 stars 70 forks source link

Runtime config: Cannot read property 'find' of undefined #141

Open jeanmatthieud opened 2 years ago

jeanmatthieud commented 2 years ago

When I'm using the runtimeConfig property, I get an error on server.js (without callstack):

Cannot read property 'find' of undefined

Config:

gtm: {
  id: "GTM-XXXXXXX",
  enabled: true,
  debug: true,
},
publicRuntimeConfig: {
  gtm: {
    id: process.env.GTM_ID,
  }
}

Nuxt: 2.15.8 Gtm Module: 2.4.0

zBelguithAccor commented 2 years ago

any update ?

Quineone commented 2 years ago

same problem

Quineone commented 2 years ago

hi @jeanmatthieud , the workaround work for me:

publicRuntimeConfig: {
  GTM_ID: process.env.GTM_ID,
},

gtm: {},

plugins: [
  '~/plugins/gtm.client.ts', // should be loaded in client only,
],

then in the gtm.client.ts

export default function ({ $gtm, $config }) {
  $gtm.init($config.GOOGLE_TAG_MANAGER_ID)
}
Vicula commented 1 year ago

Any update on this?

papasoft23 commented 1 year ago

Maybe this will save someones time ;) I could not manage to make this work with plugin and 2 containers, as described in docs, but moving definition to nodules instead of buildModules made it work for me with 1 container:

modules: [
      [
        '@nuxtjs/gtm',
        {
          enabled: !!GOOGLE_TAG_MANAGER_ID,
          id: GOOGLE_TAG_MANAGER_ID,
          pageTracking: false, // handled by useGoogleTagManager composable
          pageViewEventName: 'pageview',
          debug: !isProd // check if not production env to be save during developement
        }
      ]
],

Also not the best solution, but worked for multiple containers, added plugin to insert js in head and noscript in body:

export default function() {
    // Add additional container script tag to head
    let script = document.createElement("script")
    script.async = true
    script.src = "https://www.googletagmanager.com/gtm.js?id=" + process.env.GOOGLE_TAG_MANAGER_ID_EXTRA
    document.head.appendChild(script)

    // Add additional container <noscrip> tag to body
    let noscript = document.createElement("div")
    noscript.dataset.nHead = "ssr"
    noscript.dataset.pbody = "true"
    noscript.innerHTML = '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id='+ process.env.GOOGLE_TAG_MANAGER_ID_EXTRA + '" height="0" width="0" style="display:none;visibility:hidden" title="gtm"></iframe></noscript>'
    document.body.prepend(noscript)
}