@graphcommerce/google-datalayer 9.0.0-canary.72 → 9.0.0-canary.73

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/google-datalayer
 
+## 9.0.0-canary.73
+
+### Minor Changes
+
+- [#2337](https://github.com/graphcommerce-org/graphcommerce/pull/2337) [`18898df`](https://github.com/graphcommerce-org/graphcommerce/commit/18898df44b786dd68d8e6fec538e3db947c157e4) - All sendEvent calls are now the return type of useSendEvent, to allow plugins to use hooks themselves ([@Renzovh](https://github.com/Renzovh))
+
 ## 9.0.0-canary.72
 
 ## 9.0.0-canary.71

package/api/googleEventNames.ts

@@ -1,3 +1,17 @@
+import { Metric } from 'web-vitals'
+import type { AddPaymentInfo } from '../mapping/cartToAddPaymentInfo/cartToAddPaymentInfo'
+import type { AddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'
+import type { BeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
+import type { PurchaseOrRefund } from '../mapping/cartToPurchase/cartToPurchase'
+import type { ViewCart } from '../mapping/cartToViewCart/cartToViewCart'
+import type { DataLayerCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import type {
+  SelectItem,
+  ViewItemList,
+} from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
+import type { GoogleDatalayerItem } from '../mapping/productToDatalayerItem/productToDatalayerItem'
+import type { ViewItem } from '../mapping/productToViewItem/productToViewItem'
+
 export const googleEventNames = [
   'add_payment_info',
   'add_shipping_info',
@@ -37,3 +51,105 @@ export const googleEventNames = [
   'view_promotion',
   'view_search_results',
 ] as const
+
+/**
+ * @see https://developers.google.com/tag-platform/gtagjs/reference/events
+ */
+export type GoogleEventTypes = {
+  exception: { description?: string; fatal?: boolean }
+  share: { method?: string; content_type?: string; item_id?: string }
+
+  add_payment_info: AddPaymentInfo
+  add_shipping_info: AddShippingInfo
+  add_to_cart: ViewCart
+  add_to_wishlist: DataLayerCurrencyValue & { items: GoogleDatalayerItem[] }
+  begin_checkout: BeginCheckout
+
+  login: { method?: string }
+  sign_up: {
+    method?: string
+  }
+
+  page_view: {
+    page_location?: string
+    client_id?: string
+    language?: string
+    page_encoding?: string
+    page_title?: string
+    user_agent?: string
+  }
+
+  purchase: PurchaseOrRefund
+  refund: PurchaseOrRefund
+  remove_from_cart: ViewCart
+
+  select_content: {
+    content_type?: string
+    content_id?: string
+    data?: object
+  }
+  select_item: SelectItem
+
+  view_cart: ViewCart
+  view_item: ViewItem
+  view_item_list: ViewItemList
+
+  search: { search_term?: string }
+  view_search_results: { search_term?: string }
+
+  view_promotion: {
+    creative_name?: string
+    creative_slot?: string
+    promotion_id?: string
+    promotion_name?: string
+    items?: GoogleDatalayerItem[]
+  }
+  select_promotion: {
+    creative_name?: string
+    creative_slot?: string
+    promotion_id?: string
+    promotion_name?: string
+    items?: GoogleDatalayerItem[]
+  }
+
+  // Tutorial
+  tutorial_begin: object
+  tutorial_complete: object
+
+  // Gaming
+  earn_virtual_currency: { value?: string; virtual_currency_name?: string }
+  join_group: { group_id?: string }
+  level_end: { level_name?: string; success?: boolean }
+  level_start: { level_name?: string }
+  level_up: { level?: number; character?: string }
+  post_score: { score?: number; level?: number; character?: string }
+  spend_virtual_currency: {
+    value?: string
+    virtual_currency_name?: string
+    item_name?: string
+  }
+  unlock_achievement: { achievement_id: string }
+
+  // Leads
+  close_convert_lead: DataLayerCurrencyValue
+  close_unconvert_lead: DataLayerCurrencyValue & { unconvert_lead_reason?: string }
+  disqualify_lead: DataLayerCurrencyValue & { disqualified_lead_reason?: string }
+  generate_lead: DataLayerCurrencyValue & { lead_source?: string }
+  qualify_lead: DataLayerCurrencyValue
+  working_lead: DataLayerCurrencyValue & { lead_status?: string }
+
+  // Custom events
+  add_to_cart_error: {
+    userErrors?: string[]
+    errors?: string[]
+    variables?: object
+  }
+
+  // Core web vitals tracking.
+  [key: `cwv_${string}`]: {
+    value: Metric['delta']
+    debug_target?: string
+  } & {
+    [K in keyof Metric as K extends string ? `metric_${K}` : never]?: Metric[K]
+  }
+}

package/api/sendEvent.ts

@@ -1,12 +1,20 @@
-import { googleEventNames } from './googleEventNames'
+import { GoogleEventTypes } from './googleEventNames'
 
-export type EventMapFunctionType = (
-  eventName: (typeof googleEventNames)[number] | (string & Record<never, never>),
-  eventData: {
-    [key: string]: unknown
-  },
+export type SendEvent = (
+  eventName: Event | (string & Record<never, never>),
+  eventData: { [key: string]: unknown },
 ) => void
 
-export const sendEvent: EventMapFunctionType = (eventName, eventData) => {
+export function sendEvent<Event extends keyof GoogleEventTypes>(
+  eventName: Event,
+  eventData: GoogleEventTypes[Event],
+) {
   // This is a generic event handler and is plugins from google-analytics and google datalayer
 }
+
+export function useSendEvent() {
+  return <Event extends keyof GoogleEventTypes>(
+    eventName: Event,
+    eventData: GoogleEventTypes[Event],
+  ) => sendEvent<Event>(eventName, eventData)
+}

package/components/DatalayerViewItemList.tsx

@@ -1,8 +1,8 @@
-import { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { ProductItemsGridProps, useProductFiltersPro } from '@graphcommerce/magento-product'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
 import React, { useContext, useEffect } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import {
   productItemsToViewItemList,
   viewItemListToSelectItem,
@@ -28,10 +28,13 @@ export function DatalayerViewItemList(
   const { title: item_list_name, items, children } = props
   const item_list_id = item_list_name.toLowerCase().replace(/\s/g, '_')
 
+  const params = useProductFiltersPro(true)?.params
+
+  const sendEvent = useSendEvent()
   const viewItemList = useMemoObject(
-    productItemsToViewItemList(item_list_id, item_list_name, items),
+    productItemsToViewItemList(item_list_id, item_list_name, items, params),
   )
-  useEffect(() => sendEvent('view_item_list', viewItemList), [viewItemList])
+  useEffect(() => sendEvent('view_item_list', viewItemList), [sendEvent, viewItemList])
 
   const selectItem = useEventCallback((itemId: string) => {
     sendEvent('select_item', viewItemListToSelectItem(viewItemList, itemId))

package/mapping/cartItemToDatalayerItem/cartItemToDatalayerItem.ts

@@ -6,6 +6,7 @@ import { CartItem_DatalayerItemFragment } from './CartItem_DatalayerItem.gql'
 
 export function cartItemToDatalayerItem<P extends CartItem_DatalayerItemFragment>(
   item: P,
+  index: number,
 ): GoogleDatalayerItem {
   const discount = item.prices?.total_item_discount?.value
     ? item.prices.total_item_discount.value / item.quantity
@@ -14,14 +15,14 @@ export function cartItemToDatalayerItem<P extends CartItem_DatalayerItemFragment
   const price = (item?.prices?.price_including_tax?.value ?? 0) - discount
 
   return {
-    ...productToDatalayerItem(item.product),
+    ...productToDatalayerItem(item.product, index),
     currency: item.prices?.price.currency as string,
     discount,
     price,
     quantity: item.quantity,
     item_variant:
       item.__typename === 'ConfigurableCartItem'
-        ? item.configured_variant.sku ?? undefined
+        ? (item.configured_variant.sku ?? undefined)
         : undefined,
   }
 }

package/mapping/cartItemToRemoveFromCart/cartToRemoveFromCart.ts

@@ -5,9 +5,6 @@ import { CartItem_RemoveFromCartFragment } from './CartItem_RemoveFromCart.gql'
 export const cartItemToRemoveFromCart = <C extends CartItem_RemoveFromCartFragment>(
   cartItem: C,
 ) => {
-  const items = [cartItemToDatalayerItem(cartItem)]
-  return {
-    ...datalayerItemsToCurrencyValue(items),
-    items,
-  }
+  const items = [cartItemToDatalayerItem(cartItem, 0)]
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/mapping/cartToAddPaymentInfo/Cart_AddPaymentInfo.graphql

@@ -1,10 +1,10 @@
 fragment Cart_AddPaymentInfo on Cart
 @inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
+  ...Cart_ViewCart
   applied_coupons {
     code
   }
   selected_payment_method {
     code
   }
-  ...Cart_DatalayerItems
 }

package/mapping/cartToAddPaymentInfo/cartToAddPaymentInfo.ts

@@ -1,10 +1,17 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_AddPaymentInfoFragment } from './Cart_AddPaymentInfo.gql'
 
-export function cartToAddPaymentInfo<C extends Cart_AddPaymentInfoFragment>(cart: C) {
+export type AddPaymentInfo = ViewCart & {
+  coupon?: string
+  payment_type?: string
+}
+
+export function cartToAddPaymentInfo<C extends Cart_AddPaymentInfoFragment>(
+  cart: C,
+): AddPaymentInfo {
   return {
+    ...cartToViewCart(cart),
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
     payment_type: cart?.selected_payment_method?.code,
-    ...cartToDatalayerItems(cart),
   }
 }

package/mapping/cartToAddShippingInfo/Cart_AddShippingInfo.graphql

@@ -8,5 +8,5 @@ fragment Cart_AddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"])
       method_code
     }
   }
-  ...Cart_DatalayerItems
+  ...Cart_ViewCart
 }

package/mapping/cartToAddShippingInfo/cartToAddShippingInfo.ts

@@ -1,15 +1,23 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_AddShippingInfoFragment } from './Cart_AddShippingInfo.gql'
 
-export function cartToAddShippingInfo<C extends Cart_AddShippingInfoFragment>(cart: C) {
+export type AddShippingInfo = ViewCart & {
+  coupon?: string
+  shipping_tier?: string
+}
+
+export function cartToAddShippingInfo<C extends Cart_AddShippingInfoFragment>(
+  cart: C,
+): AddShippingInfo {
   return {
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    shipping_tier: cart?.shipping_addresses
+    shipping_tier: filterNonNullableKeys(cart?.shipping_addresses, ['selected_shipping_method'])
       .map(
-        (address) =>
-          `${address?.selected_shipping_method?.carrier_code}_${address?.selected_shipping_method?.method_code}`,
+        ({ selected_shipping_method: { carrier_code, method_code } }) =>
+          `${carrier_code}_${method_code}`,
       )
       .join(' '),
-    ...cartToDatalayerItems(cart),
+    ...cartToViewCart(cart),
   }
 }

package/mapping/cartToBeginCheckout/Cart_BeginCheckout.graphql

@@ -1,6 +1,6 @@
 fragment Cart_BeginCheckout on Cart @inject(into: ["CartStartCheckout"]) {
+  ...Cart_ViewCart
   applied_coupons {
     code
   }
-  ...Cart_DatalayerItems
 }

package/mapping/cartToBeginCheckout/cartToBeginCheckout.ts

@@ -1,9 +1,13 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
 import { Cart_BeginCheckoutFragment } from './Cart_BeginCheckout.gql'
 
-export function cartToBeginCheckout<C extends Cart_BeginCheckoutFragment>(cart: C) {
+export type BeginCheckout = ViewCart & {
+  coupon?: string
+}
+
+export function cartToBeginCheckout<C extends Cart_BeginCheckoutFragment>(cart: C): BeginCheckout {
   return {
     coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    ...cartToDatalayerItems(cart),
+    ...cartToViewCart(cart),
   }
 }

package/mapping/cartToPurchase/Cart_PurchaseEvent.graphql

@@ -0,0 +1,18 @@
+fragment Cart_PurchaseEvent on Cart
+@inject(into: ["PaymentMethodContext", "PaymentMethodUpdated"]) {
+  ...Cart_AddPaymentInfo
+  shipping_addresses {
+    selected_shipping_method {
+      price_excl_tax {
+        ...Money
+      }
+    }
+  }
+  prices {
+    applied_taxes {
+      amount {
+        ...Money
+      }
+    }
+  }
+}

package/mapping/cartToPurchase/cartToPurchase.ts

@@ -0,0 +1,28 @@
+import { cartToViewCart, ViewCart } from '../cartToViewCart/cartToViewCart'
+import { Cart_PurchaseEventFragment } from './Cart_PurchaseEvent.gql'
+
+export type PurchaseOrRefund = ViewCart & {
+  transaction_id: string
+  coupon?: string
+  shipping?: number
+  tax?: number
+}
+
+export function cartToPurchase<C extends Cart_PurchaseEventFragment>(
+  orderNumber: string,
+  cart: C | null | undefined,
+): PurchaseOrRefund {
+  // Although the fallback information is wrong, we find it to be more important to register a purchase even in the cart object is missing.
+  const base = cart ? cartToViewCart(cart) : { items: [], currency: '', value: 0 }
+
+  return {
+    transaction_id: orderNumber,
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
+    shipping: cart?.shipping_addresses.reduce(
+      (sum, address) => sum + (address?.selected_shipping_method?.price_excl_tax.value ?? 0),
+      0,
+    ),
+    tax: cart?.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
+    ...base,
+  }
+}

package/mapping/cartToViewCart/Cart_ViewCart.graphql

@@ -1,4 +1,11 @@
 fragment Cart_ViewCart on Cart @inject(into: ["CartItemCountChanged"]) {
   __typename
-  ...Cart_DatalayerItems
+  items {
+    ...CartItem_DatalayerItem
+  }
+  prices {
+    subtotal_including_tax {
+      currency
+    }
+  }
 }

package/mapping/cartToViewCart/cartToViewCart.ts

@@ -1,6 +1,15 @@
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { cartItemToDatalayerItem } from '../cartItemToDatalayerItem/cartItemToDatalayerItem'
+import {
+  DataLayerCurrencyValue,
+  datalayerItemsToCurrencyValue,
+} from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 import { Cart_ViewCartFragment } from './Cart_ViewCart.gql'
 
-export function cartToViewCart<C extends Cart_ViewCartFragment>(cart: C) {
-  return cartToDatalayerItems(cart)
+export type ViewCart = DataLayerCurrencyValue & { items: GoogleDatalayerItem[] }
+
+export function cartToViewCart<C extends Cart_ViewCartFragment>(cart: C): ViewCart {
+  const items = cart?.items?.filter(nonNullable).map(cartItemToDatalayerItem) ?? []
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue.ts

@@ -1,8 +1,15 @@
 import { GoogleDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
 
-export function datalayerItemsToCurrencyValue(items: GoogleDatalayerItem[]) {
+export type DataLayerCurrencyValue = {
+  currency: string
+  value: number
+}
+
+export function datalayerItemsToCurrencyValue(
+  items: GoogleDatalayerItem[],
+): DataLayerCurrencyValue {
   return {
-    currency: items[0].currency,
+    currency: items[0]?.currency ?? '',
     value: items.reduce((acc, item) => acc + (item.price ?? 0) * item.quantity, 0),
   }
 }

package/mapping/productItemsToViewItemList/productItemsToViewItemList.ts

@@ -1,22 +1,44 @@
-import { ProductListItemFragment } from '@graphcommerce/magento-product'
+import { ProductFilterParams, ProductListItemFragment } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
-import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import {
+  GoogleDatalayerItem,
+  productToDatalayerItem,
+} from '../productToDatalayerItem/productToDatalayerItem'
+
+export type ViewItemList = {
+  item_list_id: string
+  item_list_name: string
+  items: GoogleDatalayerItem[]
+  filter_params?: ProductFilterParams | null
+}
+
+export type SelectItem = {
+  item_list_id: string
+  item_list_name: string
+  items: GoogleDatalayerItem[]
+  filter_params?: ProductFilterParams | null
+}
 
 export function productItemsToViewItemList<P extends ProductListItemFragment>(
   item_list_id: string,
   item_list_name: string,
   items: Array<P | null | undefined> | null | undefined,
-) {
+  filter_params: ProductFilterParams | null | undefined,
+): ViewItemList {
   return {
     item_list_id,
     item_list_name,
-    items: items?.filter(nonNullable)?.map((item) => productToDatalayerItem(item)) ?? [],
+    items: (items ?? [])?.filter(nonNullable)?.map(productToDatalayerItem),
+    filter_params,
   }
 }
 
 export function viewItemListToSelectItem(
   viewItemList: ReturnType<typeof productItemsToViewItemList>,
   itemId: string,
-) {
-  return { ...viewItemList, items: viewItemList.items.filter((i) => i.item_id === itemId) }
+): SelectItem {
+  return {
+    ...viewItemList,
+    items: viewItemList.items.filter((i) => i.item_id === itemId),
+  }
 }

package/mapping/productToDatalayerItem/productToDatalayerItem.ts

@@ -2,14 +2,18 @@ import { productPageCategory } from '@graphcommerce/magento-product'
 import { nonNullable } from '@graphcommerce/next-ui'
 import { Product_DatalayerItemFragment } from './Product_DatalayerItem.gql'
 
+/**
+ * https://developers.google.com/tag-platform/gtagjs/reference/events#add_to_cart_item
+ */
 export type GoogleDatalayerItem = {
   item_id: string
+  item_uid: string
   item_name: string
   affiliation?: string
   coupon?: string
   currency?: string
   discount?: number
-  index?: number
+  index: number
   item_brand?: string
   item_category?: string
   item_category2?: string
@@ -20,27 +24,30 @@ export type GoogleDatalayerItem = {
   item_list_name?: string
   item_variant?: string
   location_id?: string
-  price?: number
+  price: number
   quantity: number
 }
 
 export function productToDatalayerItem<P extends Product_DatalayerItemFragment>(
   item: P,
+  index: number,
 ): GoogleDatalayerItem {
   const category = productPageCategory(item)
   const item_categories = Object.fromEntries(
     [...(category?.breadcrumbs?.map((b) => b?.category_name) ?? []), category?.name]
       .filter(nonNullable)
-      .map((name, index) => [`item_category${index > 0 ? index + 1 : ''}`, name]),
+      .map((name, idx) => [`item_category${idx > 0 ? idx + 1 : ''}`, name]),
   )
 
   return {
     item_id: item.sku ?? '',
+    item_uid: item.uid,
     item_name: item.name ?? '',
-    price: item.price_range?.minimum_price.final_price.value ?? undefined,
+    price: item.price_range?.minimum_price.final_price.value ?? 0,
     currency: item.price_range?.minimum_price.final_price.currency ?? undefined,
     discount: item.price_range?.minimum_price.discount?.amount_off ?? undefined,
     quantity: 1,
+    index,
     ...item_categories,
   }
 }

package/mapping/productToViewItem/productToViewItem.ts

@@ -1,11 +1,16 @@
-import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import { productToDatalayerItem } from '../productToDatalayerItem/productToDatalayerItem'
+import {
+  DataLayerCurrencyValue,
+  datalayerItemsToCurrencyValue,
+} from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import {
+  GoogleDatalayerItem,
+  productToDatalayerItem,
+} from '../productToDatalayerItem/productToDatalayerItem'
 import { Product_ViewItemFragment } from './Product_ViewItem.gql'
 
-export function productToViewItem<C extends Product_ViewItemFragment>(product: C) {
-  const items = [productToDatalayerItem(product)]
-  return {
-    ...datalayerItemsToCurrencyValue(items),
-    items,
-  }
+export type ViewItem = { items: GoogleDatalayerItem[] } & DataLayerCurrencyValue
+
+export function productToViewItem<C extends Product_ViewItemFragment>(product: C): ViewItem {
+  const items = [productToDatalayerItem(product, 0)]
+  return { ...datalayerItemsToCurrencyValue(items), items }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/google-datalayer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.72",
+  "version": "9.0.0-canary.73",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.72",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.72",
-    "@graphcommerce/magento-cart-payment-method": "^9.0.0-canary.72",
-    "@graphcommerce/magento-cart-shipping-method": "^9.0.0-canary.72",
-    "@graphcommerce/magento-product": "^9.0.0-canary.72",
-    "@graphcommerce/next-ui": "^9.0.0-canary.72",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.72",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.73",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.73",
+    "@graphcommerce/magento-cart-payment-method": "^9.0.0-canary.73",
+    "@graphcommerce/magento-cart-shipping-method": "^9.0.0-canary.73",
+    "@graphcommerce/magento-product": "^9.0.0-canary.73",
+    "@graphcommerce/next-ui": "^9.0.0-canary.73",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.73",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.73",
     "@mui/material": "^5.14.20",
     "next": "^14",
     "react": "^18.2.0",
@@ -37,6 +37,9 @@
     },
     "@graphcommerce/magento-product": {
       "optional": true
+    },
+    "@graphcommerce/magento-product-configurable": {
+      "optional": true
     }
   },
   "dependencies": {

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -5,7 +5,7 @@ import {
 } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { nonNullable } from '@graphcommerce/next-ui'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
 import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
@@ -18,6 +18,7 @@ export const config: PluginConfig = {
 export function AddProductsToCartForm(props: PluginProps<AddProductsToCartFormProps>) {
   const { Prev, onComplete, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -26,9 +27,12 @@ export function AddProductsToCartForm(props: PluginProps<AddProductsToCartFormPr
         const addedItems = findAddedItems(data, variables)
 
         const items = addedItems
-          .map(({ itemVariable, itemInCart }) => {
+          .map(({ itemVariable, itemInCart }, index) => {
             if (!itemInCart) return null
-            return { ...cartItemToDatalayerItem(itemInCart), quantity: itemVariable.quantity }
+            return {
+              ...cartItemToDatalayerItem(itemInCart, index),
+              quantity: itemVariable.quantity,
+            }
           })
           .filter(nonNullable)
 

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -2,7 +2,7 @@ import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEffect, useRef } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
 import { cartToViewCart } from '../mapping/cartToViewCart/cartToViewCart'
 
@@ -15,13 +15,14 @@ export function CartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
   const { Prev, onStart, ...rest } = props
 
   const send = useRef(false)
+  const sendEvent = useSendEvent()
   const viewCart = useMemoObject(cartToViewCart({ __typename: 'Cart', ...props }))
   useEffect(() => {
     if (!send.current) {
       sendEvent('view_cart', viewCart)
       send.current = true
     }
-  }, [viewCart])
+  }, [sendEvent, viewCart])
 
   return (
     <Prev

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -1,6 +1,6 @@
 import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
 
 export const config: PluginConfig = {
@@ -13,6 +13,7 @@ export function CartStartCheckoutLinkOrButton(
 ) {
   const { Prev, onStart, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}

package/plugins/GoogleDatalayerPaymentMethodButton.tsx

@@ -2,7 +2,7 @@ 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 type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToAddPaymentInfo } from '../mapping/cartToAddPaymentInfo/cartToAddPaymentInfo'
 
 export const config: PluginConfig = {
@@ -14,6 +14,7 @@ export function PaymentMethodButton(props: PluginProps<PaymentMethodButtonProps>
   const { Prev, onSubmitSuccessful, ...rest } = props
   const methodContext = useCartQuery(GetPaymentMethodContextDocument)
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}

package/plugins/GoogleDatalayerPaymentMethodContextProvider.tsx

@@ -1,7 +1,7 @@
 import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
-import { orderToPurchase } from '../mapping/orderToPurchase/orderToPurchase'
+import { useSendEvent } from '../api/sendEvent'
+import { cartToPurchase } from '../mapping/cartToPurchase/cartToPurchase'
 
 export const config: PluginConfig = {
   module: '@graphcommerce/magento-cart-payment-method',
@@ -12,11 +12,13 @@ export function PaymentMethodContextProvider(
   props: PluginProps<PaymentMethodContextProviderProps>,
 ) {
   const { Prev, onSuccess, ...rest } = props
+
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
       onSuccess={(orderNumber, cart) => {
-        sendEvent('purchase', orderToPurchase(orderNumber, cart))
+        sendEvent('purchase', cartToPurchase(orderNumber, cart))
         return onSuccess?.(orderNumber, cart)
       }}
     />

package/plugins/GoogleDatalayerRemoveItemFromCart.tsx

@@ -1,6 +1,6 @@
 import type { useRemoveItemFromCart as useRemoveItemFromCartBase } from '@graphcommerce/magento-cart-items'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToRemoveFromCart } from '../mapping/cartItemToRemoveFromCart/cartToRemoveFromCart'
 
 export const config: PluginConfig = {
@@ -11,8 +11,9 @@ export const config: PluginConfig = {
 export const useRemoveItemFromCart: FunctionPlugin<typeof useRemoveItemFromCartBase> = (
   usePrev,
   props,
-) =>
-  usePrev({
+) => {
+  const sendEvent = useSendEvent()
+  return usePrev({
     ...props,
     onComplete: (result, variables) => {
       if (!result.errors) {
@@ -24,3 +25,4 @@ export const useRemoveItemFromCart: FunctionPlugin<typeof useRemoveItemFromCartB
       return props.onComplete?.(result, variables)
     },
   })
+}

package/plugins/GoogleDatalayerShippingMethodForm.tsx

@@ -1,6 +1,6 @@
 import { ShippingMethodFormProps } from '@graphcommerce/magento-cart-shipping-method'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartToAddShippingInfo } from '../mapping/cartToAddShippingInfo/cartToAddShippingInfo'
 
 export const config: PluginConfig = {
@@ -10,6 +10,8 @@ export const config: PluginConfig = {
 
 export function ShippingMethodForm(props: PluginProps<ShippingMethodFormProps>) {
   const { Prev, onComplete, ...rest } = props
+
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -17,7 +19,7 @@ export function ShippingMethodForm(props: PluginProps<ShippingMethodFormProps>)
         if (result.data?.setShippingMethodsOnCart?.cart) {
           sendEvent(
             'add_shipping_info',
-            cartToAddShippingInfo(result.data?.setShippingMethodsOnCart?.cart),
+            cartToAddShippingInfo(result.data.setShippingMethodsOnCart.cart),
           )
         }
 

package/plugins/GoogleDatalayerUseRemoveItemFromCart.tsx

@@ -1,6 +1,6 @@
 import type { UpdateItemQuantityProps } from '@graphcommerce/magento-cart-items'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
 import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
@@ -16,6 +16,7 @@ export const config: PluginConfig = {
 export function UpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>) {
   const { Prev, formOptions, quantity, ...rest } = props
 
+  const sendEvent = useSendEvent()
   return (
     <Prev
       {...rest}
@@ -33,7 +34,7 @@ export function UpdateItemQuantity(props: PluginProps<UpdateItemQuantityProps>)
 
           if (!itemInCart?.quantity || diffQuantity === 0) return original
 
-          const items = [{ ...cartItemToDatalayerItem(itemInCart), quantity: absQuantity }]
+          const items = [{ ...cartItemToDatalayerItem(itemInCart, 0), quantity: absQuantity }]
           sendEvent(diffQuantity < 0 ? 'remove_from_cart' : 'add_to_cart', {
             ...datalayerItemsToCurrencyValue(items),
             items,

package/plugins/GoogleDatalayerViewItem.tsx

@@ -2,7 +2,7 @@ import type { ProductPageMetaProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEffect } from 'react'
-import { sendEvent } from '../api/sendEvent'
+import { useSendEvent } from '../api/sendEvent'
 import { productToViewItem } from '../mapping/productToViewItem/productToViewItem'
 
 export const config: PluginConfig = {
@@ -10,12 +10,13 @@ export const config: PluginConfig = {
   type: 'component',
 }
 
-/** When a product is added to the Cart, send a Google Analytics event */
+/** When a product detail page is viewed, send a Google Analytics event */
 export function ProductPageMeta(props: PluginProps<ProductPageMetaProps>) {
   const { Prev, product } = props
 
+  const sendEvent = useSendEvent()
   const viewItem = useMemoObject(productToViewItem(product))
-  useEffect(() => sendEvent('view_item', viewItem), [viewItem])
+  useEffect(() => sendEvent('view_item', viewItem), [sendEvent, viewItem])
 
   return <Prev {...props} />
 }

package/plugins/GoogleDatalayerWebVitals.tsx

@@ -3,7 +3,7 @@ import type { PluginConfig, 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'
+import { useSendEvent } from '../api/sendEvent'
 
 export const config: PluginConfig = {
   type: 'component',
@@ -19,6 +19,7 @@ export const config: PluginConfig = {
 export function FramerNextPages(props: PluginProps<PagesProps>) {
   const { Prev, ...rest } = props
 
+  const sendEvent = useSendEvent()
   const sendCoreWebVitals = useEventCallback((m: Metric, debug_target?: string | undefined) => {
     sendEvent(`cwv_${m.name.toLowerCase()}`, {
       value: m.delta,

package/mapping/cartToDatalayerItems/Cart_DatalayerItems.graphql

@@ -1,11 +0,0 @@
-fragment Cart_DatalayerItems on Cart {
-  __typename
-  items {
-    ...CartItem_DatalayerItem
-  }
-  prices {
-    subtotal_including_tax {
-      currency
-    }
-  }
-}

package/mapping/cartToDatalayerItems/cartToDatalayerItems.ts

@@ -1,10 +0,0 @@
-import { nonNullable } from '@graphcommerce/next-ui'
-import { cartItemToDatalayerItem } from '../cartItemToDatalayerItem/cartItemToDatalayerItem'
-import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
-import { Cart_DatalayerItemsFragment } from './Cart_DatalayerItems.gql'
-
-export function cartToDatalayerItems<C extends Cart_DatalayerItemsFragment>(cart: C) {
-  const items = cart.items?.filter(nonNullable).map(cartItemToDatalayerItem)
-  if (!items) return {}
-  return { ...datalayerItemsToCurrencyValue(items), items }
-}

package/mapping/orderToPurchase/orderToPurchase.ts

@@ -1,17 +0,0 @@
-import { PaymentMethodContextFragment } from '@graphcommerce/magento-cart-payment-method/Api/PaymentMethodContext.gql'
-import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
-
-export function orderToPurchase<C extends PaymentMethodContextFragment>(
-  orderNumber: string,
-  cart: C | null | undefined,
-) {
-  if (!cart) return { transaction_id: orderNumber }
-
-  return {
-    transaction_id: orderNumber,
-    coupon: cart.applied_coupons?.map((coupon) => coupon?.code).join(' '),
-    payment_type: cart.selected_payment_method?.code,
-    tax: cart.prices?.applied_taxes?.reduce((sum, tax) => sum + (tax?.amount?.value ?? 0), 0),
-    ...cartToDatalayerItems(cart),
-  }
-}