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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @graphcommerce/google-datalayer
 
+## 8.0.5-canary.1
+
+### Patch Changes
+
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`f120bce`](https://github.com/graphcommerce-org/graphcommerce/commit/f120bce617808d756aebb7c500aa1deb9e4cf487) - Google Datalayer, Analytics and Tagmanager improvements.
+
+  - Removed `eventFormat` as we could automatically detec the correct event format and it is now the responsibility of GTM or the GTAG to handle the event format.
+  - Created cartItemToGoogleDatalayerItem and productToGoogleDatalayerItem for easier modifications. ([@paales](https://github.com/paales))
+
+- [#2233](https://github.com/graphcommerce-org/graphcommerce/pull/2233) [`cabeadc`](https://github.com/graphcommerce-org/graphcommerce/commit/cabeadce2b73ce072a2fa8b8ab1ab49907cda13b) - Added core web vitals measurements to the datalayer.
+  ([@paales](https://github.com/paales))
+
 ## 8.0.5-canary.0
 
 ## 8.0.4

package/Config.graphqls

@@ -1,21 +1,13 @@
 extend input GraphCommerceConfig {
-  analytics: AnalyticsConfig
+  dataLayer: DatalayerConfig
 }
 
 """
-EventFormat is an enumatation of different event formats. This decides what the format of the event data will be.
+GoogleDatalayerConfig to allow enabling certain aspects of the datalayer
 """
-enum EventFormat {
-  GA3
-  GA4
-}
-
-"""
-AnalyticsConfig will contain all configuration values for the analytics in GraphCommerce.
-"""
-input AnalyticsConfig {
+input DatalayerConfig {
   """
-  eventFormat contains the list of fired and formatted events
+  Enable core web vitals tracking for GraphCommerce
   """
-  eventFormat: [EventFormat!]
+  coreWebVitals: Boolean
 }

package/README.md

@@ -1,6 +1,5 @@
 # @graphcommerce/google-datalayer
 
-This package contains utilities that can be used in different app analytics
-trackers.
+Implemenation of the datalayer in GraphCommerce.
 
-add_payment_info add_shipping_info
+See [./Config.graphqls](./Config.graphqls) for additional configuration.

package/api/sendEvent.ts

@@ -0,0 +1,50 @@
+export const googleEventNames = [
+  'add_payment_info',
+  'add_shipping_info',
+  'add_to_cart',
+  'add_to_wishlist',
+  'begin_checkout',
+  'checkout_progress',
+  'earn_virtual_currency',
+  'exception',
+  'generate_lead',
+  'join_group',
+  'level_end',
+  'level_start',
+  'level_up',
+  'login',
+  'page_view',
+  'post_score',
+  'purchase',
+  'refund',
+  'remove_from_cart',
+  'screen_view',
+  'search',
+  'select_content',
+  'select_item',
+  'select_promotion',
+  'set_checkout_option',
+  'share',
+  'sign_up',
+  'spend_virtual_currency',
+  'tutorial_begin',
+  'tutorial_complete',
+  'unlock_achievement',
+  'timing_complete',
+  'view_cart',
+  'view_item',
+  'view_item_list',
+  'view_promotion',
+  'view_search_results',
+] as const
+
+export type EventMapFunctionType = (
+  eventName: (typeof googleEventNames)[number] | (string & Record<never, never>),
+  eventData: {
+    [key: string]: unknown
+  },
+) => void
+
+export const sendEvent: EventMapFunctionType = (eventName, eventData) => {
+  // This is a generic event handler and is plugins from google-analytics and google datalayer
+}

package/components/DatalayerViewItemList.tsx

@@ -0,0 +1,45 @@
+import { ProductItemsGridProps } 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 {
+  productItemsToViewItemList,
+  viewItemListToSelectItem,
+} from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
+
+const DatalayerSelectItemContext = React.createContext<((itemId: string) => void) | undefined>(
+  undefined,
+)
+
+export function useViewItemList() {
+  const context = useContext(DatalayerSelectItemContext)
+  if (!context) {
+    return (itemId: string) => {
+      console.log(`No DatalayerSelectItemContext provider found, trying to select item ${itemId}`)
+    }
+  }
+  return context
+}
+
+export function DatalayerViewItemList(
+  props: ProductItemsGridProps & { children: React.ReactNode },
+) {
+  const { title: item_list_name, items, children } = props
+  const item_list_id = item_list_name.toLowerCase().replace(/\s/g, '_')
+
+  const viewItemList = useMemoObject(
+    productItemsToViewItemList(item_list_id, item_list_name, items),
+  )
+  useEffect(() => sendEvent('view_item_list', viewItemList), [viewItemList])
+
+  const selectItem = useEventCallback((itemId: string) => {
+    sendEvent('select_item', viewItemListToSelectItem(viewItemList, itemId))
+  })
+
+  return (
+    <DatalayerSelectItemContext.Provider value={selectItem}>
+      {children}
+    </DatalayerSelectItemContext.Provider>
+  )
+}

package/index.ts

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

package/mapping/cartItemToDatalayerItem/CartItem_DatalayerItem.graphql

@@ -0,0 +1,31 @@
+fragment CartItem_DatalayerItem on CartItemInterface {
+  __typename
+  uid
+  product {
+    ...Product_DatalayerItem
+  }
+  prices {
+    price {
+      ...Money
+    }
+    price_including_tax {
+      ...Money
+    }
+    row_total {
+      ...Money
+    }
+    row_total_including_tax {
+      ...Money
+    }
+    total_item_discount {
+      ...Money
+    }
+  }
+  quantity
+  ... on ConfigurableCartItem {
+    configured_variant {
+      uid
+      sku
+    }
+  }
+}

package/mapping/cartItemToDatalayerItem/cartItemToDatalayerItem.ts

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

package/mapping/cartItemToRemoveFromCart/CartItem_RemoveFromCart.graphql

@@ -0,0 +1,3 @@
+fragment CartItem_RemoveFromCart on CartItemInterface @inject(into: ["CartItem"]) {
+  ...CartItem_DatalayerItem
+}

package/mapping/cartItemToRemoveFromCart/cartToRemoveFromCart.ts

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

package/mapping/cartToAddPaymentInfo/Cart_AddPaymentInfo.graphql

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

package/mapping/cartToAddPaymentInfo/cartToAddPaymentInfo.ts

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

package/mapping/cartToAddShippingInfo/Cart_AddShippingInfo.graphql

@@ -0,0 +1,12 @@
+fragment Cart_AddShippingInfo on Cart @inject(into: ["ShippingMethodSelected"]) {
+  applied_coupons {
+    code
+  }
+  shipping_addresses {
+    selected_shipping_method {
+      carrier_code
+      method_code
+    }
+  }
+  ...Cart_DatalayerItems
+}

package/mapping/cartToAddShippingInfo/cartToAddShippingInfo.ts

@@ -0,0 +1,15 @@
+import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { Cart_AddShippingInfoFragment } from './Cart_AddShippingInfo.gql'
+
+export function cartToAddShippingInfo<C extends Cart_AddShippingInfoFragment>(cart: C) {
+  return {
+    coupon: cart?.applied_coupons?.map((coupon) => coupon?.code).join(' '),
+    shipping_tier: cart?.shipping_addresses
+      .map(
+        (address) =>
+          `${address?.selected_shipping_method?.carrier_code}_${address?.selected_shipping_method?.method_code}`,
+      )
+      .join(' '),
+    ...cartToDatalayerItems(cart),
+  }
+}

package/mapping/cartToBeginCheckout/Cart_BeginCheckout.graphql

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

package/mapping/cartToBeginCheckout/cartToBeginCheckout.ts

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

package/mapping/cartToDatalayerItems/Cart_DatalayerItems.graphql

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

package/mapping/cartToDatalayerItems/cartToDatalayerItems.ts

@@ -0,0 +1,10 @@
+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/cartToViewCart/Cart_ViewCart.graphql

@@ -0,0 +1,4 @@
+fragment Cart_ViewCart on Cart @inject(into: ["CartItemCountChanged"]) {
+  __typename
+  ...Cart_DatalayerItems
+}

package/mapping/cartToViewCart/cartToViewCart.ts

@@ -0,0 +1,6 @@
+import { cartToDatalayerItems } from '../cartToDatalayerItems/cartToDatalayerItems'
+import { Cart_ViewCartFragment } from './Cart_ViewCart.gql'
+
+export function cartToViewCart<C extends Cart_ViewCartFragment>(cart: C) {
+  return cartToDatalayerItems(cart)
+}

package/mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue.ts

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

package/mapping/orderToPurchase/orderToPurchase.ts

@@ -0,0 +1,17 @@
+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),
+  }
+}

package/mapping/productItemsToViewItemList/productItemsToViewItemList.ts

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

package/{lib/productToItem/ProductToItem.graphql → mapping/productToDatalayerItem/Product_DatalayerItem.graphql}

@@ -1,4 +1,5 @@
-fragment ProductToItem on ProductInterface {
+fragment Product_DatalayerItem on ProductInterface {
+  uid
   name
   sku
   price_range {
@@ -12,9 +13,5 @@ fragment ProductToItem on ProductInterface {
       }
     }
   }
-  categories {
-    uid
-    url_key
-    name
-  }
+  ...ProductPageBreadcrumb
 }

package/{lib/productToItem/productToItem.ts → mapping/productToDatalayerItem/productToDatalayerItem.ts}

@@ -1,6 +1,8 @@
-import { ProductToItemFragment } from './ProductToItem.gql'
+import { productPageCategory } from '@graphcommerce/magento-product'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { Product_DatalayerItemFragment } from './Product_DatalayerItem.gql'
 
-export type Item = {
+export type GoogleDatalayerItem = {
   item_id: string
   item_name: string
   affiliation?: string
@@ -19,20 +21,26 @@ export type Item = {
   item_variant?: string
   location_id?: string
   price?: number
-  quantity?: number
+  quantity: number
 }
 
-export function productToItem<P extends ProductToItemFragment>(item: P): Item {
+export function productToDatalayerItem<P extends Product_DatalayerItemFragment>(
+  item: P,
+): 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]),
+  )
+
   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,
+    quantity: 1,
+    ...item_categories,
   }
 }

package/mapping/productToViewItem/Product_ViewItem.graphql

@@ -0,0 +1,3 @@
+fragment Product_ViewItem on ProductInterface {
+  ...Product_DatalayerItem
+}

package/mapping/productToViewItem/productToViewItem.ts

@@ -0,0 +1,11 @@
+import { datalayerItemsToCurrencyValue } from '../datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
+import { 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,
+  }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/google-datalayer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.5-canary.0",
+  "version": "8.0.5-canary.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.5-canary.0",
-    "@graphcommerce/graphql-mesh": "^8.0.5-canary.0",
-    "@graphcommerce/magento-cart": "^8.0.5-canary.0",
-    "@graphcommerce/magento-cart-payment-method": "^8.0.5-canary.0",
-    "@graphcommerce/magento-cart-shipping-method": "^8.0.5-canary.0",
-    "@graphcommerce/magento-product": "^8.0.5-canary.0",
-    "@graphcommerce/next-config": "^8.0.5-canary.0",
-    "@graphcommerce/next-ui": "^8.0.5-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^8.0.5-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^8.0.5-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^8.0.5-canary.1",
+    "@graphcommerce/magento-cart": "^8.0.5-canary.1",
+    "@graphcommerce/magento-cart-payment-method": "^8.0.5-canary.1",
+    "@graphcommerce/magento-cart-shipping-method": "^8.0.5-canary.1",
+    "@graphcommerce/magento-product": "^8.0.5-canary.1",
+    "@graphcommerce/next-ui": "^8.0.5-canary.1",
+    "@graphcommerce/prettier-config-pwa": "^8.0.5-canary.1",
+    "@graphcommerce/typescript-config-pwa": "^8.0.5-canary.1",
     "@mui/material": "^5.14.20",
     "next": "^14",
     "react": "^18.2.0",
@@ -40,5 +38,8 @@
     "@graphcommerce/magento-product": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "web-vitals": "^3.5.2"
   }
 }

