@graphcommerce/googleanalytics 6.0.0-canary.50 → 6.0.0-canary.52

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.0-canary.52
+
+### Patch Changes
+
+- [#1809](https://github.com/graphcommerce-org/graphcommerce/pull/1809) [`2da3c9214`](https://github.com/graphcommerce-org/graphcommerce/commit/2da3c92148aef08813b95e404a25796acf0eefd2) - Added useMemoObject and implement in GaViewItem, GoogleAnalyticsItemList and GaCartStartCheckoutLinkOrButton ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 6.0.0-canary.51
+
 ## 6.0.0-canary.50
 
 ## 6.0.0-canary.49

package/README.md

@@ -12,6 +12,9 @@ Besides the GA4 integration it also tracks the following events:
 - begin_checkout
 - select_item
 - view_item_list
+- view_item
+- view_cart
+- remove_from_cart
 
 ## Configuration
 

package/components/GoogleAnalyticsItemList.tsx

@@ -1,4 +1,4 @@
-import { nonNullable, useMemoDeep } from '@graphcommerce/next-ui'
+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'
@@ -39,15 +39,11 @@ export function GoogleAnalyticsItemList<
 >(props: UseGtagViewItemListProps<P> & { children: React.ReactNode }) {
   const { title, items, listId, children } = props
 
-  const eventData: ViewItemList = useMemoDeep(
-    () => ({
-      item_list_id: listId ?? title?.toLowerCase().replace(/\s/g, '_'),
-      item_list_name: title,
-      items:
-        items?.map((item) => (item ? productToGtagItem(item) : null)).filter(nonNullable) ?? [],
-    }),
-    [listId, items, title],
-  )
+  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])
 

package/events/gtagRemoveFromCart/GtagRemoveFromCart.graphql

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,22 @@
+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.ts

@@ -24,8 +24,8 @@ export type GtagItem = {
 
 export function productToGtagItem<P extends ProductToGtagItemFragment>(item: P): GtagItem {
   return {
-    item_name: item.name ?? '',
     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,

package/package.json

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

package/plugins/GaCartStartCheckoutLinkOrButton.tsx

@@ -1,6 +1,9 @@
 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'
@@ -10,6 +13,11 @@ export function GaCartStartCheckoutLinkOrButton(
   props: PluginProps<CartStartCheckoutLinkOrButtonProps>,
 ) {
   const { Prev, onStart, ...rest } = props
+
+  const cartObject = useMemoObject({ items: rest.items, prices: rest.prices })
+
+  useEffect(() => gtagViewCart(cartObject), [cartObject])
+
   return (
     <Prev
       {...rest}

package/plugins/GaRemoveItemFromCart.tsx

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

package/plugins/GaViewItem.tsx

@@ -0,0 +1,25 @@
+import { ProductPageMetaFragment } from '@graphcommerce/magento-product/components/ProductPageMeta/ProductPageMeta.gql'
+import { 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'
+
+/** When a product is added to the Cart, send a Google Analytics event */
+function GaViewItem(props: PluginProps<ProductPageMetaFragment>) {
+  const { Prev, price_range } = props
+
+  const viewItem = useMemoObject({
+    currency: price_range.minimum_price.final_price.currency,
+    value: price_range.minimum_price.final_price.value,
+    items: [productToGtagItem(props)],
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  useEffect(() => globalThis.gtag?.('event', 'view_item', viewItem), [viewItem])
+
+  return <Prev {...props} />
+}
+
+export const Plugin = GaViewItem