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 1c451309fe16c..92e0fe323e051 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js +++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js @@ -30,6 +30,7 @@ describe(`gatsby-plugin-google-tagmanager`, () => { setPreBodyComponents: jest.fn(), } const pluginOptions = { + id: `123`, includeInDevelopment: true, } @@ -51,7 +52,10 @@ describe(`gatsby-plugin-google-tagmanager`, () => { } const pluginOptions = { includeInDevelopment: true, - defaultDataLayer: { pageCategory: `home` }, + defaultDataLayer: { + type: `object`, + value: { pageCategory: `home` }, + }, } onRenderBody(mocks, pluginOptions) @@ -69,12 +73,17 @@ describe(`gatsby-plugin-google-tagmanager`, () => { } const pluginOptions = { includeInDevelopment: true, - defaultDataLayer: function() { - return { pageCategory: window.pageType } + defaultDataLayer: { + type: `function`, + value: function() { + return { pageCategory: window.pageType } + }.toString(), }, } - const datalayerFuncAsString = oneLine`${pluginOptions.defaultDataLayer.toString()}` + const datalayerFuncAsString = oneLine`${ + pluginOptions.defaultDataLayer.value + }` onRenderBody(mocks, pluginOptions) const [headConfig] = mocks.setHeadComponents.mock.calls[0][0] @@ -96,7 +105,10 @@ describe(`gatsby-plugin-google-tagmanager`, () => { } let pluginOptions = { includeInDevelopment: true, - defaultDataLayer: 5, + defaultDataLayer: { + type: `number`, + value: 5, + }, } expect(() => onRenderBody(mocks, pluginOptions)).toThrow() @@ -104,7 +116,10 @@ describe(`gatsby-plugin-google-tagmanager`, () => { class Test {} pluginOptions = { includeInDevelopment: true, - defaultDataLayer: new Test(), + defaultDataLayer: { + type: `object`, + value: new Test(), + }, } expect(() => onRenderBody(mocks, pluginOptions)).toThrow() diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js new file mode 100644 index 0000000000000..d167c44bb02eb --- /dev/null +++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js @@ -0,0 +1,13 @@ +/** @type {import('gatsby').GatsbyNode["onPreInit"]} */ +exports.onPreInit = (args, options) => { + if (options.defaultDataLayer) { + options.defaultDataLayer = { + type: typeof options.defaultDataLayer, + value: options.defaultDataLayer, + } + + if (options.defaultDataLayer.type === `function`) { + options.defaultDataLayer.value = options.defaultDataLayer.value.toString() + } + } +} diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js index dbcc2eeb55aa5..40f55eca1bb4f 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js +++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js @@ -14,16 +14,16 @@ const generateGTMIframe = ({ id, environmentParamStr }) => const generateDefaultDataLayer = (dataLayer, reporter) => { let result = `window.dataLayer = window.dataLayer || [];` - if (typeof dataLayer === `function`) { - result += `window.dataLayer.push((${dataLayer})());` + if (dataLayer.type === `function`) { + result += `window.dataLayer.push((${dataLayer.value})());` } else { - if (typeof dataLayer !== `object` || dataLayer.constructor !== Object) { + if (dataLayer.type !== `object` || dataLayer.value.constructor !== Object) { reporter.panic( `Oops the plugin option "defaultDataLayer" should be a plain object. "${dataLayer}" is not valid.` ) } - result += `window.dataLayer.push(${JSON.stringify(dataLayer)});` + result += `window.dataLayer.push(${JSON.stringify(dataLayer.value)});` } return stripIndent`${result}`