How to pass GTM tags in gatsby-plugin-google-tagmanager plugin conditionally in the gatsby-config file ?

[yashvekaria]

I am using a gatsby-plugin-google-tagmanager plugin for analytics of my site, but later I create another site from the same code base (differentiate its branding based on specific routes), for that, I need to add another GTM tag into my plugin. Now I believe I cannot add any conditions in the gatsby-config file (Please correct me if I am wrong), then How do handle this case ? Do I need to add insert script manually using the gatsby-SSR function or is there any other way to resolve it?

 {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: config.gtm,
        includeInDevelopment: false,
        defaultDataLayer: { platform: "gatsby" },
        enableWebVitalsTracking: true,
      },
    },

I am passing gtm tag as per my build environment via process.env

[flikteoh]

[yashvekaria]

I need to add them conditionally. But as it was not possible from gatsby-config.js file.

But I had added them conditionally in from gatsby-ssr.js file.

By using setPreBodyComponents API from Gatsby SSR.

setPreBodyComponents([
    <noscript
      key="google-tagmanager-body"
      dangerouslySetInnerHTML={{
        __html: condition ? gtm1 : gtm2,
      }}
    />,
  ])

and google tag manager script

const gtm1 = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '${config.gtm.site1}')`