@graphcommerce/googleanalytics 8.0.4-canary.0 → 8.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 8.0.4
+
+### 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))
+
+## 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))
+
 ## 8.0.4-canary.0
 
 ## 8.0.3

package/README.md

@@ -20,3 +20,7 @@ Besides the GA4 integration it also tracks the following events:
 
 Configure the following ([configuration values](./Config.graphqls)) in your
 graphcommerce.config.js
+
+Make sure you also configure the 'Page changes based on browser history events.'
+configuration in Google Analytics, see
+[docs](https://developers.google.com/analytics/devguides/collection/ga4/single-page-applications?implementation=browser-history#implement_single-page_application_measurement).

package/components/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/googleanalytics",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.4-canary.0",
+  "version": "8.0.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -14,17 +14,20 @@
   "devDependencies": {
     "@types/gtag.js": "^0.0.18"
   },
+  "dependencies": {
+    "@graphcommerce/google-datalayer": "8.0.4"
+  },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.4-canary.0",
-    "@graphcommerce/graphql-mesh": "^8.0.4-canary.0",
-    "@graphcommerce/magento-cart": "^8.0.4-canary.0",
-    "@graphcommerce/magento-cart-payment-method": "^8.0.4-canary.0",
-    "@graphcommerce/magento-cart-shipping-method": "^8.0.4-canary.0",
-    "@graphcommerce/magento-product": "^8.0.4-canary.0",
-    "@graphcommerce/next-config": "^8.0.4-canary.0",
-    "@graphcommerce/next-ui": "^8.0.4-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^8.0.4-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^8.0.4-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^8.0.4",
+    "@graphcommerce/graphql-mesh": "^8.0.4",
+    "@graphcommerce/magento-cart": "^8.0.4",
+    "@graphcommerce/magento-cart-payment-method": "^8.0.4",
+    "@graphcommerce/magento-cart-shipping-method": "^8.0.4",
+    "@graphcommerce/magento-product": "^8.0.4",
+    "@graphcommerce/next-config": "^8.0.4",
+    "@graphcommerce/next-ui": "^8.0.4",
+    "@graphcommerce/prettier-config-pwa": "^8.0.4",
+    "@graphcommerce/typescript-config-pwa": "^8.0.4",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/components/GoogleAnalyticsItemList.tsx

@@ -1,63 +0,0 @@
-import { nonNullable, useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback } from '@mui/material'
-import React, { useContext, useEffect, useMemo } from 'react'
-import { ProductToGtagItemFragment } from '../events/productToGtagItem/ProductToGtagItem.gql'
-import { GtagItem, productToGtagItem } from '../events/productToGtagItem/productToGtagItem'
-
-export type UseGtagViewItemListProps<
-  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
-> = {
-  title: string
-  items?: (P | null | undefined)[] | null
-  listId?: string
-}
-
-export type ViewItemList = {
-  item_list_id: string
-  item_list_name: string
-  items: GtagItem[]
-}
-
-const GoogleAnalyticsItemListContext = React.createContext<{
-  item_list_id: string
-  item_list_name: string
-}>({ item_list_id: '', item_list_name: '' })
-
-export function useGoogleAnalyticsListItemHandler(item: ProductToGtagItemFragment) {
-  const { item_list_id, item_list_name } = useContext(GoogleAnalyticsItemListContext)
-  return useEventCallback(() =>
-    globalThis.gtag?.('event', 'select_item', {
-      item_list_id,
-      item_list_name,
-      items: productToGtagItem(item),
-    }),
-  )
-}
-
-export function GoogleAnalyticsItemList<
-  P extends ProductToGtagItemFragment = ProductToGtagItemFragment,
->(props: UseGtagViewItemListProps<P> & { children: React.ReactNode }) {
-  const { title, items, listId, children } = props
-
-  const eventData: ViewItemList = useMemoObject({
-    item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
-    item_list_name: title,
-    items: items?.map((item) => (item ? productToGtagItem(item) : null)).filter(nonNullable) ?? [],
-  })
-
-  useEffect(() => globalThis.gtag?.('event', 'view_item_list', eventData), [eventData])
-
-  const value = useMemo(
-    () => ({
-      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
-      item_list_name: title ?? listId,
-    }),
-    [listId, title],
-  )
-
-  return (
-    <GoogleAnalyticsItemListContext.Provider value={value}>
-      {children}
-    </GoogleAnalyticsItemListContext.Provider>
-  )
-}

package/events/gtagAddPaymentInfo/GtagAddPaymentInfo.graphql

@@ -1,36 +0,0 @@
-fragment GtagAddPaymentInfo on Cart
-@inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
-  items {
-    uid
-    prices {
-      price {
-        currency
-        value
-      }
-      discounts {
-        amount {
-          currency
-          value
-        }
-      }
-    }
-    quantity
-    product {
-      uid
-      name
-      sku
-    }
-  }
-  applied_coupons {
-    code
-  }
-  prices {
-    grand_total {
-      currency
-      value
-    }
-  }
-  selected_payment_method {
-    code
-  }
-}

