From 8838ee85c818c6cd289d62cd27f99bd847432c5f Mon Sep 17 00:00:00 2001 From: Eduardo Formiga Date: Tue, 8 Oct 2024 11:40:45 -0300 Subject: [PATCH] Feat: import `sendAnalyticsEvent` on demand (#2472) ## What's the purpose of this pull request? This PR is part of the Performance epic and aims to import the `sendAnalyticsEvent` method from `faststore/sdk` dynamically instead of static so that it will not be part of the initial bundle. ## How to test it? 1. run `yarn dev`. 2. Following the https://developers.vtex.com/docs/guides/faststore/troubleshooting-analytics-and-partytown#see-events-pushed-to-datalayer We need to put it in the console when we use the `partytown` to see the events in the dataLayer: ```js window.dataLayerHistory = [] const originalPush = dataLayer.push dataLayer.push = (data) => { console.log(data) dataLayerHistory.push(data) originalPush(data) } ``` 3. Then navigate to the pages and double-check that the tags are being triggered as before. Check the image below. Screenshot 2024-09-20 at 18 46 46 ### Starter PR - https://github.com/vtex-sites/starter.store/pull/550 PSI Snapshot Screenshot 2024-09-25 at 18 11 24 --- .../src/components/cart/CartItem/CartItem.tsx | 67 ++++++++--------- .../cart/CartSidebar/CartSidebar.tsx | 37 +++++----- .../search/SearchInput/SearchInput.tsx | 28 ++++--- .../ProductDetails/ProductDetails.tsx | 47 ++++++------ .../sdk/analytics/hooks/usePageViewEvent.ts | 21 +++--- .../analytics/hooks/useViewItemListEvent.ts | 42 ++++++----- packages/core/src/sdk/cart/useBuyButton.ts | 51 ++++++------- packages/core/src/sdk/cart/useRemoveButton.ts | 47 ++++++------ .../src/sdk/product/useProductGalleryQuery.ts | 24 +++--- .../core/src/sdk/product/useProductLink.ts | 73 ++++++++++--------- .../core/src/sdk/search/useSuggestions.ts | 27 +++---- 11 files changed, 239 insertions(+), 225 deletions(-) diff --git a/packages/core/src/components/cart/CartItem/CartItem.tsx b/packages/core/src/components/cart/CartItem/CartItem.tsx index bf69b115a5..d3b16b4abe 100644 --- a/packages/core/src/components/cart/CartItem/CartItem.tsx +++ b/packages/core/src/components/cart/CartItem/CartItem.tsx @@ -1,23 +1,22 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' +import type { + AddToCartEvent, + CurrencyCode, + RemoveFromCartEvent, +} from '@faststore/sdk' import { CartItem as UICartItem, CartItemImage as UICartItemImage, CartItemSummary as UICartItemSummary, } from '@faststore/ui' import { useCallback, useMemo } from 'react' -import type { - AddToCartEvent, - CurrencyCode, - RemoveFromCartEvent, -} from '@faststore/sdk' import { Image } from 'src/components/ui/Image' +import type { AnalyticsItem } from 'src/sdk/analytics/types' +import type { CartItem as ICartItem } from 'src/sdk/cart' import { cartStore } from 'src/sdk/cart' +import { useRemoveButton } from 'src/sdk/cart/useRemoveButton' import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice' import { useSession } from 'src/sdk/session' -import { useRemoveButton } from 'src/sdk/cart/useRemoveButton' -import type { CartItem as ICartItem } from 'src/sdk/cart' -import type { AnalyticsItem } from 'src/sdk/analytics/types' function useCartItemEvent() { const { @@ -28,30 +27,32 @@ function useCartItemEvent() { (item: Props['item'], quantity: number) => { const quantityDelta = quantity - item.quantity - return sendAnalyticsEvent< - AddToCartEvent | RemoveFromCartEvent - >({ - name: quantityDelta > 0 ? 'add_to_cart' : 'remove_from_cart', - params: { - currency: code as CurrencyCode, - // TODO: In the future, we can explore more robust ways of - // calculating the value (gift items, discounts, etc.). - value: item.price * Math.abs(quantityDelta), - items: [ - { - item_id: item.itemOffered.isVariantOf.productGroupID, - item_name: item.itemOffered.isVariantOf.name, - item_brand: item.itemOffered.brand.name, - item_variant: item.itemOffered.sku, - quantity: Math.abs(quantityDelta), - price: item.price, - discount: item.listPrice - item.price, - currency: code as CurrencyCode, - item_variant_name: item.itemOffered.name, - product_reference_id: item.itemOffered.gtin, - }, - ], - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + return sendAnalyticsEvent< + AddToCartEvent | RemoveFromCartEvent + >({ + name: quantityDelta > 0 ? 'add_to_cart' : 'remove_from_cart', + params: { + currency: code as CurrencyCode, + // TODO: In the future, we can explore more robust ways of + // calculating the value (gift items, discounts, etc.). + value: item.price * Math.abs(quantityDelta), + items: [ + { + item_id: item.itemOffered.isVariantOf.productGroupID, + item_name: item.itemOffered.isVariantOf.name, + item_brand: item.itemOffered.brand.name, + item_variant: item.itemOffered.sku, + quantity: Math.abs(quantityDelta), + price: item.price, + discount: item.listPrice - item.price, + currency: code as CurrencyCode, + item_variant_name: item.itemOffered.name, + product_reference_id: item.itemOffered.gtin, + }, + ], + }, + }) }) }, [code] diff --git a/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx b/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx index d20ac2ab23..e4869613e4 100644 --- a/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx +++ b/packages/core/src/components/cart/CartSidebar/CartSidebar.tsx @@ -1,4 +1,3 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' import { Button as UIButton, CartSidebar as UICartSidebar, @@ -28,24 +27,26 @@ function useViewCartEvent() { const { items, gifts, total } = useCart() const sendViewCartEvent = useCallback(() => { - return sendAnalyticsEvent({ - name: 'view_cart', - params: { - currency: code as CurrencyCode, - value: total, - items: items.concat(gifts).map((item) => ({ - item_id: item.itemOffered.isVariantOf.productGroupID, - item_name: item.itemOffered.isVariantOf.name, - item_brand: item.itemOffered.brand.name, - item_variant: item.itemOffered.sku, - quantity: item.quantity, - price: item.price, - discount: item.listPrice - item.price, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + return sendAnalyticsEvent({ + name: 'view_cart', + params: { currency: code as CurrencyCode, - item_variant_name: item.itemOffered.name, - product_reference_id: item.itemOffered.gtin, - })), - }, + value: total, + items: items.concat(gifts).map((item) => ({ + item_id: item.itemOffered.isVariantOf.productGroupID, + item_name: item.itemOffered.isVariantOf.name, + item_brand: item.itemOffered.brand.name, + item_variant: item.itemOffered.sku, + quantity: item.quantity, + price: item.price, + discount: item.listPrice - item.price, + currency: code as CurrencyCode, + item_variant_name: item.itemOffered.name, + product_reference_id: item.itemOffered.gtin, + })), + }, + }) }) }, [code, gifts, items, total]) diff --git a/packages/core/src/components/search/SearchInput/SearchInput.tsx b/packages/core/src/components/search/SearchInput/SearchInput.tsx index 3d77c6c409..68aa32072a 100644 --- a/packages/core/src/components/search/SearchInput/SearchInput.tsx +++ b/packages/core/src/components/search/SearchInput/SearchInput.tsx @@ -1,5 +1,4 @@ import type { SearchEvent, SearchState } from '@faststore/sdk' -import { sendAnalyticsEvent } from '@faststore/sdk' import type { SearchInputFieldProps as UISearchInputFieldProps, @@ -22,7 +21,6 @@ import { useState, } from 'react' -import { formatSearchPath } from 'src/sdk/search/formatSearchPath' import useSearchHistory from 'src/sdk/search/useSearchHistory' import useSuggestions from 'src/sdk/search/useSuggestions' import useOnClickOutside from 'src/sdk/ui/useOnClickOutside' @@ -46,9 +44,11 @@ export type SearchInputRef = UISearchInputFieldRef & { } const sendAnalytics = async (term: string) => { - sendAnalyticsEvent({ - name: 'search', - params: { search_term: term }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent({ + name: 'search', + params: { search_term: term }, + }) }) } @@ -119,13 +119,17 @@ const SearchInput = forwardRef( placeholder={placeholder} onChange={(e) => setSearchQuery(e.target.value)} onSubmit={(term) => { - const path = formatSearchPath({ - term, - sort: sort as SearchState['sort'], - }) - - onSearchSelection(term, path) - router.push(path) + import('src/sdk/search/formatSearchPath').then( + ({ formatSearchPath }) => { + const path = formatSearchPath({ + term, + sort: sort as SearchState['sort'], + }) + + onSearchSelection(term, path) + router.push(path) + } + ) }} onFocus={() => setSearchDropdownVisible(true)} value={searchQuery} diff --git a/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx b/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx index 62e262b11a..cd77ef01ff 100644 --- a/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx +++ b/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx @@ -1,7 +1,6 @@ -import { useEffect, useState, useMemo } from 'react' +import { useEffect, useMemo, useState } from 'react' import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk' -import { sendAnalyticsEvent } from '@faststore/sdk' import { gql } from '@generated' import type { AnalyticsItem } from 'src/sdk/analytics/types' @@ -12,10 +11,10 @@ import Section from '../Section' import styles from './section.module.scss' -import { usePDP } from '../../../sdk/overrides/PageProvider' +import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection' import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext' +import { usePDP } from '../../../sdk/overrides/PageProvider' import { ProductDetailsDefaultComponents } from './DefaultComponents' -import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection' export interface ProductDetailsProps { productTitle: { @@ -115,25 +114,27 @@ function ProductDetails({ } = product useEffect(() => { - sendAnalyticsEvent>({ - name: 'view_item', - params: { - currency: currency.code as CurrencyCode, - value: price, - items: [ - { - item_id: isVariantOf.productGroupID, - item_name: isVariantOf.name, - item_brand: brand.name, - item_variant: sku, - price, - discount: listPrice - price, - currency: currency.code as CurrencyCode, - item_variant_name: variantName, - product_reference_id: gtin, - }, - ], - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent>({ + name: 'view_item', + params: { + currency: currency.code as CurrencyCode, + value: price, + items: [ + { + item_id: isVariantOf.productGroupID, + item_name: isVariantOf.name, + item_brand: brand.name, + item_variant: sku, + price, + discount: listPrice - price, + currency: currency.code as CurrencyCode, + item_variant_name: variantName, + product_reference_id: gtin, + }, + ], + }, + }) }) }, [ isVariantOf.productGroupID, diff --git a/packages/core/src/sdk/analytics/hooks/usePageViewEvent.ts b/packages/core/src/sdk/analytics/hooks/usePageViewEvent.ts index 8aa7f397ed..ba957ff129 100644 --- a/packages/core/src/sdk/analytics/hooks/usePageViewEvent.ts +++ b/packages/core/src/sdk/analytics/hooks/usePageViewEvent.ts @@ -1,17 +1,18 @@ -import { useCallback, useEffect } from 'react' -import { useRouter } from 'next/router' -import { sendAnalyticsEvent } from '@faststore/sdk' import type { PageViewEvent } from '@faststore/sdk' +import { useRouter } from 'next/router' +import { useCallback, useEffect } from 'react' export const usePageViewEvent = () => { const sendPageViewEvent = useCallback(() => { - sendAnalyticsEvent({ - name: 'page_view', - params: { - page_title: document.title, - page_location: location.href, - send_page_view: true, - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent({ + name: 'page_view', + params: { + page_title: document.title, + page_location: location.href, + send_page_view: true, + }, + }) }) }, []) diff --git a/packages/core/src/sdk/analytics/hooks/useViewItemListEvent.ts b/packages/core/src/sdk/analytics/hooks/useViewItemListEvent.ts index f2afd30484..a923494449 100644 --- a/packages/core/src/sdk/analytics/hooks/useViewItemListEvent.ts +++ b/packages/core/src/sdk/analytics/hooks/useViewItemListEvent.ts @@ -1,4 +1,3 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' import { useCallback } from 'react' import type { CurrencyCode, ViewItemListEvent } from '@faststore/sdk' @@ -25,25 +24,28 @@ export const useViewItemListEvent = ({ } = useSession() const sendViewItemListEvent = useCallback(() => { - sendAnalyticsEvent>({ - name: 'view_item_list', - params: { - item_list_name: title, - item_list_id: title, - items: products.map(({ node: product }, index) => ({ - item_id: product.isVariantOf.productGroupID, - item_name: product.isVariantOf.name, - item_brand: product.brand.name, - item_variant: product.sku, - price: product.offers.offers[0].price, - index: page * pageSize + index + 1, - discount: - product.offers.offers[0].listPrice - product.offers.offers[0].price, - currency: code as CurrencyCode, - item_variant_name: product.name, - product_reference_id: product.gtin, - })), - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent>({ + name: 'view_item_list', + params: { + item_list_name: title, + item_list_id: title, + items: products.map(({ node: product }, index) => ({ + item_id: product.isVariantOf.productGroupID, + item_name: product.isVariantOf.name, + item_brand: product.brand.name, + item_variant: product.sku, + price: product.offers.offers[0].price, + index: page * pageSize + index + 1, + discount: + product.offers.offers[0].listPrice - + product.offers.offers[0].price, + currency: code as CurrencyCode, + item_variant_name: product.name, + product_reference_id: product.gtin, + })), + }, + }) }) }, [code, products, title, page, pageSize]) diff --git a/packages/core/src/sdk/cart/useBuyButton.ts b/packages/core/src/sdk/cart/useBuyButton.ts index 5317ed6e79..0964ae84e9 100644 --- a/packages/core/src/sdk/cart/useBuyButton.ts +++ b/packages/core/src/sdk/cart/useBuyButton.ts @@ -1,12 +1,11 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' +import type { AddToCartEvent, CurrencyCode } from '@faststore/sdk' import { useCallback } from 'react' -import type { CurrencyCode, AddToCartEvent } from '@faststore/sdk' import type { AnalyticsItem } from 'src/sdk/analytics/types' import type { CartItem } from 'src/sdk/cart' -import { useSession } from '../session' import { useUI } from '@faststore/ui' +import { useSession } from '../session' import { cartStore } from './index' export const useBuyButton = (item: CartItem | null) => { @@ -23,28 +22,30 @@ export const useBuyButton = (item: CartItem | null) => { return } - sendAnalyticsEvent>({ - name: 'add_to_cart', - params: { - currency: code as CurrencyCode, - // TODO: In the future, we can explore more robust ways of - // calculating the value (gift items, discounts, etc.). - value: item.price * item.quantity, - items: [ - { - item_id: item.itemOffered.isVariantOf.productGroupID, - item_name: item.itemOffered.isVariantOf.name, - item_brand: item.itemOffered.brand.name, - item_variant: item.itemOffered.sku, - quantity: item.quantity, - price: item.price, - discount: item.listPrice - item.price, - currency: code as CurrencyCode, - item_variant_name: item.itemOffered.name, - product_reference_id: item.itemOffered.gtin, - }, - ], - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent>({ + name: 'add_to_cart', + params: { + currency: code as CurrencyCode, + // TODO: In the future, we can explore more robust ways of + // calculating the value (gift items, discounts, etc.). + value: item.price * item.quantity, + items: [ + { + item_id: item.itemOffered.isVariantOf.productGroupID, + item_name: item.itemOffered.isVariantOf.name, + item_brand: item.itemOffered.brand.name, + item_variant: item.itemOffered.sku, + quantity: item.quantity, + price: item.price, + discount: item.listPrice - item.price, + currency: code as CurrencyCode, + item_variant_name: item.itemOffered.name, + product_reference_id: item.itemOffered.gtin, + }, + ], + }, + }) }) cartStore.addItem(item) diff --git a/packages/core/src/sdk/cart/useRemoveButton.ts b/packages/core/src/sdk/cart/useRemoveButton.ts index f8f2b64511..8cda59dd0d 100644 --- a/packages/core/src/sdk/cart/useRemoveButton.ts +++ b/packages/core/src/sdk/cart/useRemoveButton.ts @@ -1,12 +1,11 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' -import { useCallback } from 'react' import type { CurrencyCode, RemoveFromCartEvent } from '@faststore/sdk' +import { useCallback } from 'react' import type { AnalyticsItem } from 'src/sdk/analytics/types' +import type { CartItem } from '.' import { useSession } from '../session' import { cartStore } from './index' -import type { CartItem } from '.' export const useRemoveButton = (item: CartItem | null) => { const { @@ -21,26 +20,28 @@ export const useRemoveButton = (item: CartItem | null) => { return } - sendAnalyticsEvent>({ - name: 'remove_from_cart', - params: { - currency: code as CurrencyCode, - value: item.price * item.quantity, // TODO: In the future, we can explore more robust ways of calculating the value (gift items, discounts, etc.). - items: [ - { - item_id: item.itemOffered.isVariantOf.productGroupID, - item_name: item.itemOffered.isVariantOf.name, - item_brand: item.itemOffered.brand.name, - item_variant: item.itemOffered.sku, - quantity: item.quantity, - price: item.price, - discount: item.listPrice - item.price, - currency: code as CurrencyCode, - item_variant_name: item.itemOffered.name, - product_reference_id: item.itemOffered.gtin, - }, - ], - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent>({ + name: 'remove_from_cart', + params: { + currency: code as CurrencyCode, + value: item.price * item.quantity, // TODO: In the future, we can explore more robust ways of calculating the value (gift items, discounts, etc.). + items: [ + { + item_id: item.itemOffered.isVariantOf.productGroupID, + item_name: item.itemOffered.isVariantOf.name, + item_brand: item.itemOffered.brand.name, + item_variant: item.itemOffered.sku, + quantity: item.quantity, + price: item.price, + discount: item.listPrice - item.price, + currency: code as CurrencyCode, + item_variant_name: item.itemOffered.name, + product_reference_id: item.itemOffered.gtin, + }, + ], + }, + }) }) cartStore.removeItem(item.id) diff --git a/packages/core/src/sdk/product/useProductGalleryQuery.ts b/packages/core/src/sdk/product/useProductGalleryQuery.ts index 701d576e5e..40e63948f5 100644 --- a/packages/core/src/sdk/product/useProductGalleryQuery.ts +++ b/packages/core/src/sdk/product/useProductGalleryQuery.ts @@ -1,5 +1,3 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' - import { gql } from '@generated' import { useQuery } from 'src/sdk/graphql/useQuery' import { useSession } from 'src/sdk/session' @@ -83,16 +81,18 @@ export const useProductGalleryQuery = ({ return useQuery(query, localizedVariables, { onSuccess: (data) => { if (data && term) { - sendAnalyticsEvent({ - name: 'intelligent_search_query', - params: { - locale, - term, - url: window.location.href, - logicalOperator: data.search.metadata?.logicalOperator ?? 'and', - isTermMisspelled: data.search.metadata?.isTermMisspelled ?? false, - totalCount: data.search.products.pageInfo.totalCount, - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent({ + name: 'intelligent_search_query', + params: { + locale, + term, + url: window.location.href, + logicalOperator: data.search.metadata?.logicalOperator ?? 'and', + isTermMisspelled: data.search.metadata?.isTermMisspelled ?? false, + totalCount: data.search.products.pageInfo.totalCount, + }, + }) }) } }, diff --git a/packages/core/src/sdk/product/useProductLink.ts b/packages/core/src/sdk/product/useProductLink.ts index 488b901a3d..289bbcddc8 100644 --- a/packages/core/src/sdk/product/useProductLink.ts +++ b/packages/core/src/sdk/product/useProductLink.ts @@ -1,11 +1,10 @@ -import { sendAnalyticsEvent } from '@faststore/sdk' -import { useCallback } from 'react' import type { CurrencyCode, SelectItemEvent } from '@faststore/sdk' +import { useCallback } from 'react' import type { ProductSummary_ProductFragment } from '@generated/graphql' -import { useSession } from '../session' import type { AnalyticsItem, SearchSelectItemEvent } from '../analytics/types' +import { useSession } from '../session' export type ProductLinkOptions = { index: number @@ -24,40 +23,42 @@ export const useProductLink = ({ } = useSession() const onClick = useCallback(() => { - sendAnalyticsEvent>({ - name: 'select_item', - params: { - items: [ - { - item_id: product.isVariantOf.productGroupID, - item_name: product.isVariantOf.name, - item_brand: product.brand.name, - item_variant: product.sku, - index, - price: product.offers.offers[selectedOffer].price, - discount: - product.offers.offers[selectedOffer].listPrice - - product.offers.offers[selectedOffer].price, - currency: code as CurrencyCode, - item_variant_name: product.name, - product_reference_id: product.gtin, - }, - ], - }, - }) + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent>({ + name: 'select_item', + params: { + items: [ + { + item_id: product.isVariantOf.productGroupID, + item_name: product.isVariantOf.name, + item_brand: product.brand.name, + item_variant: product.sku, + index, + price: product.offers.offers[selectedOffer].price, + discount: + product.offers.offers[selectedOffer].listPrice - + product.offers.offers[selectedOffer].price, + currency: code as CurrencyCode, + item_variant_name: product.name, + product_reference_id: product.gtin, + }, + ], + }, + }) - sendAnalyticsEvent({ - name: 'search_select_item', - params: { - url: window.location.href, - items: [ - { - item_id: product.isVariantOf.productGroupID, - item_variant: product.sku, - index, - }, - ], - }, + sendAnalyticsEvent({ + name: 'search_select_item', + params: { + url: window.location.href, + items: [ + { + item_id: product.isVariantOf.productGroupID, + item_variant: product.sku, + index, + }, + ], + }, + }) }) }, [code, product, index, selectedOffer]) diff --git a/packages/core/src/sdk/search/useSuggestions.ts b/packages/core/src/sdk/search/useSuggestions.ts index 54e88fbb84..8eab11fe68 100644 --- a/packages/core/src/sdk/search/useSuggestions.ts +++ b/packages/core/src/sdk/search/useSuggestions.ts @@ -1,6 +1,5 @@ import { useMemo } from 'react' -import { sendAnalyticsEvent } from '@faststore/sdk' import { useQuery } from 'src/sdk/graphql/useQuery' import { gql } from '@generated' @@ -55,18 +54,20 @@ function useSuggestions(term: string) { const { data, error } = useQuery(query, variables, { onSuccess: (callbackData) => { if (callbackData && term) { - sendAnalyticsEvent({ - name: 'intelligent_search_query', - params: { - locale, - term, - url: window.location.href, - logicalOperator: - callbackData.search.metadata?.logicalOperator ?? 'and', - isTermMisspelled: - callbackData.search.metadata?.isTermMisspelled ?? false, - totalCount: callbackData.search.products.pageInfo.totalCount, - }, + import('@faststore/sdk').then(({ sendAnalyticsEvent }) => { + sendAnalyticsEvent({ + name: 'intelligent_search_query', + params: { + locale, + term, + url: window.location.href, + logicalOperator: + callbackData.search.metadata?.logicalOperator ?? 'and', + isTermMisspelled: + callbackData.search.metadata?.isTermMisspelled ?? false, + totalCount: callbackData.search.products.pageInfo.totalCount, + }, + }) }) } },