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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @graphcommerce/google-datalayer
 
+## 9.0.0-canary.74
+
 ## 9.0.0-canary.73
 
 ### Minor Changes

package/components/DatalayerViewItemList.tsx

@@ -1,12 +1,13 @@
 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 React, { useContext, useEffect, useRef } from 'react'
 import { useSendEvent } from '../api/sendEvent'
 import {
   productItemsToViewItemList,
   viewItemListToSelectItem,
 } from '../mapping/productItemsToViewItemList/productItemsToViewItemList'
+import { useDebounce } from '@graphcommerce/react-hook-form'
 
 const DatalayerSelectItemContext = React.createContext<((itemId: string) => void) | undefined>(
   undefined,
@@ -25,7 +26,7 @@ export function useViewItemList() {
 export function DatalayerViewItemList(
   props: ProductItemsGridProps & { children: React.ReactNode },
 ) {
-  const { title: item_list_name, items, children } = props
+  const { title: item_list_name, items, children, containerRef } = props
   const item_list_id = item_list_name.toLowerCase().replace(/\s/g, '_')
 
   const params = useProductFiltersPro(true)?.params
@@ -34,7 +35,52 @@ export function DatalayerViewItemList(
   const viewItemList = useMemoObject(
     productItemsToViewItemList(item_list_id, item_list_name, items, params),
   )
-  useEffect(() => sendEvent('view_item_list', viewItemList), [sendEvent, viewItemList])
+
+  const sendUids = useRef<Map<string, boolean>>(new Map())
+
+  const send = useDebounce(() => {
+    const toSend = [...sendUids.current.entries()]
+      .filter(([, value]) => value !== true)
+      .map(([key]) => key)
+    if (toSend.length === 0) return
+
+    const viewItems = viewItemList.items.filter((item) => toSend.includes(item.item_uid))
+
+    sendEvent('view_item_list', { ...viewItemList, items: viewItems })
+
+    // Mark as send.
+    toSend.forEach((item_uid) => sendUids.current.set(item_uid, true))
+  }, 1000)
+
+  useEffect(() => {
+    sendUids.current.clear()
+    if (typeof containerRef === 'function' || !containerRef?.current) return () => {}
+
+    const childNodes = [...containerRef.current.childNodes].filter((n) => n instanceof HTMLElement)
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const { target } = entry
+          if (entry.isIntersecting && target instanceof HTMLElement) {
+            const index = childNodes.indexOf(target)
+            const item = viewItemList.items[index]
+            if (item && !sendUids.current.has(item.item_uid)) {
+              sendUids.current.set(item.item_uid, false)
+            }
+          }
+        }
+        send()
+      },
+      { threshold: 0.5 },
+    )
+
+    childNodes.forEach((node) => {
+      io.observe(node)
+    })
+
+    return () => io.disconnect()
+  }, [containerRef, send, viewItemList])
 
   const selectItem = useEventCallback((itemId: string) => {
     sendEvent('select_item', viewItemListToSelectItem(viewItemList, itemId))

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.73",
+  "version": "9.0.0-canary.74",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,14 +12,14 @@
     }
   },
   "peerDependencies": {
-    "@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",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.74",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.74",
+    "@graphcommerce/magento-cart-payment-method": "^9.0.0-canary.74",
+    "@graphcommerce/magento-cart-shipping-method": "^9.0.0-canary.74",
+    "@graphcommerce/magento-product": "^9.0.0-canary.74",
+    "@graphcommerce/next-ui": "^9.0.0-canary.74",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.74",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.74",
     "@mui/material": "^5.14.20",
     "next": "^14",
     "react": "^18.2.0",

package/plugins/GoogleDatalayerProductListItemsBase.tsx

@@ -1,5 +1,7 @@
 import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useForkRef } from '@mui/material'
+import { useRef } from 'react'
 import { DatalayerViewItemList } from '../components/DatalayerViewItemList'
 
 export const config: PluginConfig = {
@@ -8,10 +10,14 @@ export const config: PluginConfig = {
 }
 
 export function ProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
-  const { Prev, ...rest } = props
+  const { Prev, containerRef, ...rest } = props
+
+  const internalRef = useRef<HTMLDivElement>(null)
+  const ref = useForkRef(containerRef, internalRef)
+
   return (
-    <DatalayerViewItemList {...rest}>
-      <Prev {...rest} />
+    <DatalayerViewItemList {...rest} containerRef={internalRef}>
+      <Prev {...rest} containerRef={ref} />
     </DatalayerViewItemList>
   )
 }