package/events/gtagAddPaymentInfo/gtagAddPaymentInfo.ts

@@ -1,22 +0,0 @@
-import { GtagAddPaymentInfoFragment } from './GtagAddPaymentInfo.gql'
-
-export function gtagAddPaymentInfo<C extends GtagAddPaymentInfoFragment>(cart?: C | null) {
-  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

@@ -1,27 +0,0 @@
-import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
-
-export function gtagAddPurchaseInfo(
-  orderNumber: string,
-  cart: PaymentMethodContextFragment | null | undefined,
-) {
-  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/gtagAddShippingInfo/GtagAddShippingInfo.graphql

@@ -1,38 +0,0 @@
-fragment GtagAddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"]) {
-  prices {
-    grand_total {
-      currency
-      value
-    }
-  }
-  applied_coupons {
-    code
-  }
-  items {
-    __typename
-    uid
-    product {
-      uid
-      sku
-      name
-    }
-    prices {
-      price {
-        value
-        currency
-      }
-      discounts {
-        amount {
-          value
-        }
-      }
-    }
-    quantity
-    ... on ConfigurableCartItem {
-      configured_variant {
-        uid
-        sku
-      }
-    }
-  }
-}

package/events/gtagAddShippingInfo/gtagAddShippingInfo.ts

@@ -1,23 +0,0 @@
-import { GtagAddShippingInfoFragment } from './GtagAddShippingInfo.gql'
-
-export function gtagAddShippingInfo<C extends GtagAddShippingInfoFragment>(cart?: C | null) {
-  if (!cart) return
-
-  globalThis.gtag?.('event', 'add_shipping_info', {
-    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/events/gtagAddToCart/GtagAddToCart.graphql

@@ -1,20 +0,0 @@
-fragment GtagAddToCart on Cart @inject(into: ["CartItemCountChanged"]) {
-  items {
-    prices {
-      discounts {
-        amount {
-          currency
-          value
-        }
-      }
-      row_total_including_tax {
-        currency
-        value
-      }
-      price {
-        currency
-        value
-      }
-    }
-  }
-}

package/events/gtagAddToCart/gtagAddToCart.ts

@@ -1,34 +0,0 @@
-import type { FetchResult } from '@graphcommerce/graphql'
-import { AddProductsToCartMutation, AddProductsToCartFields } from '@graphcommerce/magento-product'
-
-export const gtagAddToCart = (
-  result: FetchResult<AddProductsToCartMutation>,
-  variables: AddProductsToCartFields,
-) => {
-  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
-
-    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.graphql

@@ -1,38 +0,0 @@
-fragment GtagBeginCheckout on Cart @inject(into: ["CartStartCheckout"]) {
-  prices {
-    grand_total {
-      currency
-      value
-    }
-  }
-  applied_coupons {
-    code
-  }
-  items {
-    __typename
-    uid
-    product {
-      uid
-      sku
-      name
-    }
-    prices {
-      price {
-        value
-        currency
-      }
-      discounts {
-        amount {
-          value
-        }
-      }
-    }
-    quantity
-    ... on ConfigurableCartItem {
-      configured_variant {
-        uid
-        sku
-      }
-    }
-  }
-}

package/events/gtagBeginCheckout/gtagBeginCheckout.ts

@@ -1,21 +0,0 @@
-import { GtagBeginCheckoutFragment } from './GtagBeginCheckout.gql'
-
-export function gtagBeginCheckout<C extends GtagBeginCheckoutFragment>(cart?: C | null) {
-  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/events/gtagRemoveFromCart/GtagRemoveFromCart.graphql

@@ -1,36 +0,0 @@
-fragment GtagRemoveFromCart on Cart @inject(into: ["CartItemCountChanged"]) {
-  __typename
-  prices {
-    grand_total {
-      currency
-      value
-    }
-  }
-  items {
-    __typename
-    uid
-    product {
-      uid
-      sku
-      name
-    }
-    prices {
-      price {
-        value
-        currency
-      }
-      discounts {
-        amount {
-          value
-        }
-      }
-    }
-    quantity
-    ... on ConfigurableCartItem {
-      configured_variant {
-        uid
-        sku
-      }
-    }
-  }
-}

package/events/gtagRemoveFromCart/gtagRemoveFromCart.ts

@@ -1,22 +0,0 @@
-import { GtagRemoveFromCartFragment } from './GtagRemoveFromCart.gql'
-
-export function gtagRemoveFromCart<C extends GtagRemoveFromCartFragment>(cart?: C | null) {
-  if (!cart) return
-
-  globalThis.gtag?.('event', 'remove_from_cart', {
-    currency: cart?.prices?.grand_total?.currency,
-    value: cart?.prices?.grand_total?.value,
-    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/events/gtagViewCart/GtagViewCart.graphql

@@ -1,35 +0,0 @@
-fragment GtagViewCart on Cart @inject(into: ["CartItemCountChanged"]) {
-  prices {
-    grand_total {
-      currency
-      value
-    }
-  }
-  items {
-    __typename
-    uid
-    product {
-      uid
-      sku
-      name
-    }
-    prices {
-      price {
-        value
-        currency
-      }
-      discounts {
-        amount {
-          value
-        }
-      }
-    }
-    quantity
-    ... on ConfigurableCartItem {
-      configured_variant {
-        uid
-        sku
-      }
-    }
-  }
-}

package/events/gtagViewCart/gtagViewCart.ts

@@ -1,22 +0,0 @@
-import { GtagViewCartFragment } from './GtagViewCart.gql'
-
-export function gtagViewCart<C extends GtagViewCartFragment>(cart?: C | null) {
-  if (!cart) return
-
-  globalThis.gtag?.('event', 'view_cart', {
-    currency: cart?.prices?.grand_total?.currency,
-    value: cart?.prices?.grand_total?.value,
-    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/events/productToGtagItem/ProductToGtagItem.graphql

@@ -1,20 +0,0 @@
-fragment ProductToGtagItem on ProductInterface {
-  name
-  sku
-  price_range {
-    minimum_price {
-      final_price {
-        value
-        currency
-      }
-      discount {
-        amount_off
-      }
-    }
-  }
-  categories {
-    uid
-    url_key
-    name
-  }
-}

package/events/productToGtagItem/productToGtagItem.ts

@@ -1,38 +0,0 @@
-import { ProductToGtagItemFragment } from './ProductToGtagItem.gql'
-
-export type GtagItem = {
-  item_id: string
-  item_name: string
-  affiliation?: string
-  coupon?: string
-  currency?: string
-  discount?: number
-  index?: number
-  item_brand?: string
-  item_category?: string
-  item_category2?: string
-  item_category3?: string
-  item_category4?: string
-  item_category5?: string
-  item_list_id?: string
-  item_list_name?: string
-  item_variant?: string
-  location_id?: string
-  price?: number
-  quantity?: number
-}
-
-export function productToGtagItem<P extends ProductToGtagItemFragment>(item: P): GtagItem {
-  return {
-    item_id: item.sku ?? '',
-    item_name: item.name ?? '',
-    price: item.price_range?.minimum_price.final_price.value ?? undefined,
-    currency: item.price_range?.minimum_price.final_price.currency ?? undefined,
-    discount: item.price_range?.minimum_price.discount?.amount_off ?? undefined,
-    item_category: item.categories?.[0]?.name ?? undefined,
-    item_category2: item.categories?.[1]?.name ?? undefined,
-    item_category3: item.categories?.[2]?.name ?? undefined,
-    item_category4: item.categories?.[3]?.name ?? undefined,
-    item_category5: item.categories?.[4]?.name ?? undefined,
-  }
-}

package/index.ts

@@ -1,6 +0,0 @@
-export * from './components'
-export * from './events/gtagBeginCheckout/gtagBeginCheckout'
-export * from './events/gtagAddPaymentInfo/gtagAddPaymentInfo'
-export * from './events/gtagAddPurchaseInfo/gtagAddPurchaseInfo'
-export * from './events/gtagAddShippingInfo/gtagAddShippingInfo'
-export * from './events/gtagAddToCart/gtagAddToCart'

package/plugins/GaAddProductsToCartForm.tsx

@@ -1,24 +0,0 @@
-import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { gtagAddToCart } from '../events/gtagAddToCart/gtagAddToCart'
-
-export const component = 'AddProductsToCartForm'
-export const exported = '@graphcommerce/magento-product'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-/** When a product is added to the Cart, send a Google Analytics event */
-function GaAddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
-  const { Prev, onComplete, ...rest } = props
-
-  return (
-    <Prev
-      {...rest}
-      onComplete={(data, variables) => {
-        gtagAddToCart(data, variables)
-        return onComplete?.(data, variables)
-      }}
-    />
-  )
-}
-
-export const Plugin = GaAddProductsToCartForm

package/plugins/GaCartStartCheckout.tsx

@@ -1,22 +0,0 @@
-import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { gtagBeginCheckout } from '../events/gtagBeginCheckout/gtagBeginCheckout'
-
-export const component = 'CartStartCheckout'
-export const exported = '@graphcommerce/magento-cart'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-export function GaCartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
-  const { Prev, onStart, ...rest } = props
-  return (
-    <Prev
-      {...rest}
-      onStart={(e, cart) => {
-        gtagBeginCheckout(cart)
-        return onStart?.(e, cart)
-      }}
-    />
-  )
-}
-
-export const Plugin = GaCartStartCheckout

package/plugins/GaCartStartCheckoutLinkOrButton.tsx

@@ -1,36 +0,0 @@
-import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEffect } from 'react'
-import { gtagBeginCheckout } from '../events/gtagBeginCheckout/gtagBeginCheckout'
-import { gtagViewCart } from '../events/gtagViewCart/gtagViewCart'
-
-export const component = 'CartStartCheckoutLinkOrButton'
-export const exported = '@graphcommerce/magento-cart'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-export function GaCartStartCheckoutLinkOrButton(
-  props: PluginProps<CartStartCheckoutLinkOrButtonProps>,
-) {
-  const { Prev, onStart, ...rest } = props
-
-  const cartObject = useMemoObject({ items: rest.items, prices: rest.prices })
-
-  useEffect(() => {
-    if (cartObject.items) {
-      gtagViewCart(cartObject)
-    }
-  }, [cartObject])
-
-  return (
-    <Prev
-      {...rest}
-      onStart={(e, cart) => {
-        gtagBeginCheckout(cart)
-        return onStart?.(e, cart)
-      }}
-    />
-  )
-}
-
-export const Plugin = GaCartStartCheckoutLinkOrButton

package/plugins/GaPaymentMethodButton.tsx

@@ -1,27 +0,0 @@
-import { useCartQuery } from '@graphcommerce/magento-cart'
-import { PaymentMethodButtonProps } from '@graphcommerce/magento-cart-payment-method'
-import { GetPaymentMethodContextDocument } from '@graphcommerce/magento-cart-payment-method/PaymentMethodContext/GetPaymentMethodContext.gql'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { gtagAddPaymentInfo } from '../events/gtagAddPaymentInfo/gtagAddPaymentInfo'
-
-export const component = 'PaymentMethodButton'
-export const exported = '@graphcommerce/magento-cart-payment-method'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-// @todo This plugin can probably be migrated to the actual form that is submitted.
-function GaPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
-  const { Prev, onSubmitSuccessful, ...rest } = props
-  const methodContext = useCartQuery(GetPaymentMethodContextDocument)
-
-  return (
-    <Prev
-      {...rest}
-      onSubmitSuccessful={() => {
-        gtagAddPaymentInfo(methodContext.data?.cart)
-        return onSubmitSuccessful?.()
-      }}
-    />
-  )
-}
-
-export const Plugin = GaPaymentMethodButton

package/plugins/GaPaymentMethodContextProvider.tsx

@@ -1,21 +0,0 @@
-import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
-import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { gtagAddPurchaseInfo } from '../events/gtagAddPurchaseInfo/gtagAddPurchaseInfo'
-
-export const component = 'PaymentMethodContextProvider'
-export const exported = '@graphcommerce/magento-cart-payment-method'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-function GaPaymentMethodContextProvider(props: PluginProps<PaymentMethodContextProviderProps>) {
-  const { Prev, onSuccess, ...rest } = props
-  return (
-    <Prev
-      {...rest}
-      onSuccess={(orderNumber, cart) => {
-        gtagAddPurchaseInfo(orderNumber, cart)
-        return onSuccess?.(orderNumber, cart)
-      }}
-    />
-  )
-}
-export const Plugin = GaPaymentMethodContextProvider

package/plugins/GaProductListItem.tsx

@@ -1,25 +0,0 @@
-import { ProductListItemProps } from '@graphcommerce/magento-product'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { useEventCallback } from '@mui/material'
-import { useGoogleAnalyticsListItemHandler } from '../components/GoogleAnalyticsItemList'
-
-export const component = 'ProductListItem'
-export const exported = '@graphcommerce/magento-product'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-function GaProductListItemsBase(props: PluginProps<ProductListItemProps>) {
-  const { Prev, onClick, ...rest } = props
-  const handle = useGoogleAnalyticsListItemHandler(rest)
-
-  return (
-    <Prev
-      {...rest}
-      onClick={useEventCallback((e, item) => {
-        handle()
-        onClick?.(e, item)
-      })}
-    />
-  )
-}
-
-export const Plugin = GaProductListItemsBase

package/plugins/GaProductListItemsBase.tsx

@@ -1,18 +0,0 @@
-import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { GoogleAnalyticsItemList } from '../components/GoogleAnalyticsItemList'
-
-export const component = 'ProductListItemsBase'
-export const exported = '@graphcommerce/magento-product'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-export function GaProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
-  const { Prev, ...rest } = props
-  return (
-    <GoogleAnalyticsItemList {...rest}>
-      <Prev {...rest} />
-    </GoogleAnalyticsItemList>
-  )
-}
-
-export const Plugin = GaProductListItemsBase

package/plugins/GaRemoveItemFromCart.tsx

@@ -1,29 +0,0 @@
-import type { RemoveItemFromCart } from '@graphcommerce/magento-cart-items'
-import { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
-import { gtagRemoveFromCart } from '../events/gtagRemoveFromCart/gtagRemoveFromCart'
-
-export const component = 'RemoveItemFromCart'
-export const exported = '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCart'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-export const GaRemoveItemFromCart: ReactPlugin<typeof RemoveItemFromCart> = (props) => {
-  const { Prev, uid, quantity, prices, product, buttonProps } = props
-
-  return (
-    <Prev
-      {...props}
-      product={product}
-      buttonProps={{
-        onClick: (e) => {
-          gtagRemoveFromCart({
-            __typename: 'Cart',
-            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
-          })
-          buttonProps?.onClick?.(e)
-        },
-      }}
-    />
-  )
-}
-
-export const Plugin = GaRemoveItemFromCart

package/plugins/GaRemoveItemFromCartFab.tsx

@@ -1,29 +0,0 @@
-import type { RemoveItemFromCartFab } from '@graphcommerce/magento-cart-items'
-import { IfConfig, ReactPlugin } from '@graphcommerce/next-config'
-import { gtagRemoveFromCart } from '../events/gtagRemoveFromCart/gtagRemoveFromCart'
-
-export const component = 'RemoveItemFromCartFab'
-export const exported = '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-export const GaRemoveItemFromCartFab: ReactPlugin<typeof RemoveItemFromCartFab> = (props) => {
-  const { Prev, uid, quantity, prices, product, fabProps } = props
-
-  return (
-    <Prev
-      {...props}
-      product={product}
-      fabProps={{
-        onClick: (e) => {
-          gtagRemoveFromCart({
-            __typename: 'Cart',
-            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
-          })
-          fabProps?.onClick?.(e)
-        },
-      }}
-    />
-  )
-}
-
-export const Plugin = GaRemoveItemFromCartFab

package/plugins/GaShippingMethodForm.tsx

@@ -1,23 +0,0 @@
-import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { gtagAddShippingInfo } from '../events/gtagAddShippingInfo/gtagAddShippingInfo'
-
-export const component = 'ShippingMethodForm'
-export const exported = '@graphcommerce/magento-cart-shipping-method'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-/** When the ShippingMethod is submitted the result is sent to Google Analytics */
-export function GaShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
-  const { Prev, onComplete, ...rest } = props
-  return (
-    <Prev
-      {...rest}
-      onComplete={(result, variables) => {
-        gtagAddShippingInfo(result.data?.setShippingMethodsOnCart?.cart)
-        return onComplete?.(result, variables)
-      }}
-    />
-  )
-}
-
-export const Plugin = GaShippingMethodForm

package/plugins/GaUpdateItemQuantity.tsx

@@ -1,61 +0,0 @@
-import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-
-export const component = 'UpdateItemQuantity'
-export const exported = '@graphcommerce/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-/**
- * When a product is added to the Cart, by using the + button on cart page, send a Google Analytics
- * event
- */
-function GaUpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
-  const { Prev, onComplete, quantity, ...rest } = props
-
-  return (
-    <Prev
-      {...rest}
-      quantity={quantity}
-      onComplete={(data, variables) => {
-        const original = onComplete?.(data, variables)
-        const diffQuantity = variables.quantity - quantity
-        if (diffQuantity === 0) return original
-
-        const itemId = variables.uid
-        const addedItem = data.data?.updateCartItems?.cart.items?.find(
-          (item) => item?.uid === itemId,
-        )
-
-        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 * diffQuantity
-
-          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.quantity,
-                discount: addedItem?.prices?.discounts?.reduce(
-                  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-                  (sum, discount) => sum + (discount?.amount?.value ?? 0),
-                  0,
-                ),
-              },
-            ],
-          })
-        }
-
-        return original
-      }}
-    />
-  )
-}
-
-export const Plugin = GaUpdateItemQuantity

package/plugins/GaViewItem.tsx

@@ -1,27 +0,0 @@
-import type { ProductPageMeta } from '@graphcommerce/magento-product'
-import { IfConfig, PluginProps } from '@graphcommerce/next-config'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEffect } from 'react'
-import { productToGtagItem } from '../events/productToGtagItem/productToGtagItem'
-
-export const component = 'ProductPageMeta'
-export const exported = '@graphcommerce/magento-product'
-export const ifConfig: IfConfig = 'googleAnalyticsId'
-
-/** When a product is added to the Cart, send a Google Analytics event */
-function GaViewItem(props: PluginProps<React.ComponentProps<typeof ProductPageMeta>>) {
-  const { Prev, product } = props
-  const { price_range } = product
-
-  const viewItem = useMemoObject({
-    currency: price_range.minimum_price.final_price.currency,
-    value: price_range.minimum_price.final_price.value,
-    items: [productToGtagItem(product)],
-  })
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  useEffect(() => globalThis.gtag?.('event', 'view_item', viewItem), [viewItem])
-
-  return <Prev {...props} />
-}
-
-export const Plugin = GaViewItem