From b756021a1f0a7f8f943c8ede789acf44be72b240 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 31 May 2021 16:51:24 +0200
Subject: [PATCH 01/24] feat(gatsby-plugin-google-analytics): enable core
 webvitals tracking

---
 .../gatsby-plugin-google-analytics/.babelrc   |  8 +-
 .../package.json                              |  4 +-
 .../src/__tests__/gatsby-browser.js           | 78 ++++++++++++++++++-
 .../src/gatsby-browser.js                     | 41 +++++++++-
 .../src/gatsby-node.js                        |  1 +
 .../src/gatsby-ssr.js                         | 24 +++++-
 yarn.lock                                     |  5 ++
 7 files changed, 151 insertions(+), 10 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/.babelrc b/packages/gatsby-plugin-google-analytics/.babelrc
index 31043522b2321..7094b00b614c2 100644
--- a/packages/gatsby-plugin-google-analytics/.babelrc
+++ b/packages/gatsby-plugin-google-analytics/.babelrc
@@ -1,3 +1,9 @@
 {
-  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [
+    {
+      "test": ["**/gatsby-browser.js"],
+      "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
+    }
+  ]
 }
diff --git a/packages/gatsby-plugin-google-analytics/package.json b/packages/gatsby-plugin-google-analytics/package.json
index adbd285110cec..e64d0ea39bf26 100644
--- a/packages/gatsby-plugin-google-analytics/package.json
+++ b/packages/gatsby-plugin-google-analytics/package.json
@@ -7,8 +7,8 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
-    "minimatch": "3.0.4"
+    "minimatch": "3.0.4",
+    "web-vitals": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index 06d2267458d00..fe4c0734f3754 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -1,5 +1,24 @@
-import { onRouteUpdate } from "../gatsby-browser"
+import { onClientEntry, onRouteUpdate } from "../gatsby-browser"
 import { Minimatch } from "minimatch"
+import { getLCP, getFID, getCLS } from "web-vitals"
+
+jest.mock(`web-vitals`, () => {
+  function createEntry(type, id, delta) {
+    return { name: type, id, delta }
+  }
+
+  return {
+    getLCP: jest.fn(report => {
+      report(createEntry(`LCP`, `1`, `300`))
+    }),
+    getFID: jest.fn(report => {
+      report(createEntry(`FID`, `2`, `150`))
+    }),
+    getCLS: jest.fn(report => {
+      report(createEntry(`CLS`, `3`, `0.10`))
+    }),
+  }
+})
 
 describe(`gatsby-plugin-google-analytics`, () => {
   describe(`gatsby-browser`, () => {
@@ -28,11 +47,12 @@ describe(`gatsby-plugin-google-analytics`, () => {
 
         beforeEach(() => {
           jest.useFakeTimers()
+          jest.clearAllMocks()
           window.ga = jest.fn()
         })
 
         afterEach(() => {
-          jest.resetAllMocks()
+          jest.useRealTimers()
         })
 
         it(`does not send page view when ga is undefined`, () => {
@@ -85,6 +105,60 @@ describe(`gatsby-plugin-google-analytics`, () => {
           expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 1000)
           expect(window.ga).toHaveBeenCalledTimes(2)
         })
+
+        it(`sends core web vitals when enabled`, async () => {
+          jest.useRealTimers()
+          onClientEntry({}, { disableWebVitalsTracking: false })
+
+          // wait 2 ticks to wait for dynamic import to resolve
+          await Promise.resolve()
+          await Promise.resolve()
+
+          expect(window.ga).toBeCalledTimes(3)
+          expect(window.ga).toBeCalledWith(
+            `send`,
+            `event`,
+            expect.objectContaining({
+              eventAction: `LCP`,
+              eventCategory: `Web Vitals`,
+              eventLabel: `1`,
+              eventValue: 300,
+            })
+          )
+          expect(window.ga).toBeCalledWith(
+            `send`,
+            `event`,
+            expect.objectContaining({
+              eventAction: `FID`,
+              eventCategory: `Web Vitals`,
+              eventLabel: `2`,
+              eventValue: 150,
+            })
+          )
+          expect(window.ga).toBeCalledWith(
+            `send`,
+            `event`,
+            expect.objectContaining({
+              eventAction: `CLS`,
+              eventCategory: `Web Vitals`,
+              eventLabel: `3`,
+              eventValue: 100,
+            })
+          )
+        })
+
+        it(`sends nothing when web vitals tracking is disabled`, async () => {
+          jest.useRealTimers()
+          onClientEntry({}, { disableWebVitalsTracking: true })
+
+          // wait 2 ticks to wait for dynamic import to resolve
+          await Promise.resolve()
+          await Promise.resolve()
+
+          expect(getLCP).not.toBeCalled()
+          expect(getFID).not.toBeCalled()
+          expect(getCLS).not.toBeCalled()
+        })
       })
     })
   })
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 2b73f8e254bc4..d18ad1a3224db 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -1,4 +1,35 @@
+function sendWebVitals() {
+  return import(/* webpackMode: "lazy-once" */ `web-vitals`).then(
+    ({ getLCP, getFID, getCLS }) => {
+      getCLS(sendToGoogleAnalytics)
+      getFID(sendToGoogleAnalytics)
+      getLCP(sendToGoogleAnalytics)
+    }
+  )
+}
+
+function sendToGoogleAnalytics({ name, delta, id }) {
+  window.ga(`send`, `event`, {
+    eventCategory: `Web Vitals`,
+    eventAction: name,
+    // The `id` value will be unique to the current page load. When sending
+    // multiple values from the same page (e.g. for CLS), Google Analytics can
+    // compute a total by grouping on this ID (note: requires `eventLabel` to
+    // be a dimension in your report).
+    eventLabel: id,
+    // Google Analytics metrics must be integers, so the value is rounded.
+    // For CLS the value is first multiplied by 1000 for greater precision
+    // (note: increase the multiplier for greater precision if needed).
+    eventValue: Math.round(name === `CLS` ? delta * 1000 : delta),
+    // Use a non-interaction event to avoid affecting bounce rate.
+    nonInteraction: true,
+    // Use `sendBeacon()` if the browser supports it.
+    transport: `beacon`,
+  })
+}
+
 export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
+  const ga = window.ga
   if (process.env.NODE_ENV !== `production` || typeof ga !== `function`) {
     return null
   }
@@ -16,8 +47,8 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
     const pagePath = location
       ? location.pathname + location.search + location.hash
       : undefined
-    window.ga(`set`, `page`, pagePath)
-    window.ga(`send`, `pageview`)
+    ga(`set`, `page`, pagePath)
+    ga(`send`, `pageview`)
   }
 
   // Minimum delay for reactHelmet's requestAnimationFrame
@@ -26,3 +57,9 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
 
   return null
 }
+
+export function onClientEntry(_, pluginOptions) {
+  if (!pluginOptions.disableWebVitalsTracking) {
+    sendWebVitals()
+  }
+}
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-node.js b/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
index bbc57071e63f6..24f89b6204cf6 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
@@ -54,4 +54,5 @@ exports.pluginOptionsSchema = ({ Joi }) =>
     queueTime: Joi.number(),
     forceSSL: Joi.boolean(),
     transport: Joi.string(),
