@graphcommerce/google-datalayer 8.0.5-canary.0 → 8.0.5-canary.1

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -1,13 +1,13 @@
 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 { PluginProps } from '@graphcommerce/next-config'
-import { addPaymentInfo } from '../events/add_payment_info'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartToAddPaymentInfo } from '../mapping/cartToAddPaymentInfo/cartToAddPaymentInfo'
 
 export const component = 'PaymentMethodButton'
 export const exported = '@graphcommerce/magento-cart-payment-method'
 
-// @todo This plugin can probably be migrated to the actual form that is submitted.
 function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>) {
   const { Prev, onSubmitSuccessful, ...rest } = props
   const methodContext = useCartQuery(GetPaymentMethodContextDocument)
@@ -16,7 +16,9 @@ function GoogleDatalayerPaymentMethodButton(props: PluginProps<PaymentMethodButt
     <Prev
       {...rest}
       onSubmitSuccessful={() => {
-        addPaymentInfo(methodContext.data?.cart)
+        if (methodContext.data?.cart) {
+          sendEvent('add_payment_info', cartToAddPaymentInfo(methodContext.data.cart))
+        }
         return onSubmitSuccessful?.()
       }}
     />

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -1,6 +1,8 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
 import type { PluginProps } from '@graphcommerce/next-config'
-import { purchase } from '../events/purchase'
+import { purchase } from '../mapping/orderToPurchase'
+import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
+import { sendEvent } from '../api/sendEvent'
 
 export const component = 'PaymentMethodContextProvider'
 export const exported = '@graphcommerce/magento-cart-payment-method'
@@ -13,7 +15,7 @@ function GoogleDatalayerPaymentMethodContextProvider(
     <Prev
       {...rest}
       onSuccess={(orderNumber, cart) => {
-        purchase(orderNumber, cart)
+        sendEvent('purchase', orderToPurchase(orderNumber, cart))
         return onSuccess?.(orderNumber, cart)
       }}
     />

package/plugins/GoogleDatalayerProductListItem.tsx

@@ -1,24 +1,23 @@
-import { ProductListItemReal } from '@graphcommerce/magento-product'
-import { PluginProps } from '@graphcommerce/next-config'
+import { ProductListItem } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
 import { ComponentProps } from 'react'
-import { useListItemHandler } from '../components/AnalyticsItemList'
+import { useViewItemList } from '../components/DatalayerViewItemList'
 
-export const component = 'ProductListItemReal'
+export const component = 'ProductListItem'
 export const exported = '@graphcommerce/magento-product'
 
 function GoogleDatalayerProductListItem(
-  props: PluginProps<ComponentProps<typeof ProductListItemReal>>,
+  props: PluginProps<ComponentProps<typeof ProductListItem>>,
 ) {
   const { Prev, onClick, ...rest } = props
-  const { sku, price_range, name } = rest
-  const handle = useListItemHandler({ sku, price_range, name })
+  const selectItem = useViewItemList()
 
   return (
     <Prev
       {...rest}
       onClick={useEventCallback<NonNullable<typeof onClick>>((e, item) => {
-        handle()
+        if (item.sku) selectItem(item.sku)
         return onClick?.(e, item)
       })}
     />

package/plugins/GoogleDatalayerProductListItemsBase.tsx

@@ -1,6 +1,6 @@
 import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
-import { PluginProps } from '@graphcommerce/next-config'
-import { ItemList } from '../components/AnalyticsItemList'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { DatalayerViewItemList } from '../components/DatalayerViewItemList'
 
 export const component = 'ProductListItemsBase'
 export const exported = '@graphcommerce/magento-product'
@@ -8,9 +8,9 @@ export const exported = '@graphcommerce/magento-product'
 export function GoogleDatalayerProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
   const { Prev, ...rest } = props
   return (
-    <ItemList {...rest}>
+    <DatalayerViewItemList {...rest}>
       <Prev {...rest} />
-    </ItemList>
+    </DatalayerViewItemList>
   )
 }
 

package/plugins/GoogleDatalayerRemoveItemFromCart.tsx

@@ -1,24 +1,27 @@
-import type { RemoveItemFromCart as Original } from '@graphcommerce/magento-cart-items'
-import { ReactPlugin } from '@graphcommerce/next-config'
-import { removeFromCart } from '../events/remove_from_cart'
+import type { RemoveItemFromCart } from '@graphcommerce/magento-cart-items'
+import type { ReactPlugin } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
 
 export const component = 'RemoveItemFromCart'
 export const exported =
   '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCart'
 
-export const GoogleDatalayerRemoveItemFromCart: ReactPlugin<typeof Original> = (props) => {
-  const { Prev, uid, quantity, prices, product, buttonProps } = props
+export const GoogleDatalayerRemoveItemFromCart: ReactPlugin<typeof RemoveItemFromCart> = (
+  props,
+) => {
+  const { Prev, buttonProps } = props
 
   return (
     <Prev
       {...props}
-      product={product}
       buttonProps={{
+        ...buttonProps,
         onClick: (e) => {
-          removeFromCart({
-            __typename: 'Cart',
-            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
-          })
+          sendEvent(
+            'remove_from_cart',
+            cartItemToRemoveFromCart({ __typename: 'SimpleCartItem', ...props }),
+          )
           buttonProps?.onClick?.(e)
         },
       }}

package/plugins/GoogleDatalayerRemoveItemFromCartFab.tsx

@@ -1,24 +1,25 @@
 import type { RemoveItemFromCartFab as Original } from '@graphcommerce/magento-cart-items'
-import { ReactPlugin } from '@graphcommerce/next-config'
-import { removeFromCart } from '../events/remove_from_cart'
+import type { ReactPlugin } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
 
 export const component = 'RemoveItemFromCartFab'
 export const exported =
   '@graphcommerce/magento-cart-items/components/RemoveItemFromCart/RemoveItemFromCartFab'
 
 export const GoogleDatalayerRemoveItemFromCartFab: ReactPlugin<typeof Original> = (props) => {
-  const { Prev, uid, quantity, prices, product, fabProps } = props
+  const { Prev, fabProps } = props
 
   return (
     <Prev
       {...props}
-      product={product}
       fabProps={{
+        ...fabProps,
         onClick: (e) => {
-          removeFromCart({
-            __typename: 'Cart',
-            items: [{ uid, __typename: 'SimpleCartItem', product, quantity, prices }],
-          })
+          sendEvent(
+            'remove_from_cart',
+            cartItemToRemoveFromCart({ __typename: 'SimpleCartItem', ...props }),
+          )
           fabProps?.onClick?.(e)
         },
       }}

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -1,18 +1,24 @@
 import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
-import { PluginProps } from '@graphcommerce/next-config'
-import { addShippingInfo } from '../events/add_shipping_info'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartToAddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'
 
 export const component = 'ShippingMethodForm'
 export const exported = '@graphcommerce/magento-cart-shipping-method'
 
-/** When the ShippingMethod is submitted the result is sent to Google Analytics */
 export function GoogleDatalayerShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
   const { Prev, onComplete, ...rest } = props
   return (
     <Prev
       {...rest}
       onComplete={(result, variables) => {
-        addShippingInfo(result.data?.setShippingMethodsOnCart?.cart)
+        if (result.data?.setShippingMethodsOnCart?.cart) {
+          sendEvent(
+            'add_shipping_info',
+            cartToAddShippingInfo(result.data?.setShippingMethodsOnCart?.cart),
+          )
+        }
+
         return onComplete?.(result, variables)
       }}
     />

package/plugins/GoogleDatalayerUpdateItemQuantity.tsx

@@ -1,6 +1,8 @@
 import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
-import { PluginProps } from '@graphcommerce/next-config'
-import { event } from '../lib/event'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
+import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
 export const component = 'UpdateItemQuantity'
 export const exported =
@@ -21,39 +23,20 @@ function GoogleDatalayerUpdateItemQuantity(props: PluginProps<UpdateItemQuantity
         ...formOptions,
         onComplete: (data, variables) => {
           const original = formOptions?.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,
+          const itemInCart = data.data?.updateCartItems?.cart.items?.find(
+            (item) => item?.uid === variables.uid,
           )
 
-          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
+          const diffQuantity = variables.quantity - quantity
+          const absQuantity = Math.abs(diffQuantity)
+
+          if (!itemInCart?.quantity || diffQuantity === 0) return original
 
-            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,
-                  ),
-                },
-              ],
-            })
-          }
+          const items = [{ ...cartItemToDatalayerItem(itemInCart), quantity: absQuantity }]
+          sendEvent(diffQuantity < 0 ? 'remove_from_cart' : 'add_to_cart', {
+            ...datalayerItemsToCurrencyValue(items),
+            items,
+          })
 
           return original
         },

package/plugins/GoogleDatalayerViewItem.tsx

@@ -1,9 +1,9 @@
 import type { ProductPageMeta } from '@graphcommerce/magento-product'
-import { PluginProps } from '@graphcommerce/next-config'
+import type { PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import React, { useEffect } from 'react'
-import { productToItem } from '../lib'
-import { event } from '../lib/event'
+import { sendEvent } from '../api/sendEvent'
+import { productToViewItem } from '../mapping/productToViewItem/productToViewItem'
 
 export const component = 'ProductPageMeta'
 export const exported = '@graphcommerce/magento-product'
@@ -11,17 +11,9 @@ export const exported = '@graphcommerce/magento-product'
 /** When a product is added to the Cart, send a Google Analytics event */
 function GoogleDatalayerViewItem(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: [productToItem(product)],
-  })
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  useEffect(() => {
-    event('view_item', viewItem)
-  }, [viewItem])
+  const viewItem = useMemoObject(productToViewItem(product))
+  useEffect(() => sendEvent('view_item', viewItem), [viewItem])
 
   return <Prev {...props} />
 }

package/plugins/GoogleDatalayerWebVitals.tsx

@@ -0,0 +1,40 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { useEventCallback } from '@mui/material'
+import { useEffect } from 'react'
+import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB, Metric } from 'web-vitals/attribution'
+import { sendEvent } from '../api/sendEvent'
+
+export const component = 'FramerNextPages'
+export const exported = '@graphcommerce/framer-next-pages'
+export const ifConfig: IfConfig = 'dataLayer.coreWebVitals'
+
+/** When a product is added to the Cart, send a Google Analytics event.
+ *
+ * Based on this information: https://github.com/GoogleChrome/web-vitals?tab=readme-ov-file#send-the-results-to-google-analytics
+ */
+function GoogleDatalayerCoreWebVitals(props: PluginProps<PagesProps>) {
+  const { Prev, ...rest } = props
+
+  const sendCoreWebVitals = useEventCallback((m: Metric, debug_target?: string | undefined) => {
+    sendEvent(`cwv_${m.name.toLowerCase()}`, {
+      value: m.delta,
+      debug_target,
+      ...Object.fromEntries(Object.entries(m).map(([key, value]) => [`metric_${key}`, value])),
+    })
+  })
+
+  useEffect(() => {
+    const opts = { reportAllChanges: true }
+    onCLS((m) => sendCoreWebVitals(m, m.attribution.largestShiftTarget))
+    onFCP((m) => sendCoreWebVitals(m), opts)
+    onFID((m) => sendCoreWebVitals(m, m.attribution.eventTarget), opts)
+    onINP((m) => sendCoreWebVitals(m, m.attribution.eventTarget), opts)
+    onLCP((m) => sendCoreWebVitals(m, m.attribution.element), opts)
+    onTTFB((m) => sendCoreWebVitals(m), opts)
+  }, [sendCoreWebVitals])
+
+  return <Prev {...rest} />
+}
+
+export const Plugin = GoogleDatalayerCoreWebVitals

package/components/AnalyticsItemList.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 { Item, ProductToItemFragment, productToItem } from '../lib'
-import { event } from '../lib/event'
-
-export type UseViewItemListProps<P extends ProductToItemFragment = ProductToItemFragment> = {
-  title: string
-  items?: (P | null | undefined)[] | null
-  listId?: string
-}
-
-export type ViewItemList = {
-  item_list_id: string
-  item_list_name: string
-  items: Item[]
-}
-
-const GoogleTagManagerItemListContext = React.createContext<{
-  item_list_id: string
-  item_list_name: string
-}>({ item_list_id: '', item_list_name: '' })
-
-export function useListItemHandler(item: ProductToItemFragment) {
-  const { item_list_id, item_list_name } = useContext(GoogleTagManagerItemListContext)
-  return useEventCallback(() =>
-    event('select_item', {
-      item_list_id,
-      item_list_name,
-      items: productToItem(item),
-    }),
-  )
-}
-
-export function ItemList<P extends ProductToItemFragment = ProductToItemFragment>(
-  props: UseViewItemListProps<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 ? productToItem(item) : null)).filter(nonNullable) ?? [],
-  })
-
-  useEffect(() => {
-    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 (
-    <GoogleTagManagerItemListContext.Provider value={value}>
-      {children}
-    </GoogleTagManagerItemListContext.Provider>
-  )
-}

package/events/add_payment_info/AddPaymentInfoFragment.graphql

@@ -1,36 +0,0 @@
-fragment AddPaymentInfoFragment 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/add_payment_info/addPaymentInfo.ts

@@ -1,23 +0,0 @@
-import { event } from '../../lib/event'
-import { AddPaymentInfoFragment } from './AddPaymentInfoFragment.gql'
-
-export const addPaymentInfo = <C extends AddPaymentInfoFragment>(cart?: C | null) =>
-  event('add_payment_info', {
-    ...cart,
-    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/add_payment_info/index.ts

@@ -1,2 +0,0 @@
-export * from './addPaymentInfo'
-export * from './AddPaymentInfoFragment.gql'

package/events/add_shipping_info/AddSchippingInfoFragment.graphql

@@ -1,38 +0,0 @@
-fragment AddShippingInfoFragment 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/add_shipping_info/addShippingInfo.ts

@@ -1,22 +0,0 @@
-import { event } from '../../lib/event'
-import { AddShippingInfoFragment } from './AddSchippingInfoFragment.gql'
-
-export const addShippingInfo = <C extends AddShippingInfoFragment>(cart?: C) =>
-  event('add_shipping_info', {
-    ...cart,
-    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 && 'configured_variant' in item ? item.configured_variant.sku : '',
-      price: item?.prices?.price.value,
-      quantity: item?.quantity,
-    })),
-  })

