feat: autocomplete dataLayer events

react/components/Autocomplete/components/TileList/TileList.tsx

@@ -18,7 +18,11 @@ interface TileListProps {
   totalProducts: number
   layout: ProductLayout
   isLoading: boolean
-  onProductClick: (product: string, position: number, term: string) => void
+  onProductClick: (
+    position: number,
+    term: string,
+    productSummary: Product
+  ) => void
   onSeeAllClick: (term: string) => void
   HorizontalProductSummary?: React.ComponentType<{
     product: Product
@@ -77,14 +81,14 @@ const TileList: FC<TileListProps> = ({
                         product={productSummary}
                         placement={AUTOCOMPLETE_PLACEMENT}
                         actionOnClick={() => {
-                          onProductClick(productSummary.productId, index, term)
+                          onProductClick(index, term, productSummary)
                         }}
                       />
                     ) : (
                       <CustomListItem
                         product={productSummary}
                         onClick={() => {
-                          onProductClick(productSummary.productId, index, term)
+                          onProductClick(index, term, productSummary)
                         }}
                       />
                     )
@@ -94,7 +98,7 @@ const TileList: FC<TileListProps> = ({
                       product={productSummary}
                       placement={AUTOCOMPLETE_PLACEMENT}
                       actionOnClick={() => {
-                        onProductClick(productSummary.productId, index, term)
+                        onProductClick(index, term, productSummary)
                       }}
                     />
                   )}

react/components/Autocomplete/index.tsx

@@ -23,7 +23,6 @@ import { withRuntime } from '../../utils/withRuntime'
 import { decodeUrlString, encodeUrlString } from '../../utils/string-utils'
 import {
   EventType,
-  handleAutocompleteSearch,
   handleItemClick,
   handleProductClick,
   handleSeeAllClick,
@@ -310,6 +309,7 @@ class AutoComplete extends React.Component<
     const session = await getSession(this.props.runtime.rootPath)
     const shippingOptions =
       session?.map((item: Record<string, string>) => item.value) ?? []
+
     const advertisementOptions: AdvertisementOptions = {
       showSponsored: true,
       sponsoredCount: 2,
@@ -330,18 +330,6 @@ class AutoComplete extends React.Component<
       advertisementOptions
     )
 
-    if (!queryFromHover) {
-      const { count, operator, misspelled } = result.data.productSuggestions
-
-      handleAutocompleteSearch(
-        this.props.push,
-        operator,
-        misspelled,
-        count,
-        term
-      )
-    }
-
     this.setState({
       isProductsLoading: false,
     })
@@ -529,8 +517,12 @@ class AutoComplete extends React.Component<
           totalProducts={totalProducts || 0}
           layout={this.getProductLayout()}
           isLoading={isProductsLoading}
-          onProductClick={(id, position, term) => {
-            handleProductClick(push, runtime.page)(id, position, term)
+          onProductClick={(position, term, productSummary) => {
+            handleProductClick(push, runtime.page)(
+              position,
+              term,
+              productSummary
+            )
             this.closeModal()
           }}
           onSeeAllClick={term => {

react/utils/pixel.ts

@@ -6,21 +6,36 @@ export enum EventType {
   TopSearchClick = 'top_search_click',
   HistoryClick = 'history_click',
   Search = 'search',
-  SeeAllClick = 'see_all_click',
+  SeeAllClick = 'see_all_products_click',
 }
 
 export function handleProductClick(push: (data: any) => void, page: string) {
-  return (productId: string, position: number, term: string) =>
+  return (position: number, term: string, productSummary: Product) => {
+    const {
+      productName,
+      brand,
+      categories,
+      sku,
+      productId,
+      productReference,
+    } = productSummary
+
     push({
       page,
-      event: EVENT_NAME,
+      event: 'productClick',
       eventType: EventType.ProductClick,
       product: {
+        productName,
+        brand,
+        categories,
+        sku,
         productId,
-        position,
+        productReference,
       },
+      position,
       term,
     })
+  }
 }
 
 export function handleItemClick(
@@ -52,35 +67,3 @@ export function handleSeeAllClick(push: (data: any) => void, page: string) {
       },
     })
 }
-
-export function handleAutocompleteSearch(
-  push: (data: any) => void,
-  operator: string,
-  misspelled: boolean,
-  count: number,
-  term: string
-) {
-  try {
-    push({
-      event: EVENT_NAME,
-      eventType: EventType.Search,
-      search: {
-        operator,
-        misspelled,
-        text: decodeURI(term),
-        match: count,
-      },
-    })
-  } catch (e) {
-    push({
-      event: EVENT_NAME,
-      eventType: EventType.Search,
-      search: {
-        operator,
-        misspelled,
-        text: term,
-        match: count,
-      },
-    })
-  }
-}