+    disableWebVitalsTracking: Joi.boolean().default(true),
   })
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
index 1afa395dc63b6..ccb65ba6b38ec 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -66,7 +66,23 @@ export const onRenderBody = (
   const setComponents = pluginOptions.head
     ? setHeadComponents
     : setPostBodyComponents
-  return setComponents([
+
+  const inlineScripts = []
+  if (!pluginOptions.disableWebVitalsTracking) {
+    inlineScripts.push(
+      <script
+        key={`gatsby-plugin-google-analytics-web-vitals`}
+        data-gatsby="web-vitals-polyfill"
+        dangerouslySetInnerHTML={{
+          __html: `
+            !function(){var e,t,n,i,r={passive:!0,capture:!0},a=new Date,o=function(){i=[],t=-1,e=null,f(addEventListener)},c=function(i,r){e||(e=r,t=i,n=new Date,f(removeEventListener),u())},u=function(){if(t>=0&&t<n-a){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(r)})),i=[]}},s=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){c(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",n,r),addEventListener("pointercancel",i,r)}(t,e):c(t,e)}},f=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,s,r)}))},p="hidden"===document.visibilityState?0:1/0;addEventListener("visibilitychange",(function e(t){"hidden"===document.visibilityState&&(p=t.timeStamp,removeEventListener("visibilitychange",e,!0))}),!0);o(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:o,get firstHiddenTime(){return p}}}();
+          `,
+        }}
+      />
+    )
+  }
+
+  inlineScripts.push(
     <script
       key={`gatsby-plugin-google-analytics`}
       dangerouslySetInnerHTML={{
@@ -134,6 +150,8 @@ export const onRenderBody = (
       }, ``)}
       }`,
       }}
-    />,
-  ])
+    />
+  )
+
+  return setComponents(inlineScripts)
 }
diff --git a/yarn.lock b/yarn.lock
index 73f6915f010f6..c72e4fc769b98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28339,6 +28339,11 @@ web-namespaces@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
 
+web-vitals@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-1.1.2.tgz#06535308168986096239aa84716e68b4c6ae6d1c"
+  integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"

From 96a0a617eaf56f4f543dd26ab99df94f3f61ace6 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 31 May 2021 17:38:36 +0200
Subject: [PATCH 02/24] feat(gatsby-plugin-google-tagmanager): enable core
 webvitals tracking

---
 .../package.json                              |  3 +-
 .../src/__tests__/gatsby-browser.js           | 83 +++++++++++++++++++
 .../src/__tests__/gatsby-ssr.js               |  1 +
 .../src/gatsby-browser.js                     | 37 ++++++++-
 .../src/gatsby-ssr.js                         | 28 +++++--
 5 files changed, 145 insertions(+), 7 deletions(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/package.json b/packages/gatsby-plugin-google-tagmanager/package.json
index bce4ee39d4928..3e91e20e5a803 100644
--- a/packages/gatsby-plugin-google-tagmanager/package.json
+++ b/packages/gatsby-plugin-google-tagmanager/package.json
@@ -7,7 +7,8 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5"
+    "@babel/runtime": "^7.12.5",
+    "web-vitals": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 349fcd93f847e..7711f51d6beb1 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -1,3 +1,23 @@
+import { getLCP, getFID, getCLS } from "web-vitals"
+
+jest.mock(`web-vitals`, () => {
+  function createEntry(type, id, delta) {
+    return { name: type, id, delta }
+  }
+
+  return {
+    getLCP: jest.fn(report => {
+      report(createEntry(`LCP`, `1`, `300`))
+    }),
+    getFID: jest.fn(report => {
+      report(createEntry(`FID`, `2`, `150`))
+    }),
+    getCLS: jest.fn(report => {
+      report(createEntry(`CLS`, `3`, `0.10`))
+    }),
+  }
+})
+
 const getAPI = setup => {
   if (setup) {
     setup()
@@ -8,12 +28,19 @@ const getAPI = setup => {
   return require(`../gatsby-browser`)
 }
 
+let currentNodeEnv
 beforeEach(() => {
+  currentNodeEnv = process.env.NODE_ENV
   window.dataLayer = []
   jest.useFakeTimers()
   process.env.NODE_ENV = undefined
 })
 
+afterEach(() => {
+  jest.useRealTimers()
+  process.env.NODE_ENV = currentNodeEnv
+})
+
 describe(`onRouteUpdate`, () => {
   it(`does not register if NODE_ENV is not production`, () => {
     const { onRouteUpdate } = getAPI(() => {
@@ -110,4 +137,60 @@ describe(`onRouteUpdate`, () => {
 
     expect(window[dataLayerName]).toHaveLength(1)
   })
+
+  it(`sends core web vitals when enabled`, async () => {
+    jest.useRealTimers()
+    const { onClientEntry } = getAPI(() => {
+      process.env.NODE_ENV = `production`
+    })
+    onClientEntry({}, { disableWebVitalsTracking: false })
+
+    // wait 2 ticks to wait for dynamic import to resolve
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(window.dataLayer.length).toBe(3)
+    expect(window.dataLayer).toEqual([
+      {
+        event: `core-web-vitals`,
+        webVitalsMeasurement: {
+          name: `LCP`,
+          id: `1`,
+          value: 300,
+        },
+      },
+      {
+        event: `core-web-vitals`,
+        webVitalsMeasurement: {
+          name: `FID`,
+          id: `2`,
+          value: 150,
+        },
+      },
+      {
+        event: `core-web-vitals`,
+        webVitalsMeasurement: {
+          name: `CLS`,
+          id: `3`,
+          value: 100,
+        },
+      },
+    ])
+  })
+
+  it(`sends nothing when web vitals tracking is disabled`, async () => {
+    jest.useRealTimers()
+    const { onClientEntry } = getAPI(() => {
+      process.env.NODE_ENV = `production`
+    })
+    onClientEntry({}, { disableWebVitalsTracking: true })
+
+    // wait 2 ticks to wait for dynamic import to resolve
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(getLCP).not.toBeCalled()
+    expect(getFID).not.toBeCalled()
+    expect(getCLS).not.toBeCalled()
+  })
 })
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 669e8ff1c99f5..9327962f09d22 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
@@ -136,6 +136,7 @@ describe(`gatsby-plugin-google-tagmanager`, () => {
           value: { pageCategory: `home` },
         },
         dataLayerName,
+        disableWebVitalsTracking: true,
       }
 
       onRenderBody(mocks, pluginOptions)
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index 8b7bf8038dfb3..4ccb393e8b2d1 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -1,4 +1,33 @@
-exports.onRouteUpdate = (_, pluginOptions) => {
+function sendWebVitals(dataLayerName = `dataLayer`) {
+  const win = window
+  return import(/* webpackMode: "lazy-once" */ `web-vitals`).then(
+    ({ getLCP, getFID, getCLS }) => {
+      getCLS(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+      getFID(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+      getLCP(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+    }
+  )
+}
+
+function sendToGoogleAnalytics({ name, delta, id }, dataLayer) {
+  dataLayer.push({
+    event: `core-web-vitals`,
+    webVitalsMeasurement: {
+      name: name,
+      // The `id` value will be unique to the current page load. When sending
+      // multiple values from the same page (e.g. for CLS), Google Analytics can
+      // compute a total by grouping on this ID (note: requires `eventLabel` to
+      // be a dimension in your report).
+      id,
+      // Google Analytics metrics must be integers, so the value is rounded.
+      // For CLS the value is first multiplied by 1000 for greater precision
+      // (note: increase the multiplier for greater precision if needed).
+      value: Math.round(name === `CLS` ? delta * 1000 : delta),
+    },
+  })
+}
+
+export function onRouteUpdate(_, pluginOptions) {
   if (
     process.env.NODE_ENV === `production` ||
     pluginOptions.includeInDevelopment
@@ -16,3 +45,9 @@ exports.onRouteUpdate = (_, pluginOptions) => {
     }, 50)
   }
 }
+
+export function onClientEntry(_, pluginOptions) {
+  if (!pluginOptions.disableWebVitalsTracking) {
+    sendWebVitals(pluginOptions.dataLayerName)
+  }
+}
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
index c79e5f11cb38d..38d0b1ace04d1 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
@@ -40,6 +40,7 @@ exports.onRenderBody = (
     gtmPreview,
     defaultDataLayer,
     dataLayerName = `dataLayer`,
+    disableWebVitalsTracking = true,
   }
 ) => {
   if (process.env.NODE_ENV === `production` || includeInDevelopment) {
@@ -59,16 +60,33 @@ exports.onRenderBody = (
       )
     }
 
-    setHeadComponents([
+    const inlineScripts = []
+    if (!disableWebVitalsTracking) {
+      inlineScripts.push(
+        <script
+          key={`gatsby-plugin-google-tagmanager-web-vitals`}
+          data-gatsby="web-vitals-polyfill"
+          dangerouslySetInnerHTML={{
+            __html: `
+              !function(){var e,t,n,i,r={passive:!0,capture:!0},a=new Date,o=function(){i=[],t=-1,e=null,f(addEventListener)},c=function(i,r){e||(e=r,t=i,n=new Date,f(removeEventListener),u())},u=function(){if(t>=0&&t<n-a){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(r)})),i=[]}},s=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){c(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",n,r),addEventListener("pointercancel",i,r)}(t,e):c(t,e)}},f=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,s,r)}))},p="hidden"===document.visibilityState?0:1/0;addEventListener("visibilitychange",(function e(t){"hidden"===document.visibilityState&&(p=t.timeStamp,removeEventListener("visibilitychange",e,!0))}),!0);o(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:o,get firstHiddenTime(){return p}}}();
+            `,
+          }}
+        />
+      )
+    }
+
+    inlineScripts.push(
       <script
         key="plugin-google-tagmanager"
         dangerouslySetInnerHTML={{
           __html: oneLine`
-            ${defaultDataLayerCode}
-            ${generateGTM({ id, environmentParamStr, dataLayerName })}`,
+          ${defaultDataLayerCode}
+          ${generateGTM({ id, environmentParamStr, dataLayerName })}`,
         }}