package/events/add_shipping_info/index.ts

@@ -1,2 +0,0 @@
-export * from './addShippingInfo'
-export * from './AddSchippingInfoFragment.gql'

package/events/add_to_cart/AddToCartFragment.graphql

@@ -1,30 +0,0 @@
-fragment AddToCartFragment on Cart @inject(into: ["CartItemCountChanged"]) {
-  items {
-    quantity
-    product {
-      sku
-      name
-    }
-    prices {
-      discounts {
-        amount {
-          currency
-          value
-        }
-      }
-      row_total_including_tax {
-        currency
-        value
-      }
-      price {
-        currency
-        value
-      }
-    }
-  }
-  prices {
-    grand_total {
-      currency
-    }
-  }
-}

package/events/add_to_cart/addToCart.ts

@@ -1,58 +0,0 @@
-import type { FetchResult } from '@graphcommerce/graphql'
-import {
-  AddProductsToCartFields,
-  AddProductsToCartMutation,
-  findAddedItems,
-  toUserErrors,
-} from '@graphcommerce/magento-product'
-import { nonNullable } from '@graphcommerce/next-ui'
-import { event } from '../../lib/event'
-
-export const addToCart = (
-  result: FetchResult<AddProductsToCartMutation>,
-  variables: AddProductsToCartFields,
-) => {
-  const { data, errors } = result
-  const cart = data?.addProductsToCart?.cart
-
-  const addedItems = findAddedItems(data, variables)
-
-  const items = addedItems
-    .map(({ itemVariable, itemInCart }) => {
-      if (!itemInCart) return null
-      const { product, prices } = itemInCart
-      return {
-        item_id: product.sku,
-        item_name: product.name,
-        currency: prices?.price.currency,
-        price: (prices?.row_total_including_tax.value ?? 1) / itemInCart.quantity,
-        quantity: itemVariable.quantity,
-        discount: prices?.discounts?.reduce(
-          (sum, discount) => sum + (discount?.amount?.value ?? 0) / itemVariable.quantity,
-          0,
-        ),
-      }
-    })
-    .filter(nonNullable)
-
-  const userErrors = toUserErrors(result.data)
-  if ((errors && errors.length > 0) || userErrors.length > 0) {
-    event('add_to_cart_error', {
-      userErrors: userErrors?.map((e) => e.message),
-      errors: errors?.map((e) => e.message),
-      variables,
-    })
-  }
-
-  if (!items.length) return
-
-  event('add_to_cart', {
-    currency: cart?.prices?.grand_total?.currency,
-    value: addedItems.reduce(
-      (sum, { itemVariable, itemInCart }) =>
-        sum + (itemInCart?.prices?.row_total_including_tax.value ?? 1) / itemVariable.quantity,
-      0,
-    ),
-    items,
-  })
-}

package/events/add_to_cart/index.ts

@@ -1,2 +0,0 @@
-export * from './addToCart'
-export * from './AddToCartFragment.gql'