feat(gatsby-plugin-google-tagmanager): add self hosted path option (#…

…38731) * Add initial commit, update README.md with new attribute * Copy over files from PR with ID 34287 * fix lint --------- Co-authored-by: ok <tokoiv@ttu.ee> Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
gatsbyjs · Dec 4, 2023 · 8b9ee3f · 8b9ee3f
1 parent 0f4e4df
commit 8b9ee3f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 1 deletion.
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -41,6 +41,8 @@ plugins: [
       enableWebVitalsTracking: true,
       // Defaults to https://www.googletagmanager.com
       selfHostedOrigin: "YOUR_SELF_HOSTED_ORIGIN",
+      // Defaults to gtm.js
+      selfHostedPath: "YOUR_SELF_HOSTED_PATH",
     },
   },
 ]

diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js
@@ -15,6 +15,7 @@ describe(`pluginOptionsSchema`, () => {
         routeChangeEventName: `YOUR_ROUTE_CHANGE_EVENT_NAME`,
         enableWebVitalsTracking: true,
         selfHostedOrigin: `YOUR_SELF_HOSTED_ORIGIN`,
+        selfHostedPath: `YOUR_SELF_HOSTED_PATH`,
       }
     )
 

diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
@@ -228,5 +228,46 @@ describe(`gatsby-plugin-google-tagmanager`, () => {
         `${selfHostedOrigin}/ns.html`
       )
     })
+    it(`should set selfHostedPath as gtm.js by default`, () => {
+      const mocks = {
+        setHeadComponents: jest.fn(),
+        setPreBodyComponents: jest.fn(),
+      }
+      const pluginOptions = {
+        id: `123`,
+        includeInDevelopment: true,
+      }
+
+      onRenderBody(mocks, pluginOptions)
+      const [headConfig] = mocks.setHeadComponents.mock.calls[0][0]
+      const [preBodyConfig] = mocks.setPreBodyComponents.mock.calls[0][0]
+
+      // eslint-disable-next-line no-useless-escape
+      expect(headConfig.props.dangerouslySetInnerHTML.__html).toContain(
+        `https://www.googletagmanager.com/gtm.js`
+      )
+    })
+
+    it(`should set selfHostedPath`, () => {
+      const selfHostedPath = `YOUR_SELF_HOSTED_PATH`
+      const mocks = {
+        setHeadComponents: jest.fn(),
+        setPreBodyComponents: jest.fn(),
+      }
+      const pluginOptions = {
+        id: `123`,
+        includeInDevelopment: true,
+        selfHostedPath: selfHostedPath,
+      }
+
+      onRenderBody(mocks, pluginOptions)
+      const [headConfig] = mocks.setHeadComponents.mock.calls[0][0]
+      const [preBodyConfig] = mocks.setPreBodyComponents.mock.calls[0][0]
+
+      // eslint-disable-next-line no-useless-escape
+      expect(headConfig.props.dangerouslySetInnerHTML.__html).toContain(
+        `https://www.googletagmanager.com/${selfHostedPath}`
+      )
+    })
   })
 })
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
@@ -44,4 +44,7 @@ exports.pluginOptionsSchema = ({ Joi }) =>
     selfHostedOrigin: Joi.string()
       .default(`https://www.googletagmanager.com`)
       .description(`The origin where GTM is hosted.`),
+    selfHostedPath: Joi.string()
+      .default(`gtm.js`)
+      .description(`The path where GTM is hosted.`),
   })
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
@@ -6,11 +6,12 @@ const generateGTM = ({
   environmentParamStr,
   dataLayerName,
   selfHostedOrigin,
+  selfHostedPath,
 }) => stripIndent`
   (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=
-  '${selfHostedOrigin}/gtm.js?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f);
+  '${selfHostedOrigin}/${selfHostedPath}?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f);
   })(window,document,'script','${dataLayerName}', '${id}');`
 
 const generateGTMIframe = ({ id, environmentParamStr, selfHostedOrigin }) =>
@@ -47,6 +48,7 @@ exports.onRenderBody = (
     dataLayerName = `dataLayer`,
     enableWebVitalsTracking = false,
     selfHostedOrigin = `https://www.googletagmanager.com`,
+    selfHostedPath = `gtm.js`,
   }
 ) => {
   if (process.env.NODE_ENV === `production` || includeInDevelopment) {
@@ -96,6 +98,7 @@ exports.onRenderBody = (
             environmentParamStr,
             dataLayerName,
             selfHostedOrigin,
+            selfHostedPath,
           })}`,
         }}
       />