-      />,
-    ])
+      />
+    )
+
+    setHeadComponents(inlineScripts)
 
     setPreBodyComponents([
       <noscript

From e738a1d7e45c3cbc319242667525640834eb7e10 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 31 May 2021 21:37:02 +0200
Subject: [PATCH 03/24] add readme

---
 packages/gatsby-plugin-google-analytics/README.md  | 5 +++++
 packages/gatsby-plugin-google-tagmanager/README.md | 8 ++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 6c2d36ea8ea45..bfea6657f10e4 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -43,6 +43,7 @@ module.exports = {
         sampleRate: 5,
         siteSpeedSampleRate: 10,
         cookieDomain: "example.com",
+        disableWebVitalsTracking: false,
       },
     },
   ],
@@ -133,6 +134,10 @@ If you need to set up SERVER_SIDE Google Optimize experiment, you can add the ex
 
 Besides the experiment ID you also need the variation ID for SERVER_SIDE experiments in Google Optimize. Set 0 for original version.
 
+### `disableWebVitalsTracking`
+
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `disableWebVitalsTracking` to false, Google Analytics will get "core-web-vitals" events with their values.
+
 ## Optional Fields
 
 This plugin supports all optional Create Only Fields documented in [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#create):
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index 315f775d4014e..89a3947a7ba20 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -37,6 +37,8 @@ plugins: [
       //
       // Defaults to gatsby-route-change
       routeChangeEventName: "YOUR_ROUTE_CHANGE_EVENT_NAME",
+      // Defaults to true
+      disableWebVitalsTracking: false,
     },
   },
 ]