package/plugins/GoogleDatalayerAddProductsToCartForm.tsx

@@ -1,6 +1,13 @@
-import { AddProductsToCartFormProps } from '@graphcommerce/magento-product'
-import { PluginProps } from '@graphcommerce/next-config'
-import { addToCart } from '../events/add_to_cart'
+import {
+  AddProductsToCartFormProps,
+  findAddedItems,
+  toUserErrors,
+} from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { nonNullable } from '@graphcommerce/next-ui'
+import { sendEvent } from '../api/sendEvent'
+import { cartItemToDatalayerItem } from '../mapping/cartItemToDatalayerItem/cartItemToDatalayerItem'
+import { datalayerItemsToCurrencyValue } from '../mapping/datalayerItemsToCurrencyValue/datalayerItemsToCurrencyValue'
 
 export const component = 'AddProductsToCartForm'
 export const exported = '@graphcommerce/magento-product'
@@ -13,7 +20,29 @@ function GoogleDatalayerAddProductsToCartForm(props: PluginProps<AddProductsToCa
     <Prev
       {...rest}
       onComplete={(result, variables) => {
-        addToCart(result, variables)
+        const { data, errors } = result
+        const addedItems = findAddedItems(data, variables)
+
+        const items = addedItems
+          .map(({ itemVariable, itemInCart }) => {
+            if (!itemInCart) return null
+            return { ...cartItemToDatalayerItem(itemInCart), quantity: itemVariable.quantity }
+          })
+          .filter(nonNullable)
+
+        const userErrors = toUserErrors(result.data)
+        if ((errors && errors.length > 0) || userErrors.length > 0) {
+          sendEvent('add_to_cart_error', {
+            userErrors: userErrors?.map((e) => e.message),
+            errors: errors?.map((e) => e.message),
+            variables,
+          })
+        }
+
+        if (items.length > 0) {
+          sendEvent('add_to_cart', { ...datalayerItemsToCurrencyValue(items), items })
+        }
+
         return onComplete?.(result, variables)
       }}
     />

package/plugins/GoogleDatalayerCartStartCheckout.tsx

@@ -1,17 +1,31 @@
 import { CartStartCheckoutProps } from '@graphcommerce/magento-cart'
-import { PluginProps } from '@graphcommerce/next-config'
-import { beginCheckout } from '../events/begin_checkout'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { useMemoObject } from '@graphcommerce/next-ui'
+import { useEffect, useRef } from 'react'
+import { sendEvent } from '../api/sendEvent'
+import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
+import { cartToViewCart } from '../mapping/cartToViewCart/cartToViewCart'
 
 export const component = 'CartStartCheckout'
 export const exported = '@graphcommerce/magento-cart'
 
 export function GoogleDatalayerCartStartCheckout(props: PluginProps<CartStartCheckoutProps>) {
   const { Prev, onStart, ...rest } = props
+
+  const send = useRef(false)
+  const viewCart = useMemoObject(cartToViewCart({ __typename: 'Cart', ...props }))
+  useEffect(() => {
+    if (!send.current) {
+      sendEvent('view_cart', viewCart)
+      send.current = true
+    }
+  }, [viewCart])
+
   return (
     <Prev
       {...rest}
       onStart={(e, cart) => {
-        beginCheckout(cart)
+        if (cart) sendEvent('begin_checkout', cartToBeginCheckout(cart))
         return onStart?.(e, cart)
       }}
     />

package/plugins/GoogleDatalayerCartStartCheckoutLinkOrButton.tsx

@@ -1,9 +1,7 @@
 import { CartStartCheckoutLinkOrButtonProps } from '@graphcommerce/magento-cart'
-import { PluginProps } from '@graphcommerce/next-config'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEffect } from 'react'
-import { beginCheckout } from '../events/begin_checkout'
-import { viewCart } from '../events/view_cart'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { sendEvent } from '../api/sendEvent'
+import { cartToBeginCheckout } from '../mapping/cartToBeginCheckout/cartToBeginCheckout'
 
 export const component = 'CartStartCheckoutLinkOrButton'
 export const exported = '@graphcommerce/magento-cart'
@@ -13,19 +11,11 @@ export function GoogleDatalayerCartStartCheckoutLinkOrButton(
 ) {
   const { Prev, onStart, ...rest } = props
 
-  const cartObject = useMemoObject({ items: rest.items, prices: rest.prices })
-
-  useEffect(() => {
-    if (cartObject.items) {
-      viewCart(cartObject)
-    }
-  }, [cartObject])
-
   return (
     <Prev
       {...rest}
       onStart={(e, cart) => {
-        beginCheckout(cart)
+        sendEvent('begin_checkout', cartToBeginCheckout(cart))
         return onStart?.(e, cart)
       }}
     />