@graphcommerce/googleanalytics 6.0.0-canary.37 → 6.0.0-canary.39

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.0-canary.39
+
+## 6.0.0-canary.38
+
+### Patch Changes
+
+- [#1835](https://github.com/graphcommerce-org/graphcommerce/pull/1835) [`393d62cf1`](https://github.com/graphcommerce-org/graphcommerce/commit/393d62cf1833a61eb98777b7eab91ea891668e57) - Analytics do not rely on env variable but use googleAnalyticsId config ([@paales](https://github.com/paales))
+
 ## 6.0.0-canary.37
 
 ## 6.0.0-canary.36

package/components/GoogleAnalyticsScript.tsx

@@ -1,19 +1,8 @@
-import { useRouter } from 'next/router'
+import { useI18nConfig } from '@graphcommerce/next-ui'
 import Script from 'next/script'
 
 export function GoogleAnalyticsScript() {
-  const gaEnv = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
-  const { locale } = useRouter()
-  let id = ''
-
-  if (!gaEnv) return null
-
-  if (gaEnv.startsWith('{') && locale) {
-    const GAConfig = JSON.parse(gaEnv)
-    id = GAConfig[locale]
-  } else {
-    id = gaEnv
-  }
+  const id = useI18nConfig().googleAnalyticsId ?? import.meta.graphCommerce.googleAnalyticsId
 
   return (
     <>

package/events/gtagAddPaymentInfo/gtagAddPaymentInfo.ts

@@ -1,24 +1,22 @@
 import { GtagAddPaymentInfoFragment } from './GtagAddPaymentInfo.gql'
 
 export function gtagAddPaymentInfo<C extends GtagAddPaymentInfoFragment>(cart?: C | null) {
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    globalThis.gtag?.('event', 'add_payment_info', {
-      currency: cart?.prices?.grand_total?.currency,
-      value: cart?.prices?.grand_total?.value,
-      coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
-      payment_type: cart?.selected_payment_method?.code,
-      items: cart?.items?.map((item) => ({
-        item_id: item?.product.sku,
-        item_name: item?.product.name,
-        currency: item?.prices?.price.currency,
-        discount: item?.prices?.discounts?.reduce(
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          (sum, discount) => sum + (discount?.amount?.value ?? 0),
-          0,
-        ),
-        price: item?.prices?.price.value,
-        quantity: item?.quantity,
-      })),
-    })
-  }
+  globalThis.gtag?.('event', 'add_payment_info', {
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    payment_type: cart?.selected_payment_method?.code,
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })
 }

package/events/gtagAddPurchaseInfo/gtagAddPurchaseInfo.ts

@@ -4,26 +4,24 @@ export function gtagAddPurchaseInfo(
   orderNumber: string,
   cart: PaymentMethodContextFragment | null | undefined,
 ) {
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    globalThis.gtag?.('event', 'purchase', {
-      transaction_id: orderNumber,
-      currency: cart?.prices?.grand_total?.currency,
-      value: cart?.prices?.grand_total?.value,
-      coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
-      payment_type: cart?.selected_payment_method?.code,
-      tax: cart?.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
-      items: cart?.items?.map((item) => ({
-        item_id: item?.product.sku,
-        item_name: item?.product.name,
-        currency: item?.prices?.price.currency,
-        discount: item?.prices?.discounts?.reduce(
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          (sum, discount) => sum + (discount?.amount?.value ?? 0),
-          0,
-        ),
-        price: item?.prices?.price.value,
-        quantity: item?.quantity,
-      })),
-    })
-  }
+  globalThis.gtag?.('event', 'purchase', {
+    transaction_id: orderNumber,
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    payment_type: cart?.selected_payment_method?.code,
+    tax: cart?.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })
 }

package/events/gtagAddToCart/gtagAddToCart.ts

@@ -8,33 +8,30 @@ export const gtagAddToCart = (
   result: FetchResult<AddProductsToCartMutation>,
   variables: AddProductsToCartMutationVariables,
 ) => {
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    const addedItem = result.data?.addProductsToCart?.cart.items?.slice(-1)[0]
+  const addedItem = result.data?.addProductsToCart?.cart.items?.slice(-1)[0]
 
-    if (addedItem && addedItem.prices && addedItem.prices.row_total_including_tax.value) {
-      // we need to manually calculate pricePerItemInclTax (https://github.com/magento/magento2/issues/33848)
-      const pricePerItemInclTax =
-        addedItem.prices.row_total_including_tax.value / addedItem.quantity
-      const addToCartValue = pricePerItemInclTax * variables.cartItems[0].quantity
+  if (addedItem && addedItem.prices && addedItem.prices.row_total_including_tax.value) {
+    // we need to manually calculate pricePerItemInclTax (https://github.com/magento/magento2/issues/33848)
+    const pricePerItemInclTax = addedItem.prices.row_total_including_tax.value / addedItem.quantity
+    const addToCartValue = pricePerItemInclTax * variables.cartItems[0].quantity
 
-      globalThis.gtag?.('event', 'add_to_cart', {
-        currency: addedItem?.prices?.price.currency,
-        value: addToCartValue,
-        items: [
-          {
-            item_id: addedItem?.product.sku,
-            item_name: addedItem?.product.name,
-            currency: addedItem?.prices?.price.currency,
-            price: pricePerItemInclTax,
-            quantity: variables.cartItems[0].quantity,
-            discount: addedItem?.prices?.discounts?.reduce(
-              // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-              (sum, discount) => sum + (discount?.amount?.value ?? 0),
-              0,
-            ),
-          },
-        ],
-      })
-    }
+    globalThis.gtag?.('event', 'add_to_cart', {
+      currency: addedItem?.prices?.price.currency,
+      value: addToCartValue,
+      items: [
+        {
+          item_id: addedItem?.product.sku,
+          item_name: addedItem?.product.name,
+          currency: addedItem?.prices?.price.currency,
+          price: pricePerItemInclTax,
+          quantity: variables.cartItems[0].quantity,
+          discount: addedItem?.prices?.discounts?.reduce(
+            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+            (sum, discount) => sum + (discount?.amount?.value ?? 0),
+            0,
+          ),
+        },
+      ],
+    })
   }
 }

package/events/gtagBeginCheckout/gtagBeginCheckout.ts

@@ -1,24 +1,21 @@
 import { GtagBeginCheckoutFragment } from './GtagBeginCheckout.gql'
 
 export function gtagBeginCheckout<C extends GtagBeginCheckoutFragment>(cart?: C | null) {
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    globalThis.gtag?.('event', 'begin_checkout', {
-      currency: cart?.prices?.grand_total?.currency,
-      value: cart?.prices?.grand_total?.value,
-      coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
-      items: cart?.items?.map((item) => ({
-        item_id: item?.product.sku,
-        item_name: item?.product.name,
-        currency: item?.prices?.price.currency,
-        discount: item?.prices?.discounts?.reduce(
-          (sum, discount) => sum + (discount?.amount?.value ?? 0),
-          0,
-        ),
-        item_variant:
-          item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
-        price: item?.prices?.price.value,
-        quantity: item?.quantity,
-      })),
-    })
-  }
+  globalThis.gtag?.('event', 'begin_checkout', {
+    currency: cart?.prices?.grand_total?.currency,
+    value: cart?.prices?.grand_total?.value,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code),
+    items: cart?.items?.map((item) => ({
+      item_id: item?.product.sku,
+      item_name: item?.product.name,
+      currency: item?.prices?.price.currency,
+      discount: item?.prices?.discounts?.reduce(
+        (sum, discount) => sum + (discount?.amount?.value ?? 0),
+        0,
+      ),
+      item_variant: item?.__typename === 'ConfigurableCartItem' ? item.configured_variant.sku : '',
+      price: item?.prices?.price.value,
+      quantity: item?.quantity,
+    })),
+  })
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.37",
+  "version": "6.0.0-canary.39",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,18 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-mesh": "6.0.0-canary.37",
-    "@graphcommerce/magento-cart": "6.0.0-canary.37",
-    "@graphcommerce/magento-cart-payment-method": "6.0.0-canary.37",
-    "@graphcommerce/magento-cart-shipping-method": "6.0.0-canary.37",
-    "@graphcommerce/magento-product": "6.0.0-canary.37",
-    "@graphcommerce/next-config": "6.0.0-canary.37",
-    "@graphcommerce/next-ui": "6.0.0-canary.37"
+    "@graphcommerce/graphql-mesh": "6.0.0-canary.39",
+    "@graphcommerce/magento-cart": "6.0.0-canary.39",
+    "@graphcommerce/magento-cart-payment-method": "6.0.0-canary.39",
+    "@graphcommerce/magento-cart-shipping-method": "6.0.0-canary.39",
+    "@graphcommerce/magento-product": "6.0.0-canary.39",
+    "@graphcommerce/next-config": "6.0.0-canary.39",
+    "@graphcommerce/next-ui": "6.0.0-canary.39"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.37",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.37",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.37",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.39",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.39",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.39",
     "@types/gtag.js": "^0.0.12"
   },
   "peerDependencies": {

package/plugins/GaFramerNextPages.tsx

@@ -6,30 +6,15 @@ export const component = 'FramerNextPages'
 export const exported = '@graphcommerce/framer-next-pages'
 export const ifConfig: IfConfig = 'googleAnalyticsId'
 
-let warned = false
-
 function GaFramerNextPages(props: PluginProps<PagesProps>) {
   const { Prev, ...rest } = props
 
-  if (process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS) {
-    return (
-      <>
-        <GoogleAnalyticsScript />
-        <Prev {...rest} />
-      </>
-    )
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warned) {
-      console.info(
-        '[@graphcommerce/googleanalytics]: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS not found',
-      )
-      warned = true
-    }
-  }
-
-  return <Prev {...rest} />
+  return (
+    <>
+      <GoogleAnalyticsScript />
+      <Prev {...rest} />
+    </>
+  )
 }
 
 export const Plugin = GaFramerNextPages