@graphcommerce/googleanalytics 8.1.0-canary.47 → 8.1.0-canary.49

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 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

package/index.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.47",
+  "version": "8.1.0-canary.49",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/google-datalayer": "8.1.0-canary.47"
+    "@graphcommerce/google-datalayer": "8.1.0-canary.49"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.47",
-    "@graphcommerce/graphql-mesh": "^8.1.0-canary.47",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.47",
-    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.47",
-    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.47",
-    "@graphcommerce/magento-product": "^8.1.0-canary.47",
-    "@graphcommerce/next-config": "^8.1.0-canary.47",
-    "@graphcommerce/next-ui": "^8.1.0-canary.47",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.47",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.47",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.49",
+    "@graphcommerce/graphql-mesh": "^8.1.0-canary.49",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.49",
+    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.49",
+    "@graphcommerce/magento-cart-shipping-method": "^8.1.0-canary.49",
+    "@graphcommerce/magento-product": "^8.1.0-canary.49",
+    "@graphcommerce/next-config": "^8.1.0-canary.49",
+    "@graphcommerce/next-ui": "^8.1.0-canary.49",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.49",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.49",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/plugins/GoogleAnalyticsTag.tsx

@@ -1,23 +1,36 @@
-import type { PagesProps } from '@graphcommerce/framer-next-pages'
-import type { IfConfig, PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { GoogleAnalyticsScript } from '../components/GoogleAnalyticsScript'
-
-export const component = 'FramerNextPages'
-export const exported = '@graphcommerce/framer-next-pages'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
+/* eslint-disable @next/next/no-document-import-in-page */
+/* eslint-disable @next/next/next-script-for-ga */
+/* eslint-disable react/no-danger */
+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: 'googleAnalyticsId',
 }
 
-export function FramerNextPages(props: PluginProps<PagesProps>) {
+export function DocumentHeadEnd(props: PluginProps<DocumentProps>) {
   const { Prev, ...rest } = props
 
+  const id =
+    storefrontConfig(rest.locale)?.googleAnalyticsId ?? import.meta.graphCommerce.googleAnalyticsId
+
   return (
     <>
-      <GoogleAnalyticsScript />
+      <script async src='https://www.googletagmanager.com/gtag/js?id=G-E0275MGY12' />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', '${id}');
+`,
+        }}
+      />
       <Prev {...rest} />
     </>
   )

package/components/GoogleAnalyticsScript.tsx

@@ -1,21 +0,0 @@
-import { useStorefrontConfig } from '@graphcommerce/next-ui'
-import Script from 'next/script'
-
-export function GoogleAnalyticsScript() {
-  const id = useStorefrontConfig().googleAnalyticsId ?? import.meta.graphCommerce.googleAnalyticsId
-
-  return (
-    <>
-      <Script
-        strategy='afterInteractive'
-        src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
-      />
-      <Script id='gtag' strategy='afterInteractive'>{`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${id}', { 'debug_mode':true });
-      `}</Script>
-    </>
-  )
-}

package/components/index.ts

@@ -1 +0,0 @@
-export * from './GoogleAnalyticsScript'