feat(gatsby-plugin-google-tagmanager): add option for selfHostedOrigin (#32733)

In the gatsby-plugin-google-tagmanager, this change supports variable selfHostedOrigin, defaulting to googletagmanager.com.

With the advent of Server Side Tagging, we have the ability to serve gtm.js from "self-hosted" tagging server.
See: developers.google.com/tag-manager/serverside
And: developers.google.com/tag-manager/serverside/send-data#update_the_gtmjs_source_domain

Co-authored-by: Ward Peeters <[email protected]>

Author: tackaberry

packages/gatsby-plugin-google-tagmanager/README.md

@@ -39,6 +39,8 @@ plugins: [
       routeChangeEventName: "YOUR_ROUTE_CHANGE_EVENT_NAME",
       // Defaults to false
       enableWebVitalsTracking: true,
+      // Defaults to https://www.googletagmanager.com
+      selfHostedOrigin: "YOUR_SELF_HOSTED_ORIGIN",
     },
   },
 ]

packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js

@@ -12,6 +12,7 @@ describe(`pluginOptionsSchema`, () => {
       dataLayerName: `YOUR_DATA_LAYER_NAME`,
       routeChangeEventName: `YOUR_ROUTE_CHANGE_EVENT_NAME`,
       enableWebVitalsTracking: true,
+      selfHostedOrigin: `YOUR_SELF_HOSTED_ORIGIN`,
     })
 
     expect(isValid).toEqual(true)

packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js

@@ -180,5 +180,53 @@ describe(`gatsby-plugin-google-tagmanager`, () => {
       expect(mocks.setHeadComponents.mock.calls[0].length).toBe(1)
       expect(headConfig.key).toBe(`plugin-google-tagmanager`)
     })
+
+    it(`should set selfHostedOrigin as googletagmanager.com 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`
+      )
+      expect(preBodyConfig.props.dangerouslySetInnerHTML.__html).toContain(
+        `https://www.googletagmanager.com/ns.html`
+      )
+    })
+
+    it(`should set selfHostedOrigin`, () => {
+      const selfHostedOrigin = `YOUR_SELF_HOSTED_ORIGIN`
+      const mocks = {
+        setHeadComponents: jest.fn(),
+        setPreBodyComponents: jest.fn(),
+      }
+      const pluginOptions = {
+        id: `123`,
+        includeInDevelopment: true,
+        selfHostedOrigin: selfHostedOrigin,
+      }
+
+      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(
+        `${selfHostedOrigin}/gtm.js`
+      )
+      expect(preBodyConfig.props.dangerouslySetInnerHTML.__html).toContain(
+        `${selfHostedOrigin}/ns.html`
+      )
+    })
   })
 })

packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js

@@ -41,4 +41,7 @@ exports.pluginOptionsSchema = ({ Joi }) =>
         `Name of the event that is triggered on every Gatsby route change.`
       ),
     enableWebVitalsTracking: Joi.boolean().default(false),
+    selfHostedOrigin: Joi.string()
+      .default(`https://www.googletagmanager.com`)
+      .description(`The origin where GTM is hosted.`),
   })

packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js

@@ -1,15 +1,20 @@
 import React from "react"
 import { oneLine, stripIndent } from "common-tags"
 
-const generateGTM = ({ id, environmentParamStr, dataLayerName }) => stripIndent`
+const generateGTM = ({
+  id,
+  environmentParamStr,
+  dataLayerName,
+  selfHostedOrigin,
+}) => 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=
-  'https://www.googletagmanager.com/gtm.js?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f);
+  '${selfHostedOrigin}/gtm.js?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f);
   })(window,document,'script','${dataLayerName}', '${id}');`
 
-const generateGTMIframe = ({ id, environmentParamStr }) =>
-  oneLine`<iframe src="https://www.googletagmanager.com/ns.html?id=${id}${environmentParamStr}" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe>`
+const generateGTMIframe = ({ id, environmentParamStr, selfHostedOrigin }) =>
+  oneLine`<iframe src="${selfHostedOrigin}/ns.html?id=${id}${environmentParamStr}" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe>`
 
 const generateDefaultDataLayer = (dataLayer, reporter, dataLayerName) => {
   let result = `window.${dataLayerName} = window.${dataLayerName} || [];`
@@ -41,6 +46,7 @@ exports.onRenderBody = (
     defaultDataLayer,
     dataLayerName = `dataLayer`,
     enableWebVitalsTracking = false,
+    selfHostedOrigin = `https://www.googletagmanager.com`,
   }
 ) => {
   if (process.env.NODE_ENV === `production` || includeInDevelopment) {
@@ -60,6 +66,8 @@ exports.onRenderBody = (
       )
     }
 
+    selfHostedOrigin = selfHostedOrigin.replace(/\/$/, ``)
+
     const inlineScripts = []
     if (enableWebVitalsTracking) {
       // web-vitals/polyfill (necessary for non chromium browsers)
@@ -83,7 +91,12 @@ exports.onRenderBody = (
         dangerouslySetInnerHTML={{
           __html: oneLine`
           ${defaultDataLayerCode}
-          ${generateGTM({ id, environmentParamStr, dataLayerName })}`,
+          ${generateGTM({
+            id,
+            environmentParamStr,
+            dataLayerName,
+            selfHostedOrigin,
+          })}`,
         }}
       />
     )
@@ -94,7 +107,11 @@ exports.onRenderBody = (
       <noscript
         key="plugin-google-tagmanager"
         dangerouslySetInnerHTML={{
-          __html: generateGTMIframe({ id, environmentParamStr }),
+          __html: generateGTMIframe({
+            id,
+            environmentParamStr,
+            selfHostedOrigin,
+          }),
         }}
       />,
     ])