@graphcommerce/googletagmanager 8.1.0-canary.9 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # Change Log
 
+## 9.0.0-canary.101
+
+## 9.0.0-canary.100
+
+## 9.0.0-canary.99
+
+## 9.0.0-canary.98
+
+## 9.0.0-canary.97
+
+## 9.0.0-canary.96
+
+### Patch Changes
+
+- [#2403](https://github.com/graphcommerce-org/graphcommerce/pull/2403) [`9f01825`](https://github.com/graphcommerce-org/graphcommerce/commit/9f01825f9f4101ed009515735b75182673d942b5) - fix: Google tag manager noscript tag would output escaped html causing hydration errors ([@FrankHarland](https://github.com/FrankHarland))
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+## 9.0.0-canary.89
+
+## 9.0.0-canary.88
+
+## 9.0.0-canary.87
+
+## 9.0.0-canary.86
+
+## 9.0.0-canary.85
+
+## 9.0.0-canary.84
+
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
+## 9.0.0-canary.81
+
+## 9.0.0-canary.80
+
+## 9.0.0-canary.79
+
+## 9.0.0-canary.78
+
+## 9.0.0-canary.77
+
+## 9.0.0-canary.76
+
+## 9.0.0-canary.75
+
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+## 9.0.0-canary.72
+
+## 9.0.0-canary.71
+
+## 9.0.0-canary.70
+
+## 9.0.0-canary.69
+
+## 9.0.0-canary.68
+
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+## 9.0.0-canary.65
+
+## 9.0.0-canary.64
+
+## 9.0.0-canary.63
+
+## 9.0.0-canary.62
+
+## 9.0.0-canary.61
+
+## 9.0.0-canary.60
+
+### Patch Changes
+
+- [#2331](https://github.com/graphcommerce-org/graphcommerce/pull/2331) [`702bfc9`](https://github.com/graphcommerce-org/graphcommerce/commit/702bfc93566c9745546988e57988431d5d4d8cb0) - Moved plugins to new format ([@paales](https://github.com/paales))
+
+## 9.0.0-canary.59
+
+## 9.0.0-canary.58
+
+## 9.0.0-canary.57
+
+## 9.0.0-canary.56
+
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+### Patch Changes
+
+- [#2317](https://github.com/graphcommerce-org/graphcommerce/pull/2317) [`2f4a61d`](https://github.com/graphcommerce-org/graphcommerce/commit/2f4a61dfee853579c96fceb5351e459aa9524a60) - Moved import locations of Google Analytics and Google Tagmanager scripts to their recommended locations ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8
@@ -24,8 +220,7 @@
 
 ### Patch Changes
 
-- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer.
-  ([@paales](https://github.com/paales))
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer. ([@paales](https://github.com/paales))
 
 ## 8.0.5-canary.10
 
@@ -49,8 +244,7 @@
 
 ### Patch Changes
 
-- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer.
-  ([@paales](https://github.com/paales))
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer. ([@paales](https://github.com/paales))
 
 ## 8.0.5-canary.0
 
@@ -58,15 +252,13 @@
 
 ### Patch Changes
 
-- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events. ([@mikekeehnen](https://github.com/mikekeehnen))
 
 ## 8.0.4-canary.1
 
 ### Patch Changes
 
-- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events.
-  ([@mikekeehnen](https://github.com/mikekeehnen))
+- [#2158](https://github.com/graphcommerce-org/graphcommerce/pull/2158) [`34de808`](https://github.com/graphcommerce-org/graphcommerce/commit/34de8085e9352d1f3b20b26746685370ea10ab90) - Extracted the datalayer from the googleanalytics package and moved to google-datalayer package. Make sure Google Analytics and Google Tagmanager both can send events individually. Be able to configure the datalayer will send as GA4 or legacy GA3 events. ([@mikekeehnen](https://github.com/mikekeehnen))
 
 ## 8.0.4-canary.0
 
@@ -112,8 +304,7 @@
 
 ### Minor Changes
 
-- [#2127](https://github.com/graphcommerce-org/graphcommerce/pull/2127) [`124e6c9`](https://github.com/graphcommerce-org/graphcommerce/commit/124e6c92aa3b4b77f54235f0682c38438fd619b6) - Made all Magento dependencies optional in the `googleanalytics` and `googletagmanager` packages, allowing it to be installed in any project.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2127](https://github.com/graphcommerce-org/graphcommerce/pull/2127) [`124e6c9`](https://github.com/graphcommerce-org/graphcommerce/commit/124e6c92aa3b4b77f54235f0682c38438fd619b6) - Made all Magento dependencies optional in the `googleanalytics` and `googletagmanager` packages, allowing it to be installed in any project. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.0-canary.100
 

package/index.ts

@@ -1 +1 @@
-export * from './components'
+export {}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googletagmanager",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.101",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/google-datalayer": "8.1.0-canary.9"
+    "@graphcommerce/google-datalayer": "9.0.0-canary.101"
   },
   "devDependencies": {
     "@types/gapi.client.tagmanager": "^2.0.4"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/next-ui": "^9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/plugins/GoogleTagmanagerTag.tsx

@@ -1,22 +1,58 @@
-import type { PagesProps } from '@graphcommerce/framer-next-pages'
-import type { IfConfig, PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { GoogleTagManagerScript } from '../components/GoogleTagManagerScript'
-
-export const component = 'FramerNextPages'
-export const exported = '@graphcommerce/framer-next-pages'
-export const ifConfig: IfConfig = 'googleTagmanagerId'
+/* eslint-disable react/no-danger */
+/* eslint-disable @next/next/next-script-for-ga */
+/* eslint-disable @next/next/no-document-import-in-page */
+/* eslint-disable @next/next/no-before-interactive-script-outside-document */
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { storefrontConfig } from '@graphcommerce/next-ui/server'
+import type { DocumentProps } from 'next/document'
 
 export const config: PluginConfig = {
   type: 'component',
-  module: '@graphcommerce/framer-next-pages',
+  module: '@graphcommerce/next-ui/server',
   ifConfig: 'googleTagmanagerId',
 }
 
-export function FramerNextPages(props: PluginProps<PagesProps>) {
+export function DocumentBodyStart(props: PluginProps<DocumentProps>) {
+  const { Prev, ...rest } = props
+
+  const id =
+    storefrontConfig(rest.locale)?.googleTagmanagerId ??
+    import.meta.graphCommerce.googleTagmanagerId
+
+  if (!id) return <Prev {...rest} />
+
+  return (
+    <>
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${id}" height='0' width='0' style="display: none; visibility: hidden;"></iframe>`,
+        }}
+      />
+      <Prev {...rest} />
+    </>
+  )
+}
+
+export function DocumentHeadEnd(props: PluginProps<DocumentProps>) {
   const { Prev, ...rest } = props
+
+  const id =
+    storefrontConfig(rest.locale)?.googleTagmanagerId ??
+    import.meta.graphCommerce.googleTagmanagerId
+
   return (
     <>
-      <GoogleTagManagerScript />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','${id}');
+`,
+        }}
+      />
       <Prev {...rest} />
     </>
   )

package/plugins/tagmanagerEvent.ts

@@ -1,9 +1,11 @@
-import { googleEventNames, sendEvent } from '@graphcommerce/google-datalayer'
-import type { IfConfig, MethodPlugin } from '@graphcommerce/next-config'
+import { googleEventNames, type sendEvent as sendEventType } from '@graphcommerce/google-datalayer'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 
-export const func = 'sendEvent'
-export const exported = '@graphcommerce/google-datalayer/api/sendEvent'
-export const ifConfig: IfConfig = 'googleTagmanagerId'
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/google-datalayer',
+  ifConfig: 'googleTagmanagerId',
+}
 
 declare global {
   interface Window {
@@ -13,7 +15,7 @@ declare global {
 
 const ecommerceEvents = new RegExp(`${googleEventNames.join('|')}`, 'i')
 
-const tagmanagerEvent: MethodPlugin<typeof sendEvent> = (prev, eventName, eventData) => {
+export const sendEvent: FunctionPlugin<typeof sendEventType> = (prev, eventName, eventData) => {
   prev(eventName, eventData)
 
   if (ecommerceEvents.test(eventName)) {
@@ -24,5 +26,3 @@ const tagmanagerEvent: MethodPlugin<typeof sendEvent> = (prev, eventName, eventD
     window.dataLayer?.push({ event: eventName, ...eventData })
   }
 }
-
-export const plugin = tagmanagerEvent

package/components/GoogleTagManagerNoScript.tsx

@@ -1,4 +0,0 @@
-/** @deprecated Not needed anymore, please use the GoogleTagManagerScript component in your _app. */
-export function GoogleTagManagerNoScript() {
-  return null
-}

package/components/GoogleTagManagerScript.tsx

@@ -1,28 +0,0 @@
-import { useStorefrontConfig } from '@graphcommerce/next-ui'
-import Script from 'next/script'
-
-export function GoogleTagManagerScript() {
-  const id =
-    useStorefrontConfig().googleTagmanagerId ?? import.meta.graphCommerce.googleTagmanagerId
-
-  return (
-    <>
-      <Script id={`gtm-${id}`} strategy='afterInteractive'>{`
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer', '${id}');
-    `}</Script>
-      <noscript>
-        {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
-        <iframe
-          src={`https://www.googletagmanager.com/ns.html?id=${id}`}
-          height='0'
-          width='0'
-          style={{ display: 'none', visibility: 'hidden' }}
-        />
-      </noscript>
-    </>
-  )
-}

package/components/index.ts

@@ -1,2 +0,0 @@
-export * from './GoogleTagManagerScript'
-export * from './GoogleTagManagerNoScript'