diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md index cb44776f46a60..41a52efefcd78 100644 --- 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 index 42f7247148619..ed04711f3d08f 100644 --- 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 index d041ecd29661b..6018806b664a8 100644 --- 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 index 7140dd3ab82f5..af04820e7d1eb 100644 --- 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 index 52001c7449b1f..ad8dbf95d274b 100644 --- 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, })}`, }} />