@@ -80,6 +82,12 @@ This plugin will fire a new event called `gatsby-route-change` (or as in the `ga
 
 This tag will now catch every route change in Gatsby, and you can add Google tag services as you wish to it.
 
+#### Tracking Core Web Vitals
+
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `disableWebVitalsTracking` to false, GTM will get "core-web-vitals" events with their values.
+
+You can save this data in Google Analytics or any database of your choosing.
+
 #### Note
 
 Out of the box this plugin will simply load Google Tag Manager on the initial page/app load. It's up to you to fire tags based on changes in your app. See the above "Tracking routes" section for an example.

From 8feae676b7702f65827e0337b591b89e84fccdc8 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Wed, 2 Jun 2021 07:51:50 +0200
Subject: [PATCH 04/24] update tests

---
 .../src/__tests__/gatsby-browser.js           | 28 +++++++++++++++----
 .../load-plugins/__tests__/load-plugins.ts    |  1 +
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 7711f51d6beb1..61872f6b225ea 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -150,13 +150,29 @@ describe(`onRouteUpdate`, () => {
     await Promise.resolve()
 
     expect(window.dataLayer.length).toBe(3)
+    expect(window.dataLayer).toContainEqual({
+      event: `core-web-vitals`,
+      webVitalsMeasurement: {
+        name: `CLS`,
+        id: `3`,
+        value: 100,
+      },
+    })
+    expect(window.dataLayer).toContainEqual({
+      event: `core-web-vitals`,
+      webVitalsMeasurement: {
+        name: `FID`,
+        id: `2`,
+        value: 150,
+      },
+    })
     expect(window.dataLayer).toEqual([
       {
         event: `core-web-vitals`,
         webVitalsMeasurement: {
-          name: `LCP`,
-          id: `1`,
-          value: 300,
+          name: `CLS`,
+          id: `3`,
+          value: 100,
         },
       },
       {
@@ -170,9 +186,9 @@ describe(`onRouteUpdate`, () => {
       {
         event: `core-web-vitals`,
         webVitalsMeasurement: {
-          name: `CLS`,
-          id: `3`,
-          value: 100,
+          name: `LCP`,
+          id: `1`,
+          value: 300,
         },
       },
     ])
diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
index 097a88fe26c4a..134250ef9486e 100644
--- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
+++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
@@ -482,6 +482,7 @@ describe(`Load plugins`, () => {
       ).toEqual({
         // All the options that have defaults are defined
         anonymize: false,
+        disableWebVitalsTracking: true,
         exclude: [],
         head: false,
         pageTransitionDelay: 0,

From f9f44b6748122927194a4e98f3e85413457a155f Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Wed, 2 Jun 2021 07:56:15 +0200
Subject: [PATCH 05/24] add disableWebVitalsTracking to options

---
 .../gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js | 1 +
 packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js      | 1 +
 2 files changed, 2 insertions(+)

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 5315f095b1664..f349e5f186340 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js
@@ -11,6 +11,7 @@ describe(`pluginOptionsSchema`, () => {
       gtmPreview: `YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_PREVIEW_NAME`,
       dataLayerName: `YOUR_DATA_LAYER_NAME`,
       routeChangeEventName: `YOUR_ROUTE_CHANGE_EVENT_NAME`,
+      disableWebVitalsTracking: false,
     })
 
     expect(isValid).toEqual(true)
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
index 82b02708dec20..28c5808559f07 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
@@ -40,4 +40,5 @@ exports.pluginOptionsSchema = ({ Joi }) =>
       .description(
         `Name of the event that is triggered on every Gatsby route change.`
       ),
+    disableWebVitalsTracking: Joi.boolean().default(true),
   })

From d99a67d3632aba4c6c58c2adbcc9be2e78e0e515 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 14 Jun 2021 16:23:16 +0200
Subject: [PATCH 06/24] change disable to enable

---
 packages/gatsby-plugin-google-analytics/README.md          | 7 ++++---
 .../src/__tests__/gatsby-browser.js                        | 4 ++--
 .../gatsby-plugin-google-analytics/src/gatsby-browser.js   | 2 +-
 packages/gatsby-plugin-google-analytics/src/gatsby-node.js | 2 +-
 packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js  | 2 +-
 packages/gatsby-plugin-google-tagmanager/README.md         | 6 +++---
 .../src/__tests__/gatsby-browser.js                        | 4 ++--
 .../src/__tests__/gatsby-node.js                           | 2 +-
 .../src/__tests__/gatsby-ssr.js                            | 2 +-
 .../gatsby-plugin-google-tagmanager/src/gatsby-browser.js  | 2 +-
 .../gatsby-plugin-google-tagmanager/src/gatsby-node.js     | 2 +-
 packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js | 4 ++--
 .../src/bootstrap/load-plugins/__tests__/load-plugins.ts   | 2 +-
 13 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index bfea6657f10e4..396b72934b4c2 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -43,7 +43,8 @@ module.exports = {
         sampleRate: 5,
         siteSpeedSampleRate: 10,
         cookieDomain: "example.com",
-        disableWebVitalsTracking: false,
+        // defaults to false
+        enableWebVitalsTracking: true,
       },
     },
   ],
@@ -134,9 +135,9 @@ If you need to set up SERVER_SIDE Google Optimize experiment, you can add the ex
 
 Besides the experiment ID you also need the variation ID for SERVER_SIDE experiments in Google Optimize. Set 0 for original version.
 
-### `disableWebVitalsTracking`
+### `enableWebVitalsTracking`
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `disableWebVitalsTracking` to false, Google Analytics will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to false, Google Analytics will get "core-web-vitals" events with their values.
 
 ## Optional Fields
 
diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index fe4c0734f3754..13ad7775d3013 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -108,7 +108,7 @@ describe(`gatsby-plugin-google-analytics`, () => {
 
         it(`sends core web vitals when enabled`, async () => {
           jest.useRealTimers()
-          onClientEntry({}, { disableWebVitalsTracking: false })
+          onClientEntry({}, { enableWebVitalsTracking: true })
 
           // wait 2 ticks to wait for dynamic import to resolve
           await Promise.resolve()
@@ -149,7 +149,7 @@ describe(`gatsby-plugin-google-analytics`, () => {
 
         it(`sends nothing when web vitals tracking is disabled`, async () => {
           jest.useRealTimers()
-          onClientEntry({}, { disableWebVitalsTracking: true })
+          onClientEntry({}, { enableWebVitalsTracking: false })
 
           // wait 2 ticks to wait for dynamic import to resolve
           await Promise.resolve()
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index d18ad1a3224db..b93b06271e662 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -59,7 +59,7 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
 }
 
 export function onClientEntry(_, pluginOptions) {
-  if (!pluginOptions.disableWebVitalsTracking) {
+  if (pluginOptions.enableWebVitalsTracking) {
     sendWebVitals()
   }
 }
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-node.js b/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
index 24f89b6204cf6..ffabe694025f2 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-node.js
@@ -54,5 +54,5 @@ exports.pluginOptionsSchema = ({ Joi }) =>
     queueTime: Joi.number(),
     forceSSL: Joi.boolean(),
     transport: Joi.string(),
-    disableWebVitalsTracking: Joi.boolean().default(true),
+    enableWebVitalsTracking: Joi.boolean().default(false),
   })
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
index ccb65ba6b38ec..b66a5bd871939 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -68,7 +68,7 @@ export const onRenderBody = (
     : setPostBodyComponents
 
   const inlineScripts = []
-  if (!pluginOptions.disableWebVitalsTracking) {
+  if (pluginOptions.enableWebVitalsTracking) {
     inlineScripts.push(
       <script
         key={`gatsby-plugin-google-analytics-web-vitals`}
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index 89a3947a7ba20..ca5ec56fdcc53 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -37,8 +37,8 @@ plugins: [
       //
       // Defaults to gatsby-route-change
       routeChangeEventName: "YOUR_ROUTE_CHANGE_EVENT_NAME",
-      // Defaults to true
-      disableWebVitalsTracking: false,
+      // Defaults to false
+      enableWebVitalsTracking: true,
     },
   },
 ]
@@ -84,7 +84,7 @@ This tag will now catch every route change in Gatsby, and you can add Google tag
 
 #### Tracking Core Web Vitals
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `disableWebVitalsTracking` to false, GTM will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to false, GTM will get "core-web-vitals" events with their values.
 
 You can save this data in Google Analytics or any database of your choosing.
 
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 61872f6b225ea..b09f0be3d3d28 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -143,7 +143,7 @@ describe(`onRouteUpdate`, () => {
     const { onClientEntry } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
-    onClientEntry({}, { disableWebVitalsTracking: false })
+    onClientEntry({}, { enableWebVitalsTracking: true })
 
     // wait 2 ticks to wait for dynamic import to resolve
     await Promise.resolve()
@@ -199,7 +199,7 @@ describe(`onRouteUpdate`, () => {
     const { onClientEntry } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
-    onClientEntry({}, { disableWebVitalsTracking: true })
+    onClientEntry({}, { enableWebVitalsTracking: false })
 
     // wait 2 ticks to wait for dynamic import to resolve
     await Promise.resolve()
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 f349e5f186340..7b5cdac64e2f0 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js
@@ -11,7 +11,7 @@ describe(`pluginOptionsSchema`, () => {
       gtmPreview: `YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_PREVIEW_NAME`,
       dataLayerName: `YOUR_DATA_LAYER_NAME`,
       routeChangeEventName: `YOUR_ROUTE_CHANGE_EVENT_NAME`,
-      disableWebVitalsTracking: false,
+      enableWebVitalsTracking: true,
     })
 
     expect(isValid).toEqual(true)
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 9327962f09d22..cd736ae5dbcf0 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
@@ -136,7 +136,7 @@ describe(`gatsby-plugin-google-tagmanager`, () => {
           value: { pageCategory: `home` },
         },
         dataLayerName,
-        disableWebVitalsTracking: true,
+        enableWebVitalsTracking: false,
       }
 
       onRenderBody(mocks, pluginOptions)
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index 4ccb393e8b2d1..c65985b2a4167 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -47,7 +47,7 @@ export function onRouteUpdate(_, pluginOptions) {
 }
 
 export function onClientEntry(_, pluginOptions) {
-  if (!pluginOptions.disableWebVitalsTracking) {
+  if (pluginOptions.enableWebVitalsTracking) {
     sendWebVitals(pluginOptions.dataLayerName)
   }
 }
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
index 28c5808559f07..c50f724858709 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js
@@ -40,5 +40,5 @@ exports.pluginOptionsSchema = ({ Joi }) =>
       .description(
         `Name of the event that is triggered on every Gatsby route change.`
       ),
-    disableWebVitalsTracking: Joi.boolean().default(true),
+    enableWebVitalsTracking: Joi.boolean().default(false),
   })
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
index 38d0b1ace04d1..834e1bd95e580 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
@@ -40,7 +40,7 @@ exports.onRenderBody = (
     gtmPreview,
     defaultDataLayer,
     dataLayerName = `dataLayer`,
-    disableWebVitalsTracking = true,
+    enableWebVitalsTracking = false,
   }
 ) => {
   if (process.env.NODE_ENV === `production` || includeInDevelopment) {
@@ -61,7 +61,7 @@ exports.onRenderBody = (
     }
 
     const inlineScripts = []
-    if (!disableWebVitalsTracking) {
+    if (enableWebVitalsTracking) {
       inlineScripts.push(
         <script
           key={`gatsby-plugin-google-tagmanager-web-vitals`}
diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
index 134250ef9486e..427cbc24b8ece 100644
--- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
+++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
@@ -482,7 +482,7 @@ describe(`Load plugins`, () => {
       ).toEqual({
         // All the options that have defaults are defined
         anonymize: false,
-        disableWebVitalsTracking: true,
+        enableWebVitalsTracking: true,
         exclude: [],
         head: false,
         pageTransitionDelay: 0,

From e0d9126c249e5ba9c2bd8eafa57cb029ce308755 Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Mon, 14 Jun 2021 17:02:41 +0200
Subject: [PATCH 07/24] adjust snapshot

---
 .../gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
index 427cbc24b8ece..3f84468e28dcb 100644
--- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
+++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
@@ -482,7 +482,7 @@ describe(`Load plugins`, () => {
       ).toEqual({
         // All the options that have defaults are defined
         anonymize: false,
-        enableWebVitalsTracking: true,
+        enableWebVitalsTracking: false,
         exclude: [],
         head: false,
         pageTransitionDelay: 0,

From 3191febc454815650e0c5ae77abb1b4110d857a4 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 14 Jun 2021 22:54:53 +0200
Subject: [PATCH 08/24] Update
 packages/gatsby-plugin-google-analytics/README.md

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-analytics/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 396b72934b4c2..018317625d6f4 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -137,7 +137,7 @@ Besides the experiment ID you also need the variation ID for SERVER_SIDE experim
 
 ### `enableWebVitalsTracking`
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to false, Google Analytics will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, Google Analytics will get "core-web-vitals" events with their values.
 
 ## Optional Fields
 

From 8d5a983c624c0312eb88d1e54c7cccfb4013ec2c Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 14 Jun 2021 23:01:19 +0200
Subject: [PATCH 09/24] update review

---
 .../src/__tests__/gatsby-browser.js                  |  2 +-
 .../src/gatsby-browser.js                            | 12 +++++-------
 .../gatsby-plugin-google-analytics/src/gatsby-ssr.js |  2 ++
 .../src/__tests__/gatsby-browser.js                  |  2 +-
 .../src/gatsby-browser.js                            | 12 +++++-------
 .../src/gatsby-ssr.js                                |  2 ++
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index 13ad7775d3013..86385172f9fc3 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -2,7 +2,7 @@ import { onClientEntry, onRouteUpdate } from "../gatsby-browser"
 import { Minimatch } from "minimatch"
 import { getLCP, getFID, getCLS } from "web-vitals"
 
-jest.mock(`web-vitals`, () => {
+jest.mock(`web-vitals/base`, () => {
   function createEntry(type, id, delta) {
     return { name: type, id, delta }
   }
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index b93b06271e662..6c45b6c315be4 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -1,11 +1,9 @@
 function sendWebVitals() {
-  return import(/* webpackMode: "lazy-once" */ `web-vitals`).then(
-    ({ getLCP, getFID, getCLS }) => {
-      getCLS(sendToGoogleAnalytics)
-      getFID(sendToGoogleAnalytics)
-      getLCP(sendToGoogleAnalytics)
-    }
-  )
+  return import(`web-vitals/base`).then(({ getLCP, getFID, getCLS }) => {
+    getCLS(sendToGoogleAnalytics)
+    getFID(sendToGoogleAnalytics)
+    getLCP(sendToGoogleAnalytics)
+  })
 }
 
 function sendToGoogleAnalytics({ name, delta, id }) {
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
index b66a5bd871939..79377acacad3a 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -69,6 +69,8 @@ export const onRenderBody = (
 
   const inlineScripts = []
   if (pluginOptions.enableWebVitalsTracking) {
+    // web-vitals/polyfill (necessary for non chromium browsers)
+    // @seehttps://www.npmjs.com/package/web-vitals#how-the-polyfill-works
     inlineScripts.push(
       <script
         key={`gatsby-plugin-google-analytics-web-vitals`}
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index b09f0be3d3d28..00f38a4d2974a 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -1,6 +1,6 @@
 import { getLCP, getFID, getCLS } from "web-vitals"
 
-jest.mock(`web-vitals`, () => {
+jest.mock(`web-vitals/base`, () => {
   function createEntry(type, id, delta) {
     return { name: type, id, delta }
   }
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index c65985b2a4167..482c5b439a740 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -1,12 +1,10 @@
 function sendWebVitals(dataLayerName = `dataLayer`) {
   const win = window
-  return import(/* webpackMode: "lazy-once" */ `web-vitals`).then(
-    ({ getLCP, getFID, getCLS }) => {
-      getCLS(data => sendToGoogleAnalytics(data, win[dataLayerName]))
-      getFID(data => sendToGoogleAnalytics(data, win[dataLayerName]))
-      getLCP(data => sendToGoogleAnalytics(data, win[dataLayerName]))
-    }
-  )
+  return import(`web-vitals/base`).then(({ getLCP, getFID, getCLS }) => {
+    getCLS(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+    getFID(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+    getLCP(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+  })
 }
 
 function sendToGoogleAnalytics({ name, delta, id }, dataLayer) {
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
index 834e1bd95e580..41c7febd9bd80 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
@@ -62,6 +62,8 @@ exports.onRenderBody = (
 
     const inlineScripts = []
     if (enableWebVitalsTracking) {
+      // web-vitals/polyfill (necessary for non chromium browsers)
+      // @seehttps://www.npmjs.com/package/web-vitals#how-the-polyfill-works
       inlineScripts.push(
         <script
           key={`gatsby-plugin-google-tagmanager-web-vitals`}

From 0c0041526de029e1af31d017c230e6fc908d841f Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 14 Jun 2021 23:04:50 +0200
Subject: [PATCH 10/24] Update README.md

---
 packages/gatsby-plugin-google-tagmanager/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index ca5ec56fdcc53..a6103ca06aebf 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -84,7 +84,7 @@ This tag will now catch every route change in Gatsby, and you can add Google tag
 
 #### Tracking Core Web Vitals
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to false, GTM will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, GTM will get "core-web-vitals" events with their values.
 
 You can save this data in Google Analytics or any database of your choosing.
 

From 64ab5c1acc76fcd250d93edb87acda407c8c074f Mon Sep 17 00:00:00 2001
From: Lennart <lekoarts@gmail.com>
Date: Tue, 15 Jun 2021 06:23:22 +0200
Subject: [PATCH 11/24] Update README.md

---
 packages/gatsby-plugin-google-analytics/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 018317625d6f4..4591a30855b09 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -137,7 +137,7 @@ Besides the experiment ID you also need the variation ID for SERVER_SIDE experim
 
 ### `enableWebVitalsTracking`
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, Google Analytics will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, Google Analytics will get "core-web-vitals" events with their values.
 
 ## Optional Fields
 

From 0e654890763600cff32246d0430b8584acf65941 Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Tue, 15 Jun 2021 12:38:33 +0200
Subject: [PATCH 12/24] sync readme

---
 packages/gatsby-plugin-google-tagmanager/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index a6103ca06aebf..f61b550cd09bb 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -84,7 +84,7 @@ This tag will now catch every route change in Gatsby, and you can add Google tag
 
 #### Tracking Core Web Vitals
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, GTM will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, GTM will get "core-web-vitals" events with their values.
 
 You can save this data in Google Analytics or any database of your choosing.
 

From d342d83c387a896b6ae63073cbfa3590c59c2399 Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Tue, 15 Jun 2021 12:44:41 +0200
Subject: [PATCH 13/24] adjust tests after switching to base variant of
 web-vitals

---
 .../src/__tests__/gatsby-browser.js                             | 2 +-
 .../src/__tests__/gatsby-browser.js                             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index 86385172f9fc3..9fad1a5713ae4 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -1,6 +1,6 @@
 import { onClientEntry, onRouteUpdate } from "../gatsby-browser"
 import { Minimatch } from "minimatch"
-import { getLCP, getFID, getCLS } from "web-vitals"
+import { getLCP, getFID, getCLS } from "web-vitals/base"
 
 jest.mock(`web-vitals/base`, () => {
   function createEntry(type, id, delta) {
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 00f38a4d2974a..7f10de52ef5ba 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -1,4 +1,4 @@
-import { getLCP, getFID, getCLS } from "web-vitals"
+import { getLCP, getFID, getCLS } from "web-vitals/base"
 
 jest.mock(`web-vitals/base`, () => {
   function createEntry(type, id, delta) {

From 127e11ceaa939770405954c4f24f6ff29e2a0839 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 13:06:34 +0200
Subject: [PATCH 14/24] always measure

---
 .../gatsby-plugin-google-analytics/README.md  |  8 +++-
 .../src/gatsby-browser.js                     | 48 +++++++++++++++----
 .../gatsby-plugin-google-tagmanager/.babelrc  |  8 +++-
 .../gatsby-plugin-google-tagmanager/README.md |  8 +++-
 .../src/gatsby-browser.js                     | 43 ++++++++++++++---
 5 files changed, 98 insertions(+), 17 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 4591a30855b09..099345886bc8e 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -137,7 +137,13 @@ Besides the experiment ID you also need the variation ID for SERVER_SIDE experim
 
 ### `enableWebVitalsTracking`
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, Google Analytics will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, Google Analytics will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
+
+We send three metrics:
+
+- **Largest Contentful Paint (LCP)**: measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
+- **First Input Delay (FID)**: measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
+- **Cumulative Layout Shift (CLS)**: measures visual stability. To provide a good user experience, pages should maintain a CLS of 1 or less.
 
 ## Optional Fields
 
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 6c45b6c315be4..19188c6175810 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -1,12 +1,44 @@
-function sendWebVitals() {
+const listOfMetricsSend = new Set()
+
+function debounce(fn, timeout) {
+  let timer = null
+
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    timer = setTimeout(fn, timeout, ...args)
+  }
+}
+
+function sendWebVitals(dataLayerName = `dataLayer`) {
+  const win = window
+
+  function sendData(data) {
+    if (listOfMetricsSend.has(data.name)) {
+      return
+    }
+    listOfMetricsSend.add(data.name)
+
+    sendToGoogleAnalytics(data, win[dataLayerName])
+  }
+
   return import(`web-vitals/base`).then(({ getLCP, getFID, getCLS }) => {
-    getCLS(sendToGoogleAnalytics)
-    getFID(sendToGoogleAnalytics)
-    getLCP(sendToGoogleAnalytics)
+    const debouncedCLS = debounce(sendData, 3000)
+    // we don't need to debounce FID - we send it when it happens
+    const debouncedFID = sendData
+    // LCP can occur multiple times so we debounce it
+    const debouncedLCP = debounce(sendData, 3000)
+
+    // With the true flag, we meausre all previous occurences too, in case we start listening to late.
+    getCLS(debouncedCLS, true)
+    getFID(debouncedFID, true)
+    getLCP(debouncedLCP, true)
   })
 }
 
-function sendToGoogleAnalytics({ name, delta, id }) {
+function sendToGoogleAnalytics({ name, value, id }) {
   window.ga(`send`, `event`, {
     eventCategory: `Web Vitals`,
     eventAction: name,
@@ -18,7 +50,7 @@ function sendToGoogleAnalytics({ name, delta, id }) {
     // Google Analytics metrics must be integers, so the value is rounded.
     // For CLS the value is first multiplied by 1000 for greater precision
     // (note: increase the multiplier for greater precision if needed).
-    eventValue: Math.round(name === `CLS` ? delta * 1000 : delta),
+    eventValue: Math.round(name === `CLS` ? value * 1000 : value),
     // Use a non-interaction event to avoid affecting bounce rate.
     nonInteraction: true,
     // Use `sendBeacon()` if the browser supports it.
@@ -56,8 +88,8 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
   return null
 }
 
-export function onClientEntry(_, pluginOptions) {
+export function onInitialClientRender(_, pluginOptions) {
   if (pluginOptions.enableWebVitalsTracking) {
-    sendWebVitals()
+    sendWebVitals(pluginOptions.dataLayerName)
   }
 }
diff --git a/packages/gatsby-plugin-google-tagmanager/.babelrc b/packages/gatsby-plugin-google-tagmanager/.babelrc
index 31043522b2321..7094b00b614c2 100644
--- a/packages/gatsby-plugin-google-tagmanager/.babelrc
+++ b/packages/gatsby-plugin-google-tagmanager/.babelrc
@@ -1,3 +1,9 @@
 {
-  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [
+    {
+      "test": ["**/gatsby-browser.js"],
+      "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
+    }
+  ]
 }
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index f61b550cd09bb..46f6770c62a33 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -84,10 +84,16 @@ This tag will now catch every route change in Gatsby, and you can add Google tag
 
 #### Tracking Core Web Vitals
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, GTM will get "core-web-vitals" events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, GTM will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
 
 You can save this data in Google Analytics or any database of your choosing.
 
+We send three metrics:
+
+- **Largest Contentful Paint (LCP)**: measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
+- **First Input Delay (FID)**: measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
+- **Cumulative Layout Shift (CLS)**: measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
+
 #### Note
 
 Out of the box this plugin will simply load Google Tag Manager on the initial page/app load. It's up to you to fire tags based on changes in your app. See the above "Tracking routes" section for an example.
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index 482c5b439a740..c2c05f68fbe7f 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -1,13 +1,44 @@
+const listOfMetricsSend = new Set()
+
+function debounce(fn, timeout) {
+  let timer = null
+
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+
+    timer = setTimeout(fn, timeout, ...args)
+  }
+}
+
 function sendWebVitals(dataLayerName = `dataLayer`) {
   const win = window
+
+  function sendData(data) {
+    if (listOfMetricsSend.has(data.name)) {
+      return
+    }
+    listOfMetricsSend.add(data.name)
+
+    sendToGTM(data, win[dataLayerName])
+  }
+
   return import(`web-vitals/base`).then(({ getLCP, getFID, getCLS }) => {
-    getCLS(data => sendToGoogleAnalytics(data, win[dataLayerName]))
-    getFID(data => sendToGoogleAnalytics(data, win[dataLayerName]))
-    getLCP(data => sendToGoogleAnalytics(data, win[dataLayerName]))
+    const debouncedCLS = debounce(sendData, 3000)
+    // we don't need to debounce FID - we send it when it happens
+    const debouncedFID = sendData
+    // LCP can occur multiple times so we debounce it
+    const debouncedLCP = debounce(sendData, 3000)
+
+    // With the true flag, we meausre all previous occurences too, in case we start listening to late.
+    getCLS(debouncedCLS, true)
+    getFID(debouncedFID, true)
+    getLCP(debouncedLCP, true)
   })
 }
 
-function sendToGoogleAnalytics({ name, delta, id }, dataLayer) {
+function sendToGTM({ name, value, id }, dataLayer) {
   dataLayer.push({
     event: `core-web-vitals`,
     webVitalsMeasurement: {
@@ -20,7 +51,7 @@ function sendToGoogleAnalytics({ name, delta, id }, dataLayer) {
       // Google Analytics metrics must be integers, so the value is rounded.
       // For CLS the value is first multiplied by 1000 for greater precision
       // (note: increase the multiplier for greater precision if needed).
-      value: Math.round(name === `CLS` ? delta * 1000 : delta),
+      value: Math.round(name === `CLS` ? value * 1000 : value),
     },
   })
 }
@@ -44,7 +75,7 @@ export function onRouteUpdate(_, pluginOptions) {
   }
 }
 
-export function onClientEntry(_, pluginOptions) {
+export function onInitialClientRender(_, pluginOptions) {
   if (pluginOptions.enableWebVitalsTracking) {
     sendWebVitals(pluginOptions.dataLayerName)
   }

From 4f9f3f094473ee65f80a7b6e8102f27089d5105a Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 13:25:40 +0200
Subject: [PATCH 15/24] update tests

---
 .../src/__tests__/gatsby-browser.js           | 18 +++---
 .../src/__tests__/gatsby-browser.js           | 58 +++++++------------
 2 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index 9fad1a5713ae4..101563f06c952 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -1,10 +1,10 @@
-import { onClientEntry, onRouteUpdate } from "../gatsby-browser"
+import { onInitialClientRender, onRouteUpdate } from "../gatsby-browser"
 import { Minimatch } from "minimatch"
 import { getLCP, getFID, getCLS } from "web-vitals/base"
 
 jest.mock(`web-vitals/base`, () => {
-  function createEntry(type, id, delta) {
-    return { name: type, id, delta }
+  function createEntry(type, id, value) {
+    return { name: type, id, value }
   }
 
   return {
@@ -107,13 +107,15 @@ describe(`gatsby-plugin-google-analytics`, () => {
         })
 
         it(`sends core web vitals when enabled`, async () => {
-          jest.useRealTimers()
-          onClientEntry({}, { enableWebVitalsTracking: true })
+          jest.useFakeTimers()
+          onInitialClientRender({}, { enableWebVitalsTracking: true })
 
           // wait 2 ticks to wait for dynamic import to resolve
           await Promise.resolve()
           await Promise.resolve()
 
+          jest.runAllTimers()
+
           expect(window.ga).toBeCalledTimes(3)
           expect(window.ga).toBeCalledWith(
             `send`,
@@ -148,13 +150,15 @@ describe(`gatsby-plugin-google-analytics`, () => {
         })
 
         it(`sends nothing when web vitals tracking is disabled`, async () => {
-          jest.useRealTimers()
-          onClientEntry({}, { enableWebVitalsTracking: false })
+          jest.useFakeTimers()
+          onInitialClientRender({}, { enableWebVitalsTracking: false })
 
           // wait 2 ticks to wait for dynamic import to resolve
           await Promise.resolve()
           await Promise.resolve()
 
+          jest.runAllTimers()
+
           expect(getLCP).not.toBeCalled()
           expect(getFID).not.toBeCalled()
           expect(getCLS).not.toBeCalled()
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 7f10de52ef5ba..6217eca5d6d26 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -1,8 +1,8 @@
 import { getLCP, getFID, getCLS } from "web-vitals/base"
 
 jest.mock(`web-vitals/base`, () => {
-  function createEntry(type, id, delta) {
-    return { name: type, id, delta }
+  function createEntry(type, id, value) {
+    return { name: type, id, value }
   }
 
   return {
@@ -139,23 +139,25 @@ describe(`onRouteUpdate`, () => {
   })
 
   it(`sends core web vitals when enabled`, async () => {
-    jest.useRealTimers()
-    const { onClientEntry } = getAPI(() => {
+    jest.useFakeTimers()
+    const { onInitialClientRender } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
-    onClientEntry({}, { enableWebVitalsTracking: true })
+    onInitialClientRender({}, { enableWebVitalsTracking: true })
 
     // wait 2 ticks to wait for dynamic import to resolve
     await Promise.resolve()
     await Promise.resolve()
 
+    jest.runAllTimers()
+
     expect(window.dataLayer.length).toBe(3)
     expect(window.dataLayer).toContainEqual({
       event: `core-web-vitals`,
       webVitalsMeasurement: {
-        name: `CLS`,
-        id: `3`,
-        value: 100,
+        name: `LCP`,
+        id: `1`,
+        value: 300,
       },
     })
     expect(window.dataLayer).toContainEqual({
@@ -166,40 +168,24 @@ describe(`onRouteUpdate`, () => {
         value: 150,
       },
     })
-    expect(window.dataLayer).toEqual([
-      {
-        event: `core-web-vitals`,
-        webVitalsMeasurement: {
-          name: `CLS`,
-          id: `3`,
-          value: 100,
-        },
-      },
-      {
-        event: `core-web-vitals`,
-        webVitalsMeasurement: {
-          name: `FID`,
-          id: `2`,
-          value: 150,
-        },
-      },
-      {
-        event: `core-web-vitals`,
-        webVitalsMeasurement: {
-          name: `LCP`,
-          id: `1`,
-          value: 300,
-        },
+    expect(window.dataLayer).toContainEqual({
+      event: `core-web-vitals`,
+      webVitalsMeasurement: {
+        name: `CLS`,
+        id: `3`,
+        value: 100,
       },
-    ])
+    })
   })
 
   it(`sends nothing when web vitals tracking is disabled`, async () => {
-    jest.useRealTimers()
-    const { onClientEntry } = getAPI(() => {
+    jest.useFakeTimers()
+    const { onInitialClientRender } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
-    onClientEntry({}, { enableWebVitalsTracking: false })
+    onInitialClientRender({}, { enableWebVitalsTracking: false })
+
+    jest.runAllTimers()
 
     // wait 2 ticks to wait for dynamic import to resolve
     await Promise.resolve()

From 06820fa03c4db27645a1d1cbeb426e316c6064c9 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 13:57:28 +0200
Subject: [PATCH 16/24] add tests for ssr

---
 .../gatsby-plugin-google-analytics/README.md  |  2 +-
 .../src/__tests__/gatsby-browser.js           |  2 --
 .../src/__tests__/gatsby-ssr.js               | 21 ++++++++++++
 .../src/gatsby-ssr.js                         |  8 ++---
 .../gatsby-plugin-google-tagmanager/README.md |  2 +-
 .../src/__tests__/gatsby-browser.js           |  2 --
 .../src/__tests__/gatsby-ssr.js               | 34 +++++++++++++++++++
 7 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 099345886bc8e..bc004e8930365 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -137,7 +137,7 @@ Besides the experiment ID you also need the variation ID for SERVER_SIDE experim
 
 ### `enableWebVitalsTracking`
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, Google Analytics will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, Google Analytics will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
 
 We send three metrics:
 
diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
index 101563f06c952..c46c88b08e9ed 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js
@@ -107,7 +107,6 @@ describe(`gatsby-plugin-google-analytics`, () => {
         })
 
         it(`sends core web vitals when enabled`, async () => {
-          jest.useFakeTimers()
           onInitialClientRender({}, { enableWebVitalsTracking: true })
 
           // wait 2 ticks to wait for dynamic import to resolve
@@ -150,7 +149,6 @@ describe(`gatsby-plugin-google-analytics`, () => {
         })
 
         it(`sends nothing when web vitals tracking is disabled`, async () => {
-          jest.useFakeTimers()
           onInitialClientRender({}, { enableWebVitalsTracking: false })
 
           // wait 2 ticks to wait for dynamic import to resolve
diff --git a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-ssr.js
index e97a649980078..e5db6037a2b59 100644
--- a/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-ssr.js
@@ -190,6 +190,27 @@ describe(`gatsby-plugin-google-analytics`, () => {
           expect(result).not.toContain(`defer=1;`)
           expect(result).toContain(`async=1;`)
         })
+
+        it(`adds the web-vitals polyfill to the head`, () => {
+          const { setHeadComponents } = setup({
+            enableWebVitalsTracking: true,
+            head: false,
+          })
+
+          expect(setHeadComponents.mock.calls.length).toBe(2)
+          expect(setHeadComponents.mock.calls[1][0][0].key).toBe(
+            `gatsby-plugin-google-analytics-web-vitals`
+          )
+        })
+
+        it(`should not add the web-vitals polyfill when enableWebVitalsTracking is false `, () => {
+          const { setHeadComponents } = setup({
+            enableWebVitalsTracking: false,
+            head: false,
+          })
+
+          expect(setHeadComponents.mock.calls.length).toBe(1)
+        })
       })
     })
   })
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
index 79377acacad3a..6eeb8b3ab1fea 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -71,17 +71,17 @@ export const onRenderBody = (
   if (pluginOptions.enableWebVitalsTracking) {
     // web-vitals/polyfill (necessary for non chromium browsers)
     // @seehttps://www.npmjs.com/package/web-vitals#how-the-polyfill-works
-    inlineScripts.push(
+    setHeadComponents([
       <script
-        key={`gatsby-plugin-google-analytics-web-vitals`}
+        key="gatsby-plugin-google-analytics-web-vitals"
         data-gatsby="web-vitals-polyfill"
         dangerouslySetInnerHTML={{
           __html: `
             !function(){var e,t,n,i,r={passive:!0,capture:!0},a=new Date,o=function(){i=[],t=-1,e=null,f(addEventListener)},c=function(i,r){e||(e=r,t=i,n=new Date,f(removeEventListener),u())},u=function(){if(t>=0&&t<n-a){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(r)})),i=[]}},s=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){c(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",n,r),addEventListener("pointercancel",i,r)}(t,e):c(t,e)}},f=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,s,r)}))},p="hidden"===document.visibilityState?0:1/0;addEventListener("visibilitychange",(function e(t){"hidden"===document.visibilityState&&(p=t.timeStamp,removeEventListener("visibilitychange",e,!0))}),!0);o(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:o,get firstHiddenTime(){return p}}}();
           `,
         }}
-      />
-    )
+      />,
+    ])
   }
 
   inlineScripts.push(
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index 46f6770c62a33..572c5bb910be0 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -84,7 +84,7 @@ This tag will now catch every route change in Gatsby, and you can add Google tag
 
 #### Tracking Core Web Vitals
 
-Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to true, GTM will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
+Optimizing for the quality of user experience is key to the long-term success of any site on the web. Capturing Real user metrics (RUM) helps you understand the experience of your user/customer. By setting `enableWebVitalsTracking` to `true`, GTM will get ["core-web-vitals"](https://web.dev/vitals/) events with their values.
 
 You can save this data in Google Analytics or any database of your choosing.
 
diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 6217eca5d6d26..9c011031907f7 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -139,7 +139,6 @@ describe(`onRouteUpdate`, () => {
   })
 
   it(`sends core web vitals when enabled`, async () => {
-    jest.useFakeTimers()
     const { onInitialClientRender } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
@@ -179,7 +178,6 @@ describe(`onRouteUpdate`, () => {
   })
 
   it(`sends nothing when web vitals tracking is disabled`, async () => {
-    jest.useFakeTimers()
     const { onInitialClientRender } = getAPI(() => {
       process.env.NODE_ENV = `production`
     })
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 cd736ae5dbcf0..12993d918b4f3 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js
@@ -146,5 +146,39 @@ describe(`gatsby-plugin-google-tagmanager`, () => {
         `window.${dataLayerName}`
       )
     })
+
+    it(`adds the web-vitals polyfill to the head`, () => {
+      const mocks = {
+        setHeadComponents: jest.fn(),
+        setPreBodyComponents: jest.fn(),
+      }
+      const pluginOptions = {
+        includeInDevelopment: true,
+        enableWebVitalsTracking: true,
+      }
+
+      onRenderBody(mocks, pluginOptions)
+
+      const [headConfig] = mocks.setHeadComponents.mock.calls[0][0]
+      expect(mocks.setHeadComponents.mock.calls[0][0].length).toBe(2)
+      expect(headConfig.key).toBe(`gatsby-plugin-google-tagmanager-web-vitals`)
+    })
+
+    it(`should not add the web-vitals polyfill when enableWebVitalsTracking is false `, () => {
+      const mocks = {
+        setHeadComponents: jest.fn(),
+        setPreBodyComponents: jest.fn(),
+      }
+      const pluginOptions = {
+        includeInDevelopment: true,
+        enableWebVitalsTracking: false,
+      }
+
+      onRenderBody(mocks, pluginOptions)
+
+      const [headConfig] = mocks.setHeadComponents.mock.calls[0][0]
+      expect(mocks.setHeadComponents.mock.calls[0].length).toBe(1)
+      expect(headConfig.key).toBe(`plugin-google-tagmanager`)
+    })
   })
 })

From a94bd698989b809aef15241795be2d96159636df Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:31:54 +0200
Subject: [PATCH 17/24] Update
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 19188c6175810..7e673985967e4 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -31,7 +31,7 @@ function sendWebVitals(dataLayerName = `dataLayer`) {
     // LCP can occur multiple times so we debounce it
     const debouncedLCP = debounce(sendData, 3000)
 
-    // With the true flag, we meausre all previous occurences too, in case we start listening to late.
+    // With the true flag, we measure all previous occurences too, in case we start listening to late.
     getCLS(debouncedCLS, true)
     getFID(debouncedFID, true)
     getLCP(debouncedLCP, true)

From aa50b0908645d30308cdf7337a25dfeedc474e1b Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:32:00 +0200
Subject: [PATCH 18/24] Update
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 7e673985967e4..ce6f4f7e3d6e0 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -12,8 +12,7 @@ function debounce(fn, timeout) {
   }
 }
 
-function sendWebVitals(dataLayerName = `dataLayer`) {
-  const win = window
+function sendWebVitals() {
 
   function sendData(data) {
     if (listOfMetricsSend.has(data.name)) {

From af9f71e1dab59c6b7104c72dfd7172c8a3e54780 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:32:18 +0200
Subject: [PATCH 19/24] Update
 packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 .../src/__tests__/gatsby-browser.js                           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
index 9c011031907f7..388b0aa2760ac 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-browser.js
@@ -183,12 +183,12 @@ describe(`onRouteUpdate`, () => {
     })
     onInitialClientRender({}, { enableWebVitalsTracking: false })
 
-    jest.runAllTimers()
-
     // wait 2 ticks to wait for dynamic import to resolve
     await Promise.resolve()
     await Promise.resolve()
 
+    jest.runAllTimers()
+
     expect(getLCP).not.toBeCalled()
     expect(getFID).not.toBeCalled()
     expect(getCLS).not.toBeCalled()

From a1c95ef4840e335a18e23441bd94adfe029ab1de Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:33:21 +0200
Subject: [PATCH 20/24] Update
 packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index c2c05f68fbe7f..833da1553a549 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -31,7 +31,7 @@ function sendWebVitals(dataLayerName = `dataLayer`) {
     // LCP can occur multiple times so we debounce it
     const debouncedLCP = debounce(sendData, 3000)
 
-    // With the true flag, we meausre all previous occurences too, in case we start listening to late.
+    // With the true flag, we measure all previous occurences too, in case we start listening to late.
     getCLS(debouncedCLS, true)
     getFID(debouncedFID, true)
     getLCP(debouncedLCP, true)

From 65b9c276d6c7796d0440c8e80be75e840febec64 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:33:38 +0200
Subject: [PATCH 21/24] Update
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index ce6f4f7e3d6e0..8766321726cb8 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -89,6 +89,6 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
 
 export function onInitialClientRender(_, pluginOptions) {
   if (pluginOptions.enableWebVitalsTracking) {
-    sendWebVitals(pluginOptions.dataLayerName)
+    sendWebVitals()
   }
 }

From 69013e68d3d36d62ca8204b02fa2e01a59e7c97c Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 14:33:43 +0200
Subject: [PATCH 22/24] Update
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
---
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 8766321726cb8..a795157b8dd64 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -20,7 +20,7 @@ function sendWebVitals() {
     }
     listOfMetricsSend.add(data.name)
 
-    sendToGoogleAnalytics(data, win[dataLayerName])
+    sendToGoogleAnalytics(data)
   }
 
   return import(`web-vitals/base`).then(({ getLCP, getFID, getCLS }) => {

From 285a2a3aec5604da9d8c130d8c2efcdbefc78113 Mon Sep 17 00:00:00 2001
From: Michal Piechowiak <misiek.piechowiak@gmail.com>
Date: Tue, 15 Jun 2021 14:38:44 +0200
Subject: [PATCH 23/24] fix lint

---
 packages/gatsby-plugin-google-analytics/src/gatsby-browser.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index a795157b8dd64..7fc572f0e9b0e 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -13,7 +13,6 @@ function debounce(fn, timeout) {
 }
 
 function sendWebVitals() {
-
   function sendData(data) {
     if (listOfMetricsSend.has(data.name)) {
       return

From 1a15e08a12940e4816482abafb940ad51210185f Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Tue, 15 Jun 2021 15:34:29 +0200
Subject: [PATCH 24/24] don't load in dev

---
 .../gatsby-plugin-google-analytics/src/gatsby-browser.js    | 6 +++++-
 .../gatsby-plugin-google-tagmanager/src/gatsby-browser.js   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index 7fc572f0e9b0e..172d5eaeef4d0 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -87,7 +87,11 @@ export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
 }
 
 export function onInitialClientRender(_, pluginOptions) {
-  if (pluginOptions.enableWebVitalsTracking) {
+  if (
+    process.env.NODE_ENV === `production` &&
+    typeof ga === `function` &&
+    pluginOptions.enableWebVitalsTracking
+  ) {
     sendWebVitals()
   }
 }
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
index 833da1553a549..ae04cf6e50e5f 100644
--- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js
@@ -76,7 +76,11 @@ export function onRouteUpdate(_, pluginOptions) {
 }
 
 export function onInitialClientRender(_, pluginOptions) {
-  if (pluginOptions.enableWebVitalsTracking) {
+  // we only load the polyfill in production so we can't enable it in development
+  if (
+    process.env.NODE_ENV === `production` &&
+    pluginOptions.enableWebVitalsTracking
+  ) {
     sendWebVitals(pluginOptions.dataLayerName)
   }
 }